리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리입니다. 그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기가 존재합니다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝납니다.
lifecycle 다이어그램
React Lifecycle Methods diagram
컴포넌트는 마운트 → 업데이트(반복) → 언마운트 순서대로 진행됩니다. 그 진행에 따라 아래와 같은 라이프 사이클 메소드들이 불려지게 됩니다.
1. 마운트
(컴포넌트가 처음 불려짐) → constructor → render → componentDidMount
constructor 와 componentDidMount 는 마운트 될 때 최초에 한 번 실행되는 메서드들 입니다.
constructor 는 컴포넌트의 생성자 메서드입니다. 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드입니다.
render 는 컴포넌트를 렌더링하는 메서드입니다
componentDidMount 는 컴포넌트의 첫번째 렌더링이 마치고 나면 호출되는 메서드입니다. 이 메서드가 호출되는 시점에는 우리가 만든 컴포넌트가 화면에 나타난 상태입니다. 해당 컴포넌트에서 필요로하는 데이터를 요청하기 위해 fetch 등을 통하여 요청을 하거나, DOM 의 속성을 읽거나 직접 변경하는 작업을 진행합니다.
2. 업데이트
(setState 혹은 새로운 props와 같은 업데이트) → render → componentDidUpdate
componentDidUpdate 는 리렌더링을 마치고, 화면에 우리가 원하는 변화가 모두 반영되고 난 뒤 호출되는 메서드입니다.
3. 언마운트
(컴포넌트가 화면에서 사라지는 시점) → componentWillUnmount
componentWillUnmount 는 컴포넌트가 화면에서 사라지기 직전에 호출됩니다.
모든 상황에서 라이프사이클이 똑같지는 않지만, 대략적으로 아래와 같이 라이프 사이클 순서가 돌아갑니다.
- constructor
- render
- componentDidMount
- (위 메소드에서 fetch 완료)
- (setState)
- render
- componentDidUpdate(setState가 되었기 때문에)
- componentWillUnmount
references
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
https://ko.reactjs.org/docs/state-and-lifecycle.html
https://react.vlpt.us/basic/25-lifecycle.html
