React Component
props를 input으로 하고 UI가 어떻게 보일지 정의하는 React Element를 output으로 하는 함수이다.
1. React Component의 생명 주기
(1) Mount (생성) : 컴포넌트의 인스턴스가 생성되어 DOM 상에 순서대로 호출된다.
(2) Update (갱신) : props 혹은 state가 변경되었을 때 일어난다.
(3) Unmount(소멸) : 컴포넌트가 DOM 상에서 제거될 때
2. React Component의 인스턴스 속성 → UI 데이터를 관리
(1) props (속성값)
- 할당된 후 값을 변경할 수 없다. (불변변수)
- 컴포넌트 간에는 무조건 props를 통해 데이터를 주고받는다.
- 부모 컴포넌트가 렌더링될 때마다 자식 컴포넌트들도 모두 리렌더링된다.
※ 자신의 상태값이 변경될 때만 리렌더링되게 하려면 React.memo를 활용하면 된다.
(2) state (상태값)
- 상황에 따라 변경되어야 하는 값들을 다룬다.
- 불변 변수는 아니지만 불변 변수처럼 다루는 것이 좋다 : 상태가 객체일 때 프로퍼티 값을 바꾸면 리액트는 그 변화를 감지하기 못하기 때문이다. 따라서 내부 값을 바꾸는 게 아니라 새로운 값을 들고 있는 새로운 객체를 상태로 가리키는 것이 바람직하다.
3. React Component의 재사용성
- 동일한 컴포넌트를 여러 개 사용할 수 있다.
- 동일한 컴포넌트더라도 각 인스턴스는 각자의 메모리 공간을 가지고 있기 때문에 자신만의 상태값을 가진다.
- 컴포넌트의 재사용성을 높이기 위해서는 그 내부 로직을 간결하고 명확하게 유지하는 것이 중요하다.
- 고차 컴포넌트는 공통 로직을 얼마나 분리하느냐가 중요하다.
- 무상태 컴포넌트(Stateless Component)
- 상태값(state)이 없는 컴포넌트이다.
- 재사용성이 매우 높은 컴포넌트이다.
'프론트엔드 기본개념 복습 > React' 카테고리의 다른 글
| [React] state 갱신하기 (0) | 2022.03.02 |
|---|---|
| [React] 에러 경계 (Error Boundaries) (0) | 2022.02.24 |
| [React] 코드 분할 (Code Splitting) (0) | 2022.02.24 |
| [React] React.memo, useCallback (0) | 2022.02.22 |
| [React] 고차 컴포넌트(HOC) (0) | 2022.02.22 |