[React] 라이프 사이클(클래스형)

"React를 사용하여 개발을 하는 프론트엔드 개발자"
요즘 정말 많이 보인다. 물론 최근에 개발에 입문하게된 나또한 React환경에서 프론트 개발을 하고있다.

그런데 일을하다 문득 든 생각이 있었다.
이놈의 라이프 사이클은 어떻게 될까? 그래서 오늘은 블로그에 적어보려 한다.

라이프 사이클이란?

흔히들 말하는 생명주기, 리액트로 말하자면 컴포넌트의 수명이라고 말할수 있을것같다.

리액트의 라이프 사이클은 페이지가 랜더링 되기 전 준비단계 부터 페이지에서 사라질때까지를 한 사이클로 보면 될것같다.

리액트의 라이프 사이클은?

리액트에서의 라이프 사이클은 크게 세가지 단계로 볼수있다.
마운트 -> 업데이트 -> 언마운트 이렇게 세단계로 볼수있는데
각각의 단계에서는 메서드를 이용하게 된다.

1. 마운트 단계

1-1. constructor
컴포넌트를 만들때 처음 실행되는데 이 메서드에서는 초기 state값을 정할수 있다.

1-2. getDerivedStateFromProps
컴포넌트 마운트 또는 업데이트에서 render 메소드를 호출하기 전에 호출되며 시간의 흐름에 따라 변하는 props를 state에 동기화하기 위해 존재하는 메소드이다. 이는 static과 함께 선언되어야 하며 메소드 내부에서는 this를 통한 인스턴스 접근이 불가하며 props를 이용하여 생성한 객체를 반환함으로써 props를 state에 동기화 하게된다.

1-3. render
컴포넌트 마운트 또는 업데이트에서 호출되고 생명주기 메소드중 유일하게 반드시 구현되어야 하는 메서드이다.

1-4. componentDidMount
컴포넌트 마운트 직후에 호출되는 메서드로 라이브러리, 프레임워크 함수호출, 이벤트 등록 등의 비동기 작업을 처리하기에 좋다.
이 과정에서 setState()를 호출하는 경우도 있지만 추가적인 렌더링의 발생으로 성능저하가 이루어 질수 있으니 주의해야된다.

2. 업데이트 단계

이 과정에서 props 또는 state의 변경, 부모 컴포넌트의 리렌더링, this.forceUpdate의 호출 등으로 인해 컴포넌트 업데이트가 발생할 때에는 아래와 같은 생명주기 메소드가 순서대로 실행된다.

1. getDerivedStateFromProps
2. shouldComponentUpdate(props,state)
3. render
4. getSnapshotBeforeUpdate(props, state)
5. componentDidUpdate(props, state, snapshot)

1,3번은 위에 적혀있으니까 패스하고 2,4,5번을 알아보자

2-2. shouldComponentUpdate(props,state)
컴포넌트 업데이트에서 render메소드의 호출직전에 호출되고 해당 컴포넌트의 리렌더링 여부를 결정하는 메소드인데 기본적으로 true를 반환하여 3번에 있는 render단계를 재실행 하지만 props와 state의 비교에 따라 리렌더링이 이루어지지 않는경우도 있다.

2-4. getSnapshotBeforeUpdate(props, state)
마지막으로 렌더링 된 결과가 DOM에 반영되기 전에 호출되는 메서드인데 스크롤의 위치같은 정보를 DOM에 반영되기 전에 얻을수 있다.

2-5. componentDidUpdate(props, state, snapshot)
컴포넌트 업데이트 직후에 호출되는 메소드로, DOM을 조작하거나 이전과 현재의 props를 비교하여 네트워크 요청을 보내는 작업 등이 이루어지는데 메소드 내부에서 setState를 호출할 수 있지만 조건문으로 감싸지 않으면 무한 반복이 발생할 수 있으므로 주의해야 한다.

3. 언마운트 단계

1-3. componentWillUnmount
컴포넌트가 언마운트 되기 직전에 호출되는데 컴포넌트가 사라지기 전에 마지막으로 작업할수 있는 메소드이다. 이 메소드는 componentDidMount 에서 설정된 모든 비동기 작업을 정리해주어야 되고 해당 컴포넌트는 리렌더링 되지 않음으로 setState를 호출해서는 안된다.

 

 

참고자료 : https://talking-potato.me/m/51?category=997827 ([React] 컴포넌트 생명주기)