[React] 컴포넌트의 Lifecycle 생명주기 함수 - 이론

 생명주기란 단어가 딱딱할 수 있지만, 쉽게 인간으로 말씀드리면 태어나서 죽을 때까지의 기간입니다.

즉 컴포넌트가 생성되고 소멸될 때까지의 과정으로써, 크게 생성 -> 갱신 -> 소멸 3단계를 거칩니다.

그 과정에서 개발자는 총 8가지의 생명주기 함수를 이용할 수 있으며, 호출하는 타이밍은 리액트가 정합니다.

 

---

○ 생성 과정의 함수

 

1. constructor( props )

 너무나 자주 봐왔던 생성자 함수입니다. props인자와 가장 위에 super(props)는 필수입니다.

주로 초기화하는 데 사용하며, 특히 스테이트(state)는 여기서 초기화해야 합니다.

 

2. static getDerivedStateFromProps( props , state )

 이름이 긴 정적(static) 함수입니다. 동적이 아닌 정적인 이유는 좀 복잡합니다만, 쉽게 말씀드리면 데이터를 동기화해서 변형이 되지 않도록! 즉 동적인 this.props 또는 this.state가 아닌, 이 함수를 타고 넘어오는 인자 값을 사용해야 합니다. 첫 번째 인자 props가 상위(부모) 컴포넌트에서 전달되고 두 번째 인자 state는 현재 컴포넌트 상태 값입니다.

 

3. render()

 많은 설명이 필요 없이 거의 필수로 나왔던 함수입니다. 이름 그대로 화면에 렌더링(그리기)할 때 사용합니다. 가장 중요한 함수이며 갱신 과정에서는 항상 불려지지는 않고, 새로운 화면이 필요할 때만 호출되는 함수입니다.

 

4. componentDidMount()

 함수명으로도 알 수 있듯이 컴포넌트가 마운트 되었을 때, 즉 render함수가 끝나고 컴포넌트가 화면에 붙은 후입니다. 처음 생성 과정의 화면에서는 딱히 작업할 게 없고 대기를 해야 하는 작업들은 여기서 하는 게 좋습니다.

생성 과정의 함수이지만 2번과 3번은 갱신 과정에서도 필요에 의해 또 사용되며, 1번과 4번은 딱 한 번만 호출됩니다.

이러한 과정을 잘 활용하면 성능 향상에 도움이 됩니다. 그럼 다음으로 갱신 및 소멸 과정을 알아보겠습니다.

 

○ 갱신 과정의 함수

 

5. shouldComponentUpdate( nextProps , nextState )

 함수 이름을 굉장히 잘 지었다고 생각합니다. 말 그대로 갱신을 할지 말지를 결정하는 함수입니다. 함수로부터 넘어온 인자 값을 토대로 검증 작업을 하거나, 화면을 다시 출력할지를 결정하기 때문에 성능에 영향을 많이 줄 수 있습니다.

참고로 생명주기 함수는 아니지만 강제 갱신을 시키는 forceUpdate()를 사용하면 이 단계는 생략됩니다.

 

6. getSnapshotBeforeUpdate( prevProps , prevState )

 함수명만큼이나 설명하기 어렸습니다만, 간략하게 설명하자면 리액트는 가상 화면(Virtual DOM)이라 것이 존재하고  render함수를 통과해도 실제 화면에 바로 나오는 것은 아닙니다. 이름처럼 갱신 바로 전에 스냅샷을 찍은 타이밍입니다. 

즉 실제 화면 출력 바로 전에 호출됩니다. 이 함수를 이용하면 실제 화면에 출력될 DOM 정보를 가지고 올 수 있습니다.

 

7. componentDidUpdate( prevProps , prevState , snapshot )

 생성 과정의 4번 componentDidMount함수와 비슷한 느낌입니다. 실제 화면에 출력된 후에 호출되는데 인수가 3개! 첫 번째 인자는 갱신 전 프로퍼티, 두 번째는 갱신 전 스테이트, 세 번째는 6번에서 설명한 그 스냅샷 반환 값입니다.

이렇게 인수가 많은 이유는 화면 출력 전후를 비교하여 DOM 정보를 변경하거나 후처리를 하기 위함입니다.

 

○ 소멸 과정의 함수

 

8. componentWillUnmount()

 마지막 소멸 과정의 함수는 하나인데 바로 소멸되기 직전에 호출되는 함수입니다. 이름 그대로 언마운트 작업을 하면 되는데, 대표적으로는 메모리 누수 방지를 위한 해제(clear) 작업이나, 타이머 또는 스레드 관련 같은 작업들을 멈추거나 정리하는 것이 필요합니다. 이런 작업을 하지 않을 경우 심각한 성능 저하가 있을 수 있습니다.

---

 이번 포스팅은 8가지 생명주기 함수의 간략한 설명을 해보왔습니다. 코드 한 줄 없는 지루한 설명이었지만, 바로 다음 포스팅으로 이러지는 실습 시간을 위해서라도, 대략적인 기능은 꼭 인지하고 넘어가는 것을 추천드립니다.

 

---

 

2020/09/24 - [Web프론트엔드/리액트] - [React] 컴포넌트의 Lifecycle 생명주기 함수 - 실습

[React] 컴포넌트의 Lifecycle 생명주기 함수 - 실습