[React] LifeCycle

똔의 기록·2022년 7월 20일

React

React.js로 웹을 만들면 실제로 HTML을 작성한 것이 아니고 JSX를 작성했기 때문에 컴포넌트가 생겨나고, 변화하고, 없어지는 일련의 프로세스, 라이프사이클에 대해서 알아야 할 필요성이 있다.

라이프사이클은 처음 생성될 때, props나 state가 업데이트 되었을 때, 컴포넌트가 더이상 브라우저에 보여질 필요가 없을 때 순차적으로 실행되며 굉장히 효율적으로 업데이트 된다.

리액트의 클래스 컴포넌트는 컴포넌트 라이프사이클 메서드가 있어서 이를 사용하고, 함수형 컴포넌트는 Hook을 사용한다. 이번 글에서는 클래스 컴포넌트를 다룬다.

v16.3 이후 구동 순서

출처: https://velog.io/@st2702/React-Lifecycle-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0

컴포넌트 초기 생성, Mount

DOM이 생성되고 웹 브라우저 상에 나타나는 것을 마운트(mount)라고 한다.

constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드
render : UI를 렌더링 하는 메서드
componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드

constructor

constructor(props) {
  super(props);
}

이 부분은 컴포넌트 '생성자 함수' 이다. 해당 컴포넌트가 마운트 되기 전에 실행되는 함수로 초기 state를 설정한다.

getDerivedStateFromProps

props로 받아온 값을 state에 동기화 시키는 용도로 사용되며, 컴포넌트가 마운트되고 업데이트 될 때 호출된다.

static getDerivedStateFromProps(nextProps, prevState) {
    if(nextProps.value !== prevState.value) { // 조건에 따라 특정 값 동기화
    	return {
            value: nextProps.value
        };
    }
    return null; // state를 변경할 필요가 없다면 null 반환
}

render()

컴포넌트의 모양을 결정한다. 이 메서드 안에서 this.props, this.state에 접근할 수 있으며, 리액트 요소를 반환한다.
주의할 점은 이 메서드 안에서는 setState를 사용할 수 없으며, DOM에 접근해서도 안된다

componentDidMount

componentDidMount() {
  // 외부 라이브러리 연동: D3, masonry, etc
  // 컴포넌트에서 필요한 데이터 요청: Ajax, GraphQL, etc
  // DOM 에 관련된 작업: 스크롤 설정, 크기 읽어오기 등
}

componentDidMount는 컴포넌트가 화면에 나타나게 됐을 때 호출, 즉 첫 render 후에 호출이 된다.
이 안에서 다른 JS 라이브러리 또는 프레임워크의 함수를 호출하거나 이벤트 등록, setTimeout, setInterval, 네트워크 요청 등 비동기 작업을 처리하면 된다. 데이터 구독은 이 위치에서 해주는 것이 바람직하다.

컴포넌트 업데이트, Update

컴포넌트가 업데이트 되는 경우는 다음 네 가지 경우이다.

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

컴포넌트가 다음과 같은 이유로 업데이트가 될 때 호출되는 메서드와 순서는 다음과 같다.

getDerivedStateFromProps : 이 메서드는 마운트 과정에서 호출되며, 업데이트가 시작하기 전에도 호출된다. props의 변화에 따라 state 값에도 변화를 주고 싶은 경우에 사용한다.
shouldComponentUpdate : 컴포넌트가 리렌더링을 해야할지 말아야 할지 결정하는 메서드. true를 반환하면 다음 라이프사이클 메서드를 계속 실행하고, false를 반환하면 작업 중지. 만약 특정 함수에서 this.forceUpdate() 함수를 호출하면 이 과정을 생략하고 바로 render 함수를 호출.
프로젝트 성능을 최적화 할 때는 리렌더링을 방지하기 위해서 false 값을 반환하도록 한다.
render : 컴포넌트 리렌더링
getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드
componentDidUpdate : 컴포넌트 업데이트 작업이 끝난 후 호출하는 메서드.