오늘은 리액트의 라이프 사이클 과정에 대해서 알아보겠습니다. 라이프사이클은 마운트, 업데이트, 언마운트 총 세 가지 카테고리로 나눌 수 있습니다.
Mount
DOM이 생성되고 웹 브라우저에 나타나는 것을 마운트라고 합니다. 그럼 마운트가 될 때 호출되는 메서드들을 알아보죠. 위의 그림을 참고하세요.
그림을 살펴봤을 때 호출되는 함수의 순서는 아래와 같습니다.
- constructor
- getDerivedStateFromProps
- render
- componentDidMount
하나씩 뜯어보겠습니다.
constructor
컴포넌트가 새로 만들어질 때마다 호출되는 클래스 생성자 메서드입니다. 자바스크립트의 클래스와 똑같죠. 여기서 각 컴포넌트들의 state를 정의할 수 있습니다.
static getDerivedStateFromProps
부모 컴포넌트로부터 받은 props를 state와 동기화하는 함수입니다. state가 props에 의존적이거나, props로 state값을 결정하거나 할 때 말이죠. 컴포넌트가 렌더링 될 때마다 한 번씩은 실행되기 때문에 주의해야 합니다.
render
준비한 UI를 렌더링하는 메서드입니다.
componentDidMount
컴포넌트가 웹 브라우저에 나타난 뒤 호출하는 메서드입니다.
Update
컴포넌트가 업데이트될 경우를 알아보죠
- props가 바뀔 때
- state가 바뀔 때
- 부모 컴포넌트가 리렌더링될 때
- this.forceUpdate로 강제로 렌더링을 발생시킬 때
업데이트 과정에서 호출되는 메서드들을 알아보죠.
- getDerivedStateFromProps
- shouldComponentUpdate
- render
- getSnapshotBeforeUpdate
- componentDidUpdate
getDerivedStateFromProps
마운트에서도 나왔었죠. 마찬가지로 업데이트가 시작되기 전에 호출되서 props 변화에 따른 state를 바꾸고 싶을 때 사용합니다.
shouldComponentUpdate
컴포넌트의 리렌더링을 할지 말지 결정하는 메서드입니다. true 혹은 false를 반환하죠. true를 반환하면 render 메소드를 호출하고, false를 반환하면 작업을 중단합니다. 컴포넌트가 리렌더링되지 않도록 막는거죠. 한 가지 예외로, 어떤 함수에서 this.forceUpdate()가 호출되면 이 과정을 생략하고 바로 render함수를 호출해 UI를 리렌더링합니다.
render
컴포넌트를 리렌더링합니다.
getSnapshotBeforeUpdate
컴포넌트가 업데이트 되어 DOM에 반영하기 바로 전에 호출되는 메서드입니다.
componentDidUpdate
컴포넌트의 업데이트가 끝난 후 호출하는 메서드입니다.
Unmount
컴포넌트를 DOM에서 제거하는 과정을 언마운트라고 합니다. 라이프 사이클 메서드도 하나입니다.
componentWillUnmount
컴포넌트가 웹 브라우저에서 사라지기전에 호출하는 메서드입니다.
Reference
https://www.paduckk-dev.com/development/React%20LifeCycle/
리액트를 다루는 기술 - velopert
