Lifecycle - 생명주기
컴포넌트의 생성부터 소멸까지의 과정을 Lifecycle 이라고 부릅니다. 이러한 생명주기 함수들을 이용해서 특정 시점에 원하는 동작을 실행하게 만들 수 있어 유용합니다.
출처: Do it! 리액트 프로그래밍 정석 - 박호준 (p.113)
Lifecycle 은 위의 그림과 같은 과정을 거쳐 호출되는데 하나씩 알아보도록 하겠습니다.
1. constructor(props)
...
constructor(props) {
super(props)
...
}
...constructor 는 클래스(class) 에 대해 알고 계시다면 익숙한 함수일 것입니다. '생성자 함수' 라고도 불리며 맨 처음 생성될 때 한 번만 호출됩니다. constructor 를 정의할 때는 super() 함수를 가장 위에 호출해야 하는데 그 이유는 super() 함수에 props 와 lifecycle 상태 등을 초기화해주는 과정을 포함하고 있기 때문입니다.
2. render
render 는 컴포넌트에서 JSX element 를 리턴하는 함수로 이러한 JSX elements 가 화면에 그려지게 됩니다.
3. static getDerivedStateFromProps(props, state)
static 함수는 클래스 자체에 할당된 함수로 instance 가 아닌 클래스 자체를 통해 호출해야 합니다. 그렇기에 this 를 이용한 state 와 props 에는 접근할 수 없고, 인자로 전달하여 이용해야 합니다.
getDerivedStateFromProps 는 위 그래프에 따르면 constructor 함수와 render 함수 사이에 호출됩니다. "이 메서드는 시간이 흐름에 따라 변하는 props에 state가 의존하는 아주 드문 사용례를 위하여 존재합니다." 다만 리액트 공식문서에는 state를 끌어오면 컴포넌트를 이해하기 어려워짐을 우려해서 여러 대안들 또한 소개하고 있습니다.
4. componentDidMount()
render 함수가 호출되어 JSX elements 가 화면에 그려진 후에 (정확히 표현하자면 ReactDOM 트리에 삽입된 직후에) 호출되는 함수입니다.
공식 문서에 따르면 외부에서 데이터를 불러오거나, 네트워크 요청을 보내거나, 데이터 구독을 설정하기 좋은 단계입니다.
5. shouldComponentUpdate(nextProps, nextState)
이 메서드는 props 나 state 가 변경되었을 때 화면을 새로 출력할지 판단하는 함수입니다. (p. 115) 데이터의 변화를 비교하는 작업을 하므로 (공식 문서에 따르면) 오직 성능 최적화만을 위한 것입니다.
5. getSnapshotBeforeUpdate(prevProps, prevState)
getSnapshotBeforeUpdate 함수는 변경 사항이 Virtual DOM 에 완성된 이후 호출됩니다. 이 메서드를 이용하면 DOM 에서 스크롤 위치나 출력될 element 의 크기와 같은 정보들을 변경되기 전 값들에 접근하여 비교할 수 있습니다. 해당 함수가 반환하는 값은 componentDidUpdate 의 인자로 전달됩니다.
6. componentDidUpdate(prevProps, prevState, snapshot)
componentDidUpdate 는 이전 props 와 state, 그리고 getSnapshotBeforeUpdate 의 반환값을 인자로 받습니다. 해당 값들을 이용하여 스크롤 위치나 커서를 옮기는 등 컴포넌트가 갱신된 후 DOM 을 조작하기 위해 활용됩니다.
componentDidUpdate 에서 setState 를 호출할 수 있지만, 적절한 조건문을 사용하여 관리하지 않으면 무한 렌더링을 일으킬 수도 있습니다.
7. componentWillUnmount()
componentWillUnmount 는 마지막 lifecycle 과정으로 컴포넌트가 (마운트 해제되어) 소멸되기 직전에 호출되는 함수입니다. 컴포넌트에서 실행한 타이머나 네트워크 요청, 혹은 데이터 구독 등 메모리 누수를 일으킬만한 작업들을 모두 해제하는 작업을 수행하기 적당한 함수입니다.
해당 포스트의 내용은 Do it! 리액트 프로그래밍 과 리액트 공식문서 를 참고하여 작성하였습니다.
