리액트의 생명주기

클래스형 컴포넌트에서 컴포넌트를 생성하거나 업데이트하거나 제거할 때 특별한 메서드를 선언하여 코드를 작동할 수 있다. 이러한 매서드를 생명주기 메서드라고 부른다.

 

생성(마운트) 생명주기 메서드

constructor

constructor(props) {
  super(props);
}

• 컴포넌트의 생성자 메서드이며 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드이다.
• 클래스 컴포넌트이니 클래스에서 사용하는 생성자 함수랑 같은 메서드인듯하다.

 

getDerivedStateFromProps

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

• props로 받아온 값을 state에 넣어주고 싶을 경우 사용한다.
• 다른 생명주기 메서드와는 다르게 앞에 static 키워드가 필요하다.
• this로 조회할 수 없다.
• 특정 객체를 반환하면 객체 안의 내용들이 컴포넌트의 state로 설정된다.(null일 경우 아무일도 발생하지 않음)

 

render

• 컴포넌트를 렌더링하는 메서드이다.

 

componentDidMount

• 컴포넌트의 첫번째 렌더링이 끝나면 호출되는 메서드이다.
• 주로 DOM을 사용해야하는 외부 라이브러리를 연동하거나 데이터를 요청하기 위해 ajax 요청을 하거나 DOM의 속성을 읽거나 직접 변경하는 작업을 진행한다.

 

업데이트 생명주기 메서드

getDerivedStateFromProps

• 위의 다뤘던 내용과 같음
• 컴포넌트의 state와 props가 바뀌었을때도 호출된다.

 

shouldComponentUpdate

  shouldComponentUpdate(nextProps, nextState) {
    return true;
  }

• 컴포넌트가 리렌더링을 할지 안할지 결정하는 메서드이다.
• 주로 최적화 할 때 사용하는 메서드이다.
• 반환 값이 true이면 리렌더링을 하며, false일 경우 리렌더링을 하지 않는다.

 

getSnapshotBeforeUpdate

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("getSnapshotBeforeUpdate");
    if (prevProps.color !== this.props.color) {
      return this.myRef.style.color;
    }
    return null;
  }

• 컴포넌트에서 변화가 일어나기 직전의 DOM상태를 가져와서 특정 값을 반환하면 그 값을 componentDidUpdate에서 사용할 수 있다.

 

componentDidUpdate

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

• 리렌더링과 업데이트를 마치고 난 뒤에 호출되는 메서드이다.
• getSnapshotBeforeUpdate에서 반환한 값을 3번째 인자로 받을 수 있다.
• 업데이트 전의 props와 이후의 props를 비교하는데 사용할 수 있다.

 

제거(언마운트) 생명주기 메서드

componentWillUnmount

• DOM에 직접 등록했었던 이벤트를 제거한다.
• setTimeout을 사용했다면 clearTimeout으로 제거한다.