리엑트 생명주기

React 컴포넌트에는 생명주기(라이프사이클) 가 존재합니다. 이 생명주기는 컴포넌트가 생성되고 화면에 렌더링되어 업데이트되고 제거될 때까지의 과정입니다.

생명주기는 생성(mounting) - 업데이트(updating) - 제거(unmounting) 단계로 구성되어 있으며, 각 단계마다 특정한 이벤트가 발생합니다.

1. 생성(mounting)

생성단계에서는 컴포넌트가 페이지에 새로 추가될 때 발생되며 다음과 같은 메서드들을 호출합니다.

• constructor() : 컴포넌트가 생성될 때 호출됩니다. 초기 상태를 설정하거나 메서드를 바인딩하는 데 사용됩니다.
• static getDerivedStateFromProps() : props의 변경에 따라 state를 업데이트하기 위해 호출됩니다.
• render() : 컴포넌트의 UI를 렌더링합니다. 필수 메서드입니다.
• componentDidMount() : 컴포넌트가 DOM에 삽입된 후 호출됩니다. 외부 API를 호출하거나 네트워크 요청 같은 비동기 작업을 처리할 수 있습니다

2. 업데이트(updating)

컴포넌트의 props나 state가 변경되어 재렌더링되는 단계이며 다음과 같은 메서들을 호출합니다.

• static getDerivedStateFromProps() : props의 변경에 따라 state를 업데이트하기 위해 호출됩니다.
• shouldComponentUpdate() : 컴포넌트가 업데이트되어야 하는지 여부를 결정합니다. 성능 최적화에 사용됩니다.
• render() : 컴포넌트의 UI를 렌더링합니다.
• getSnapshotBeforeUpdate() : DOM이 업데이트되기 직전에 호출됩니다. DOM의 상태를 저장하는 데 사용됩니다.
• componentDidUpdate() : 컴포넌트가 업데이트된 후 호출됩니다. DOM을 조작하거나 외부 API를 호출하는 데 사용됩니다.

3. 제거(unmounting)

컴포넌트를 DOM에서 제거하는 과정입니다.

• componentWillUnmount() : 컴포넌트가 DOM에서 제거되기 직전에 호출됩니다. 구독을 해제하거나 리소스를 정리하는 데 사용됩니다.

4. 오류처리 메서드

추가로 컴포넌트 렌더링 중 오류가 발생했을 때 처리하는 단계입니다.

• static getDerivedStateFromError() : 오류가 발생했을 때 대체 UI를 렌더링하기 위해 호출됩니다.
• componentDidCatch() : 오류가 발생했을 때 오류 로그를 기록하거나 오류 보고 서비스를 호출하는 데 사용됩니다.