[React] LifeCycle Method (생명주기 메서드)

LifeCycle Method

LifeCycle Method(생명주기 메서드)는 클래스형 컴포넌트에서만 사용이 가능하다. 그리고 이 생명주기 메서드들은 함수형 컴포넌트에서 useEffect가 완전히 똑같지는 않지만 내부적으로 제공하고 있다. 이제는 리액트에서 클래스형 컴포넌트를 잘 쓰지 않지만, 앞서 언급했던 것과 같이 useEffect의 동작이나 리액트에서 마운팅, 언마운팅 되는 과정을 조금 더 잘 이해하기 위해서 해당 주제로 포스팅 하고자 한다.

 

출처: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

 

위의 다이아그램에서, 크게 세 부분으로 나뉘는 것을 볼 수 있다. 왼쪽의 '생성될 때'는 마운팅 될 때이다. 즉, 우리가 작성한 컴포넌트가 DOM에 렌더링 될 때이다. 그리고 가운데에 있는 '업데이트 할 때'는 컴포넌트가 업데이트 될 때이다. 컴포넌트의 props값이 변경되거나 setState()를 통해 state를 변경하는 경우가 이에 해당된다. 마지막으로 '제거 할 때'는 언마운트 될 때이다. 마운팅이 DOM에 컴포넌트가 렌더링 될 때라면, 언마운트는 컴포넌트가 DOM에서 사라질 때를 말한다.

 

마운트

constructor

constructor는 생성자로, 컴포넌트가 마운트 될 때 가장 먼저 실행되는 메서드이다.

 

constructor(props) {
  super(props);
  console.log("constructor");
}

 

위와 같이 항상 props로 기본 constructor를 호출해야 한다.

 

getDerivedStateFromProps

getDerivedStateFromProps는 받아온 props의 값을 state에 넣어줄 때 사용한다.

 

static getDerivedStateFromProps(nextProps, prevState) {
  console.log("getDerivedStateFromProps");
  if (nextProps.x !== prevState.x) {
    return { x: nextProps.x };
  }
  return null;
}

 

받아온 props와 이전 state값을 받고, 위의 코드처럼 특정 조건을 통해 state에 값을 넣어주는 것이 가능하다. 그리고 객체를 리턴하게 되면 리턴한 객체의 값이 state로 설정이 되고 null을 리턴할 경우 아무것도 일어나지 않는다.

 

render

render는 말그대로 DOM에 엘리먼트들을 그리는 역할을 한다.



render() {
    return (
      <div>
        <h1>Hello, world!</h1>
      </div>
    );
  }

 

componentDidMount

componentDidMount는 컴포넌트에 작성한 엘리먼트들이 DOM에 처음으로 렌더링 된 후에 한 번만 실행이 된다. 이곳에서 axios, fetch등을 통해 데이터 요청을 하는 등의 작업을 한다.

 

업데이트

getDerivedStateFromProps

위의 마운트 될 때에서 설명한 메서드이다. 해당 메서드는 props가 변경되거나 state를 변경하는 업데이트되는 상태에서도 실행이 된다.



shouldComponentUpdate

shouldComponentUpdate는 컴포넌트가 리렌더링 될지 말지를 결정하는 메서드이다. 주로 최적화에 사용되며 React.memo와 비슷한 역할을 한다.

 

shouldComponentUpdate(nextProps, nextState) {
  console.log("shouldComponentUpdate", nextProps, nextState);
  // x가 4면 리렌더링하지 않는다
  return nextState.x !== 4;
}

 

render

위에서 설명한 메서드이므로 생략 👻

 

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate는 메서드의 이름 그대로, 업데이트 되기 전의 state를 기억하는 메서드이다. 해당 메서드에서 업데이트 이전의 state를 캡쳐하여 리턴하면, 다음에 실행되는 메서드인 componentDidUpdate에서 값의 조회가 가능하다.

 

getSnapshotBeforeUpdate(prevProps, prevState) {
  console.log("getSnapshotBeforeUpdate");
  return this.state.x;
}

 

componentDidUpdate

componentDidUpdate는 화면에 업데이트 된 컴포넌트가 다 렌더링 된 후에 실행이 된다. 앞서 설명한 것과 같이 해당 메서드에서 getSnapshotBeforeUpdate에서 리턴한 업데이트 이전 상태를 조회 가능하다.

 

componentDidUpdate(prevProps, prevState, snapshot) {
  console.log("componentDidUpdate", prevProps, prevState);
  if (snapshot) {
    console.log("업데이트 되기 전 값: ", snapshot);
  }
}

 

언마운트

componentWillUnmount

componentWillUnmount는 컴포넌트가 화면에서 사라지기 전에 실행이 된다. 언마운트될 때 실행되는 유일한 메서드이다. 만약 setTimeout이나 setInterval을 작성했으면 해당 메서드에서 clearTimeout이나 clearInterval을 통해 제거해준다.

 

componentWillUnmount() {
  console.log("componentWillUnmount");
}

 

 

 

 

참고

• react.vlpt.us/basic/25-lifecycle.html
• ko.reactjs.org/docs/state-and-lifecycle.html