[ React ] 리액트 컴포넌트의 생명주기 ( mount → update → unmount )

리액트 컴포넌트의 생명주기란

컴포넌트가 생성되고 소멸될 때까지의 과정이다.

(생성되고  -> 업데이트 -> 사라진다)

 

 

 

컴포넌트 생명주기의 3단계

- 마운트 Mount

나타나는 것, 컴포넌트가 생성되는 시점

constuctor() 컴포넌트가 생성될 때 처음으로 호출된다.

초기 상태를 설정하거나 메서드를 바인딩하는 등의 작업을 수행한다.

render() 컴포넌트의 UI를 렌더링 한다.

cpmponentDidMount() 컴포넌트가 DOM에 들어가고 호출된다.

 

- 업데이트 Update

컴포넌트의 상태나 속성props가 변경될 때 발생하는 단계

shouldComponentUpdate(prevProps,prevState)컴포넌트가 업데이트 된 후 호출된다.

(또는 forceUpdate() 강제 업데이트 함수 호출로 인해 컴포넌트 다시 렌더링 후 호출된다.)

이전 props와 state를 확인해 필요한 업데이트 작업을 수행한다.

 

- 언마운트 Unmount

사라지는 것, 상위 컴포넌트에서 현재 컴포넌트를 화면에 표시하지 않게 될 때

componentWillUnmount()함수가 호출된다.

DOM에서 제거되기 전에 호출된다. 이벤트 리스너 해제나 타이머 정리 등의 작업을 수행한다.

 

 

 

리액트 컴포넌트 생명주기를 알아야 하는 이유?

생명주기를 이해해야 컴포넌트의 상태를 적절히 관리할 수 있다.

상태를 업데이트 하는 시점과 방법을 정확히 이해하면 데이터 흐름을 에측하고 상태관리를 개선할 수 있다.

또한 생명주기 메서드를 최적화하여 불필요한 렌더링을 방지하고 성능을 향상시킬 수 있다.

shouldComponentUpdate()메서드를 활용해 렌더링을 필요한 경우에만 수행하도록 조절할 수 있다.

상태 관리 라이브러리와 효율적으로 연동하여 상태를 관리할 수도 있다.(ex.Redux의 connect()함수를 통한)

컴포넌트가 생성되고 제거될 때 초기화와 정리 작업을 수행할 수 있기에 좀 효율적인 상태, 리소스 관리를 할 수 있다.