[React] 3주차 스터디 - LifeCycle API

이 글은 https://velopert.com/3631 및 다른 자료들을 보며 공부한 것을 바탕으로 정리해놓은 글입니다.

 

LifeCycle API는 컴포넌트가 브라우저 내에서 나타나고, 사라지고, 업데이트 될 때 호출되는 API이다. 

출처 : https://twitter.com/dan_abramov/status/981712092611989509

 

- constructor는 생성자 함수로, 컴포넌트가 처음 브라우저 상에서 나타나게 될 때 그 과정에서 가장 먼저 실행되는 함수로, 주로 컴포넌트가 갖고있는 state의 초기설정이나 사전작업 등을 거치게 된다. 컴포넌트가 새로 만들어질 때 마다 호출된다.

 

- getDerivedStateFromProps는 주로 props로 받은 값을 state로 동기화시키고 싶을 때 사용한다. 위 그림에서처럼 Mounting 과정에서도 사용되고 Updating과정에서도 props가 바뀌면 실행되는 함수이다.

 

// nextProps는 다음으로 받아 올 props값, prevState 현재 업데이트 되기 전 상태
// props값이 바뀜에 따라 state값도 같게 만들어주는 코드, 변경할 값이 없으면 null 반환
static getDerivedStateFromProps(nextProps,prevState){
	if(prevState.value !== nextProps.value){
    	return{
        	value: nextProps.value
        };
    } 
     return null;
}  
          

 

- componentDidMount는 브라우저에 컴포넌트가 나타나게 되면 호출된다. 외부 라이브러리를 사용할 때 특정 DOM의 속성을 읽거나 변경할 때 사용한다. 컴포넌트에 필요한 데이터를 요청하기도 한다. 컴포넌트가 브라우저에 나타난 시점에서 이벤트 요청이나 api 요청을 주로 한다.

 

//특정 DOM의 크기를 알 수 있음
componentDidMount(){
	console.log(this.myDiv.getBoundClientRect().height);
}

 

- Updating시 사용되는 shouldComponentUpdate 함수가 정말 중요하다. 컴포넌트가 업데이트되는 성능을 최적화시키고싶을 때 사용한다. 부모 컴포넌트가 rerendering되면 자식 컴포넌트도 다 rendering되는데 이게 불필요한 경우가 있다. 리액트는 render함수가 virtual DOM 상에 그린 후에 기존과 변화가 발생한 차이점만을 DOM에 가져와서 브라우저에 반영하여 업데이트한다. 따라서 실제 브라우저 DOM에서는 바뀌는 것만 업데이트 되니까 rendering되는 속도가 빠르다. 그런데 virtual DOM에 그리는 것조차도(rendering) 성능을 아끼고 싶으면 이 함수를 사용하면 된다. 

true, flase를 반환하는데 true값을 반환하면 rendering 과정을 거치고, false를 반환하면 아무 과정도 거치지 않는다. (flase를 반환한 경우, 렌더링이 되지 않으니 화면에도 반영되지 않는다)

 

//다음 받아올 props와 state를 파라미터로 가져옴
shouldComponentUpdate(nextProps, nextState){
	//특정 상황에 따라 return false하면 업데이트를 안하니 최적화를 해줄 수 있는 것
	return true;
}

 

- getSnapshotBeforeUpdate 함수는 rendering한 결과물이 브라우저에 반영되기 바로 직전에 호출되는 함수이다. 스크롤 위치나 해당 DOM의 크기 등을 사전에 가져오고 싶을 때 사용한다.

 

- componentDidUpdate 함수는 컴포넌트가 업데이트 되었을 때 호출되는 함수이다. 예를 들어서 state가 바뀌었다면 이전의 상태와 현재의 상태와 다를 경우 어떠한 작업을 할지를 설정하면 된다.

 

componentDidUpdate(prevProps, prevState){
	if(this.props.value !== prevProps.value){
    	console.log('value값이 변경되었다.', this.props.value);
    }
}

 

- componentWillUnmount 컴포넌트가 사라지는 과정에서 호출되는 함수이다. componentDidMount에서 만들어놓은 스크롤이벤트, 클릭이벤트 등의 리스너를 만들어놨다면 coomponentWillUnmount에서는 저 리스너를 없애는 과정을 거치면 된다.

 

- componentDidCatch 함수를 통해서 놓친 버그를 잡을 수 있고, 필요 시 에러의 세부 내용을 서버에 기록하게 할 수 있다. 

 

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