[React] 리액트 컴포넌트, State

▣ 클래스형 컴포넌트( class component ) vs 함수형 컴포넌트 차이 ( function component )

   ※ 클래스형 컴포넌트 

       1. class 키워드가 반드시 필요함

       2. Component로 상속 받아야함

       3. render() 메소드가 반드시 필요함

   ※ 함수형 컴포넌트 

       1. state, LifeCycle 관련 기능 사용 불가능 (Hook을 통해 해결가능)

       2. 클래스보다 선언이 편함

       3. 메모리 자원도 컴포넌트보다 덜 사용함

 

 

▣ 컴포넌트 만들기

1. src 디렉터리에 MyComponent.js 파일 생성

2. 코드 작성

3. App.js에 컴포넌트 모듈 import 

결과

 

▣ props

특징 : properties 줄임말로 컴포넌트 속성을 설정할 때 사용하고, 읽기전용이고 컴포넌트 자체의 props를 수정하면 안됨

수정되는 건 state만 수정됨

 

클래스형 : this.props로 통해 값을 불러옴 (예 : const  {name, age} = this.props )

함수형 : props바로 호출 (예 : <div>이름 {name}, 나이 {age}</div>

 

1. JSX 내부에서 props 렌더링

 

2. props 기본값 설정 : defaultProps

 ==> 예제와 실제 구현은 달랐다...이유는 모르겠다....끙....왜 이름이 안나오는걸까...

 

▣State : React 컴포넌트 내부에서 동적인 데이터를 관리하기 위해 사용하는 객체

. 상태는 React 컴포넌트의 현재 상태를 나타내며, 데이터가 변경될 때 UI를 렌더링하도록 트리거한다.

. 함수형 컴포넌트에서는 Hooks(useState)를 사용하여 상태를 관리하며, 클래스형 컴포넌트에서는 this.state를 사용한다.

 

[함수형 기본 사용법]

 

[클래스형 기본 사용법]

State와 Props의 차이

특징StateProps

역할	컴포넌트 내부에서 관리되는 동적인 데이터	부모 컴포넌트에서 전달받은 데이터
수정 가능 여부	컴포넌트 내부에서만 수정 가능	읽기 전용 (수정 불가)
초기화 위치	컴포넌트 내부에서 초기값 설정	부모 컴포넌트에서 값을 전달
사용 목적	컴포넌트의 상태를 관리 (동적 UI)	데이터를 전달하고 컴포넌트 간 통신

 

주요 주의점

1. 상태는 불변성 유지:
2. 상태를 직접 변경하지 말고, 반드시 setState 또는 useState를 사용하세요.

```javascript // 잘못된 예 state.count = 10; // 오류 발생

// 올바른 예 setState({ count: 10 }); ```

1. 비동기적 업데이트:
2. setState와 useState는 비동기로 작동하므로, 상태 변경 직후의 값에 의존하지 말아야 합니다.

```javascript // 잘못된 예 setCount(count + 1); setCount(count + 1); // 예상과 다르게 한 번만 증가

// 올바른 예 setCount((prevCount) => prevCount + 1); setCount((prevCount) => prevCount + 1); // 두 번 증가 ``