[React] 컴포넌트의 LifeCycle

리액트의 모든 컴포넌트에는 생명주기(LifeCycle)이 존재한다. 컴포넌트의 수명은 페이지가 랜더링되기 전인 준비 과정에서 시작하며, 페이지에서 사라질 때 끝난다. 리액트에서 제공하는 라이프 사이클 메서드를 통해 1) 처음 랜더링할 때, 2) 컴포넌트가 업데이트 될 때 혹은 전/후, 3) 컴포넌트가 페이지에서 사라질 때의 시점에 함수를 호출할 수 있다. 

 

각 시점 별로 분류한 호출 메소드는 다음과 같다.

 

# Mount(생성) 시 호출하는 method

- constructor : 생성자

- getDerivedStateFromProps : props로 받아온 값을 state에 동기화하는 메소드

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

- render : 랜더 함수

- ComponentDidMount : 첫 렌더링을 다 마친 후 실행되는데, 여기에 이벤트 등록이나 setTimeout, setInterval, 네트워크 요청 같은 비동기 작업을 처리하면 된다.

ComponentDidMount() {...}

 

 

# Update(props나 state의 값이 변하거나 부모 컴포넌트가 리랜더될 때) 시 호출하는 method

-  getDerivedStateFromProps 

-  ShouldComponentUpdate : props 또는 state를 변경했을 때 리렌더링을 시작할지 여부를 지정하는 메서드이며, 반드시 true 혹은 false 값을 반환해야 한다. 따로 이 메서드를 생성하지 않으면 기본적으로 언제나 true를 반환한다. 

shouldComponentUpdate(nextProps, nextState) { 
	...
    // 이 메서드 안에서 현재 props와 state는 this로 바인딩하여 접근하고
    // 새로 설정될 props 혹은 state는 nextProps, nextState로 접근한다.
    // 프로젝트 성능을 최적화할 때 상황에 맞는 알고리즘을 작성하여
    // 리렌더를 방지할 때 false값을 반환하게하여 사용한다.
    }

-  render 

-  ComponentDidUpdate : 리렌더링을 완료한 후 실행한다. 업데이트가 끝난 직후이므로 DOM 관련 처리를 해도 무방하다.

componentDidUpdate(prevUpdate, prevState, snapshot) { 
	... 
    // prevUpdate, prevState를 사용하여 컴포넌트가 이전에 가졌던 데이터에 접근할 수 있다.
    // getSnapshotBeforeUpdate에서 반환한 값이 있다면 snapshop값을 전달받을 수 있다.
}

-  getSnapshotBeforeUpdate : render에서 만들어진 결과물이 브라우저에 실제로 반영되기 전에 호출된다. 이 메서드에서 반환하는 값은 ComponentDidUpdate에서 전달받을 수 있다. 주로 업데이트하기 직전의 값을 참고할 일이 있을 때 활용된다. 

getSnapshotBeforeUpdate(prevProps, prevState) {
	if(prevState.array !== this.state.array) {
    	const { scrollTop, scrollHeight } = this.list
        return { scrollTop, scrollHeight };
        }
    }

 

 

# UnMount(DOM에서 제거) 시 호출하는 method

- ComponentWillUnmount : ComponentDidMount에서 생성한 이벤트, 타이머, DOM이 있다면 여기서 제거 작업을 해야한다.

componenetWillUnmount() { ... }

 

 

++ Component의 렌더 중 에러가 발생했을 때 (v16에서 추가)

- componentDidCatch : 랜더 중 에러가 발생했을 때 어플이 먹통이 되지 않고 오류 UI를 보여줄 수 있게 해준다.

componentDidCatch(error,info) {
	this.setState({
    	error:true
        });
        console.log({error,info});
        }