React 컴포넌트 생명주기

React에서 컴포넌트의 생명주기는 크게 세 단계로 구분된다.

: 마운팅(Mounting), 업데이트(Updating), 그리고 언마운팅(Unmounting)

각 단계는 컴포넌트의 생성, 업데이트 및 파괴 과정에 해당한다.

 

1. 마운팅(Mounting)

이 단계는 컴포넌트가 처음으로 생성되어 DOM에 삽입되는 과정이다. 마운트 과정에서는 처음으로 render 메서드가 호출되어 컴포넌트가 화면에 렌더링 된다.

다음과 같은 생명주기 메서드가 마운팅 단계에서 호출된다. (자주 사용되는 생명주기 메서드는 볼드체)

• constructor(): 컴포넌트의 생성자. 컴포넌트의 초기 상태를 설정한다.
• static getDerivedStateFromProps(): 컴포넌트가 마운트 되기 전에 호출된다. props에 의해 state가 영향을 받을 때 사용된다.
• render(): 실제 DOM을 생성하는 메서드이다.
• componentDidMount(): 컴포넌트가 마운트 된 직후에 호출된다. 네트워크 요청, DOM 조작 등의 작업을 수행하기 좋은 위치이다.

** UNSAFE_componentWillMount() 메서드는 기존에 사용되었지만 이제는 사용하면 안 된다. (rename-unsafe-lifecycles codemod로 컴포넌트를 최신 문법으로 자동 갱신시킬 수 있다.)

 

 

2. 업데이트(Updating)

컴포넌트가 마운트 된 후, 상태(state) 또는 props의 변경이 발생하면 컴포넌트는 업데이트 단계를 거친다. 이때 render 메서드가 다시 호출되어 변경된 상태나 props에 따라 UI가 업데이트된다.

업데이트 과정에서는 다음과 같은 메서드가 호출된다.

• static getDerivedStateFromProps(): props의 변화에 따라 state를 업데이트할 필요가 있을 때 호출된다.
• shouldComponentUpdate(): 컴포넌트의 리렌더링을 허용할지 말지 결정한다. 성능 최적화에 유용하다.
• render(): 컴포넌트를 리렌더링 한다.
• getSnapshotBeforeUpdate(): DOM 변화가 반영되기 직전에 호출된다. DOM의 현재 상태(예: 스크롤 위치)를 캡처하는 데 사용된다.
• componentDidUpdate(): 컴포넌트 업데이트가 끝난 후 호출된다. 이전 props와 state를 비교하여 추가적인 작업을 수행할 수 있다.

** UNSAFE_componentWillUpdate(), UNSAFE_componentWillReceiveProps()는 이제 사용하면 안 된다. (마찬가지로 rename-unsafe-lifecycles codemod로 컴포넌트를 최신 문법으로 자동 갱신시킬 수 있다.)

 

 

3. 언마운팅(Unmounting)

컴포넌트가 DOM에서 제거되는 단계이다. 이 단계에서는 컴포넌트가 화면에서 사라지게 된다. 이 단계에서는 다음 메서드가 호출된다.

• componentWillUnmount(): 컴포넌트가 DOM에서 제거되기 직전에 호출된다. 이벤트 리스너 제거, 타이머 해제 등의 정리 작업을 수행한다.

 

 

출처 & 더 많은 정보는 아래의 공식 문서에서 찾을 수 있다.

React.Component – React

React.Component – React