[TIL] LifeCycle 메소드

라이프 사이클

컴포넌트가 생성되어 소멸될 때까지의 일련의 과정들을 일컫는다. 이러한 Life Cycle 안에서 특정 시점에 코드가 호출되도록 설정할 수 있는데, 이 때 사용되는 메소드를 Life Cycle Method라고 한다.

위 사진을 보면 크게 세가지가 있는데 Mounting, Updating, Unmounting이 있으며 이 세가지가 어떻게 작동되는지 알아보자

Mount(생성단계)

마운트란? 리액트 컴포넌트가 생성되어 DOM tree에 삽입되어 브라우저 상에 나타나는것이며 처음 한번만 실행이 된다

생성 단계에서 실행 순서는 다음과 같다

  1. constructor()
    컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자이며 초기 state를 정할 수 있다 혹시 state를 사용하지 않아 state의 초기값 설정이 필요하지 않다면 생성자 함수도 생략이 가능하다. 생성자 함수를 사용할 때는 반드시 super(props)함수를 호출하여 부모 클래스의 생성자를 호출한다. 생성자 함수는 해당 컴포넌트가 생성될 때 한 번만 호출이 된다.

  2. static getDerivatedStateFromProps()
    props에 있는 값을 state와 동기화 시키는 메서드입니다 컴포넌트가 최초 마운팅 됐을 경우와 부모 컴포넌트에서 전달해주는 props가 변경 되었을 경우 호출되며, render() 메서드가 호출되기 전이므로, 변경 된 props 데이터를 state에 반영하는 작업을 이 메서드에서 처리합니다

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

  1. render()
    render 함수는 클래스 컴포넌트가 랜더링되는 부분(화면에 표시되는 부분)을 정의한다. 즉, 최종적으로 component에서 작업한 결과물을 return하는 method이다.


  2. componentDidMount()
    컴포넌트 렌더링 완료 시 호출 됩니다 클래스 컴포넌트가 처음으로 화면에 표시된 이후 이 함수가 호출되는데 즉 render함수가 처음 한번 호출된 후 componentDidMount함수가 호출됩니다 이 함수는 컴포넌트가 화면에 처음 표시된 후 한번만 호출되므로 ajax를 통해 데이터를 불러와야 하거나 네트워크 요청을 보내기 적절한 위치입니다

  componentDidMount() {
  console.log("render complete.");
}

Update(업데이트 단계)

컴포넌트를 업데이트 하는 경우는 아래 4가지다.

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

이렇게 4가지 중 하나라도 업데이가 되면 아래의 메서드가 호출된다

  1. static getDerivedStateFromProps
  2. shouldComponentUpdate
    이 메서드는 성능을 최적화하기 위해 중점을 뒀으며 props 또는 state가 새로운 값으로 갱신되어서 렌더링이 발생하기 직전에 호출된다. 기본값은 true이고, 이 메서드는 초기 렌더링 또는 forceUpdate()가 사용되거나 false일때에는 호출되지 않습니다
shouldComponentUpdate(nextProps, nextState) {
   const { age } = this.state;
   return age !== nextState.age; //true는 업데이트 하는 경우 false는 업데이트 안하는 경우
}
  1. render
  2. getSnapshotBeforeUpdate
    컴포넌트가 변화하기 전에 호출되는 메서드이며 return하는 값을 componentDidUpdate에서 3번째 파라미터로 받아올 수 있습니다.
 getSnapshotBeforeUpdate(prevProps, prevState) {
  console.log("getSnapshotBeforeUpdate");
  if (prevProps.color !== this.props.color) {
    return this.myRef.style.color;
  }
  return null;
}
  1. componentDidUpdate
    리렌더링이 마치고, 화면에 우리가 원하는 변화가 모두 반영되고 난 뒤 호출되는 메서드입니다. 3번째 파라미터로 getSnapshotBeforeUpdate 에서 반환한 값을 조회 할 수 있습니다
  componentDidUpdate(prevProps, prevState, snapshot) {
  console.log("componentDidUpdate", prevProps, prevState);
  if (snapshot) {
    console.log("업데이트 되기 직전 값: ", snapshot);
  }
}

Unmount(소멸단계)

  1. componentWillUnmount

컴포넌트가 마운트 해제되어 제거되기 직전에 호출된다. 이 메서드 내에서 타이머 제거, 네트워크 요청 취소, componentDidMount() 내에서 생성된 구독 해제 등 필요한 모든 정리 작업을 수행하면된다 주의할점은 이제 컴포넌트는 다시 렌더링되지 않으므로 setState()를 호출하면 안된다