컴포넌트의 라이프사이클 메서드

리액트 라이프사이클?
리액트 컴포넌트의 수명 주기이다.

  쉽게 말해, 컴포넌트가 생성되고 소멸되는 이련의 과정을 라이프 사이클이라고 한다. 참고로 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다. 함수 컴포넌트에서는 Hooks 기능을 사용하여 비슷한 작업을 처리할 수는 있다.

 

  일반적으로 리액트를 작성할 때 함수형 컴포넌트를 많이 사용하므로 '이런 것들이 있구나'하고 느끼고 함수 컴포넌트에서는 이를 어떻게 비슷하게 Hooks로 만들었는지 비교해보면 좋을 것 같다. 오늘은 class형 컴포넌트 라이프사이클 메서드들에 대해서만 다뤄보도록 하겠다.

 

   우선 라이프사이클은 총 세 가지 기준으로 나눠볼 수 있다. 

 

1. 마운트 

  DOM이 생성되고 웹 브라우저상에 나타날 때를 의미한다.

 

2. 업데이트

  데이터가 변경되는 경우를 의미한다. 업데이트가 이뤄지는 리액트에서 4가지 경우가 있다.

1. props가 바뀔 때
2. state가 바뀔 때
3. 부모 컴포넌트가 리렌더링 될 때
4. this.forceUpdate로 강제로 렌더링을 트리거할 때

이렇게 4가지 경우에 업데이트가 이뤄진다. 

 

3. 언마운트

  컴포넌트를 DOM에서 제거하는 것을 의미한다.

 

위 각각의 행위가 일어나는 시기를 기준으로 호출할 수 있는 메서드들이 존재한다. 우선 큰 그림을 통해 전체적인 흐림을 알아보자.

리액트 class 라이프사이클

  라이프사이클 메서드를 호출하면 위의 흐름에 해당하는 시기에 해당 메서드가 호출되게 된다. 많은 라이프사이클 메서드들이 존재하지만 그 중에서도 많이 사용하고 중요한 메서드들이라고 생각되는 몇 가지 라이프사이클 메서드를 정리해보고자 한다.

(render 메서드, constructor 메서드는 생략하도록 하겠다.)

 

1. componentDidMount 메서드

  이것은 컴포넌트를 만들고 첫 렌더링을 다 마친 후 실행된다. 이 안에서는 다른 자바스크립트 라이브러리나 프레임워크 혹은 함수를 호출하거나 이벤트 등록, setTimeout, setInterval, 네트워크 요청과 같은 비동기 작업을 처리하면 된다.

 

2. componentDidUpadate(prevProps, prevState, snapshot) 메서드

  이것은 렌더링을 완료한 후 실행한다. 인수로는 prevProps, prevState, snapshot을 인수로 받으면 단어의 의미대로 이전 props와 이전 state를 가지고 있으며 이를 통해 이전에 가졌던 데이터에 접근할 수 있다. snapshot은 getSnapshotBeforeUpdate에서 반환한 값이 있다면 여기서 snapshot 값을 전달받을 수 있다. 

 

3. componentWillUnmount 메서드

  이것은 컴포넌트를 DOm에서 제거되기 직전에 실행된다. 이때 등록한 이벤트, 타이머가 있다면 여기서 제거 작업을 해야 메모리 누수를 방지할 수 있다. 

 

4. shouldComponentUpdate(nextProps, nextState) 메서드

  이것은 props 또는 state를 변경했을 때, 리렌더링을 시작할지 여부를 지정하는 메서드로 메서드는 true 또는 false값을 반환해야 한다. 만약 따로 설정하지 않는다면 기본적으로 언제나 true 값을 반환한다. 메서드를 설정하여 false값을 반환하면 업데이트 과정을 중지한다.

인수로 전달되는 nextProps나 nextState를 통해 현재 상태의 값과 비교하여 변화가 있는 경우에는 true를 아닌 경우에는 false를 반환하게 해주면 리렌더링을 방지하게 된다. 이를 통해 최적화를 할 수 있다. 

 

지금까지 대표적으로 많이 사용되고 있는 class 컴포넌트의 라이프사이클 메서드들에 대해서 알아보았다. 내용을 세세하게 알고 외우는 느낌보다는 이런게 있다 정도로 알아두면 도움이 될 것 같다.(지금 외워도 어차피,,,까먹는다...😂)