[React] Component LifeCycle Method

React 생명주기란?

컴포넌트의 생성, 업데이트, 제거 과정을 뜻한다.

컴포넌트의 수명은 페이지에 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝난다.

컴포넌트를 처음으로 렌더링 할 때, 어떤 작업을 처리해야하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 불필요한 업데이트를 방지해야 할 수도 있다. → 컴포넌트의 라이플사이클 메서드를 사용한다.

라이플사이클 메서드는 클래스 컴포넌트에서만 사용할 수 있고, 함수형 컴포넌트에서는 Hooks 를 사용하여 비슷한 기능을 처리할 수 있다.

 

LifeCycle Method

라이플사이클 메서드 종류는 총 9가지이다.

• will 접두사가 붙은 메서드: 어떤 작업을 작동하기 전에 실행
• Did 접두사가 붙은 메서드: 어떤 작업을 작동한 후에 실행

 

1단계 - 생성 (Mounting)

DOM이 생성되고 웹 브라우저상에 나타나는 것을 Mount 라고한다.

 

constructor: 컴포넌트를 새로 만들때마다 호출되는 클래스 생성자 메서드

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

 

getDerivedStateFromProps: props 에 있는 값을 state 에 넣을 때 사용하는 메서드

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

다른 라이프사이클 메서드와는 달리 앞에 static 을 필요로 하고, 이 안에서는 this를 조회할 수 없다. 여기서 특정 객체를 반환하게 되면 해당 객체 안에 있는 내용들이 컴포넌트의 state로 설정이 된다. 반면 null 을 반환하게 되면 아무 일도 발생하지 않는다. mount와 update 단계에서 호출된다.

 

render:  컴포넌트를 렌더링하는 메서드

 

componentDidMount:  컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드

컴포넌트의 첫번째 렌더링이 마치고 나면 호출된다. DOM을 사용해야 하는 외부 라이브러리 연동을 하거나 (D3, masonry), 해당 컴포넌트에서 필요로 하는 데이터를 요청하기 위해 axios, fetch 등을 통하여 ajax 요청을 하거나, DOM의 속성을 읽거나 직접 변경하는 작업을 진행한다.

 

2단계 - 업데이트 (Update)

컴포넌트는 props 가 바뀔 때, state 가 바뀔 때, 부모 컴포넌트가 리렌더링 될 때, this.foceUpdate 로 강제로 렌더링 트리거할 때 업데이트한다.

getDerivedStateFromProps: 앞서 Mount 과정에서도 호출되고, props 변화에 따라 state 값에도 변화를 주고 싶을 때 사용

shouldComponentUpdate 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정, true를 반환하면 다음 라이프사이클 메서드를 계속 실행, false를 반환하면 작업을 중지한다. (리렌더링을 하지 않는다.)

sholudComponentUpdate(nextProps, nextState) {
	console.log("shouldComponentUpdate", nextProps, nextState);
	// 숫자의 마지막 자리가 4면 리렌더링 하지 않는다.
	return nextState.number % 10 !== 4;
}

주로 최적화할 때 사용하는 메서드이다.

 

render: 컴포넌트를 리렌더링한다.

 

getSnapshotBeforeUpdate: 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출

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);
  }
}

리렌더링이 마치고, 화면에 우리가 원하는 변화가 모두 반영되고 난 뒤 호출하는 메서드이다. 3번째 파라미터로 getSnapshotBeforeUpdate 에서 반환한 값을 조회할 수 있다. (업데이트 전)

 

3단계 - 언마운트 (Unmount)

Mount의 반대 과정, 컴포넌트를 DOM에서 제거하는 것을 Unmount라고 한다.

componentWillUnmount: 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출

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

DOM에 직접 등록했었던 이벤트를 제거하고, 만약 setTiemout을 걸은것이 있다면 clearTimeout을 통하여 제거한다. 추가적으로 외부 라이브러리를 사용한 게 있고 해당 라이브러리에 dispose 기능이 있다면 여기서 호출해주면 된다.

 

참고 자료 

React Lifecycle Methods diagram

25. LifeCycle Method

리액트를 다루는 기술 [개정판]: 7.2.1 render( ) 함수