React의 Lifecycle

React Component의 생명주기(Lifecycle)란 무엇인가?

---

'생명주기'라는 이름에서 짐작한 사람도 있을 것이다. 단어 그대로 생각해보자 '생명'의 '주기'. 말 그대로 한 생명이 태어나서 죽을 때까지의 기간을 뜻하는 말이다. 앞서 리액트 라이브러리 소개 글에서 이야기했듯이, 리액트는 작은 컴포넌트들이 모여 만들어진다. 즉, 여기서 이야기하는 생명주기는 리액트 내부에서 쓰이는 컴포넌트가 만들어지고 제거될 때까지의 기간을 뜻하는 말이다. 사람이든 뭐든 태어났으면 언젠가는 죽는 법. 인생사 공수래공수거.

 

리액트 컴포넌트가 가지고 있는 생명주기는 크게 세 단계로 나누어진다. "생성될 때", "업데이트할 때", "제거할 때". 세 가지 분류는 리액트에서 "Mount", "Update", "Unmount"라고 부른다. 우리 눈에야 한국말이 훨씬 직관적이긴 하지만, 번역이 안된 공식 도큐먼트나 stackoverflow 같은 해외 사이트들을 참조할 때를 대비해 공식 명칭을 알아두도록 하자.

 

각 생명주기마다 호출되는 메소드들을 생명주기 메소드라고 한다. 크게 여덟 가지가 있는데 하나하나 살펴보도록 하자.

 

 

 

Lifecycle Method

---

해당 이미지는 리액트 공식문서에서 버전별, 복잡도별로 살펴볼 수 있다.

 

Mounting

---

• constructor
  컴포넌트가 마운트 되기 전, 가장 먼저 실행되는 메소드다. 초기 state를 설정하기 위해 사용된다.
• getDerivedStateFromProps
  새로 받아온 props 값을 state에 넣기 위해, 즉 동기화하기 위한 용도로 사용한다.
• render
  컴포넌트를 렌더링 한다. 이 말은, 이전 메소드들이 실행될 때는 컴포넌트가 렌더링 되지 않는다는 뜻이다.
• componentDidMount
  컴포넌트가 렌더링 되고 난 뒤 실행되는 메소드. 즉, 메소드가 렌더링 되었기 때문에 우리는 화면을 통해 해당 컴포넌트를 확인할 수 있는 시기에 호출된다. 우리가 흔히 사용하는 ajax, axios, fetch 등을 사용하는 시기가 바로 이 시기다.

 

Updating

---

• getDerivedStateFromProps
  마운트 될 때 호출되었던 메소드와 똑같은 메소드다. 같은 기능을 수행한다.
• shouldComponentUpdate
  컴포넌트를 새로 렌더링 할지, 그대로 둘 지 판단하는 용도로 사용한다. 위 그림에서 이 함수 아래 X 표시되어있는 갈래가 있는 이유가 바로 이것이다.
• render
  shouldComponentUpdate를 통해 리렌더링이 필요하다고 판별되면 새로 렌더링 한다. 마운트 될 때 호출되었던 메소드와 같은 메소드.
• getSnapshotBeforeUpdate
  해당 메소드는 render 결과를 DOM에 반영하기 전에 호출된다. 공식 문서에 따르면 스크롤 위치와 같은 정보를 DOM 변경 전에 알 수 있다고 하는데, 사용이 흔하지는 않다고 한다. 메신저 기능에서 이전 대화를 보기 위해 스크롤 올리면 새로 메시지가 와도 맨 아래로 바로 넘어가지 않고 현재 확인하고 있는 스크롤 위치 화면을 유지하는 것을 볼 수 있는데, 예를 들어보자면 그런 기능을 구현할 때 사용된다.
• componentDidUpdate
  업데이트 완료 시 호출되는 메소드. 이 시점에서 컴포넌트는 갱신 완료되었기 때문에 DOM 조작을 수행할 수 있다. 참고로 getSnapshotBeforeUpdate의 결과가 인자로 넘어오는 메소드도 이 메소드.

 

Unmounting

---

• ​componentWillUnmount
  컴포넌트가 화면에서 사라지기 바로 직전에 호출되는 메소드. DOM에 등록한 이벤트, setTimeout 등을 제거하고 외부 라이브러리를 dispose 할 수 있다면 여기서 해야 한다. 안녕...

 

여기까지 리액트 컴포넌트의 생명주기 메소드를 살펴보았다. 여기서 한 가지 알아둘 점. 리액트 생명주기 메소드는 클래스형 컴포넌트에서만 사용할 수 있다. 문제는 앞으로 클래스형 컴포넌트를 사용할 일이 드물다는 것이다. 물론 사용할 일이 아예 없는 것은 아니다. 기존에 만들어둔 프로젝트를 보수해야 한다거나, 함수형 컴포넌트를 지원하지 않는 라이브러리를 써야 한다거나, 아직 함수형 컴포넌트에서 쓰지 못하는 기능을 구현해야 한다거나...

 

'그 드문 일들을 위해 위 메소드들을 알아두는 건 비효율적인 거 아닌가?'라는 생각을 할 수 있다. 하지만, 역시 배워두면 어디든 쓸 곳은 있다. 지난 2019년 업데이트된 리액트 16.8 버전 이후부터 Hook이라는 기능이 생겼기 때문이다. 현재 함수형 컴포넌트를 만들 때 Hook 기능은 무조건 사용한다고 보면 되는데, 위 생명주기 메소드들을 알아두면 Hook 기능을 이해하기 훨씬 편해진다.

 

물론 함수형이고 클래스형이고, Hook이고를 떠나서 React 라이브러리 자체에 대한 이해를 위해서도 생명주기는 한 번쯤 보고 넘어가는 것이 좋다.

 

 

 

참고

---

https://ko.reactjs.org/docs/react-component.html

React.Component – React

https://react.vlpt.us/basic/25-lifecycle.html

25. LifeCycle Method · GitBook

https://koras02.tistory.com/92?category=967574

[React] React Life Cycle 생명주기