리액트의 라이프사이클은 컴포넌트가 생성되고 업데이트되며 소멸되는 과정을 단계적으로 설명하는 개념입니다. 리액트 라이프사이클은 클래스형 컴포넌트에서 주로 사용되며, 함수형 컴포넌트에서는 React Hook인 `useEffect`를 활용하여 비슷한 기능을 구현할 수 있습니다. React 16.3 이후부터는 라이프사이클 API가 변경되었으며, 아래는 React 16.3 이후의 라이프사이클 메서드들을 정리한 것입니다.
생명주기 메서드는 다음과 같이 세 가지 카테고리로 나눌 수 있습니다.
1. 마운트 (Mounting)
- 컴포넌트가 생성되어 DOM에 삽입될 때의 단계입니다.
- `constructor`: 컴포넌트가 생성될 때 호출되는 생성자 메서드입니다.
- `static getDerivedStateFromProps`: props로부터 상태를 동기적으로 업데이트하는 메서드입니다. 리액트 17 버전 이후에는 권장하지 않으며, 대신 `componentDidUpdate`를 사용하는 것이 좋습니다.
- `render`: 컴포넌트의 UI를 반환하는 메서드입니다.
- `componentDidMount`: 컴포넌트가 DOM에 삽입된 직후에 호출되는 메서드입니다. API 호출이나 초기화 작업 등을 수행하기에 적합합니다.
2. 업데이트 (Updating)
- 컴포넌트가 업데이트되는 단계입니다. props나 state가 변경될 때마다 호출됩니다.
- `static getDerivedStateFromProps`: props로부터 상태를 동기적으로 업데이트하는 메서드입니다. 리액트 17 버전 이후에는 권장하지 않습니다.
- `shouldComponentUpdate`: 컴포넌트가 리렌더링을 해야 할지 말아야 할지 결정하는 메서드입니다. 성능 최적화를 위해 사용합니다.
- `render`: 컴포넌트의 UI를 반환하는 메서드입니다.
- `getSnapshotBeforeUpdate`: 컴포넌트가 업데이트되기 직전에 호출되는 메서드로, DOM 상태를 캡처하는 데 사용합니다.
- `componentDidUpdate`: 컴포넌트가 업데이트된 직후에 호출되는 메서드입니다. 이전 props와 state를 비교하여 변경 사항을 처리하는 데 사용됩니다.
3. 언마운트 (Unmounting)
- 컴포넌트가 DOM에서 제거될 때의 단계입니다.
- `componentWillUnmount`: 컴포넌트가 제거되기 직전에 호출되는 메서드입니다. 리소스 정리나 이벤트 해제 등을 수행하기에 적합합니다.
추가로 React 17 버전 이후에는 다음과 같은 라이프사이클 메서드들이 삭제되었습니다:
- `componentWillMount`
- `componentWillReceiveProps`
- `componentWillUpdate`
이 대신에 `getDerivedStateFromProps`와 `componentDidUpdate`를 사용하여 같은 작업을 수행할 수 있습니다. 또한 React 18에서는 라이프사이클 API가 변경될 수 있으므로, 해당 버전 이후의 변화에 주의해야 합니다.
'CS' 카테고리의 다른 글
스택과 큐의 차이점 (0) | 2023.08.07 |
---|---|
자주쓰는 색상을 React에서 관리하는 방법 (0) | 2023.08.07 |
부모 자식간의 교류에 관하여. (0) | 2023.08.07 |
링크드 리스트에 관하여 (0) | 2023.08.07 |
Redux 상태관리의 주요 개념들과 연결 관계 (0) | 2023.04.07 |