LifeCycle

Mounting : 컴포넌트를 브라우저(DOM)에 붙이는것

Unmounting : 컴포넌트를 브라우저(DOM)에서 제거하는것

Updating : props or state의 값을 변환시키는것

Constructor : 컴포넌트가 DOM에 처음 들어와서 실행되는 함수

getDerivedStateFromProps : 받은 props를 state에 동기화하고싶을때 사용하는 함수

static getDerivedStateFromProps(nextProps, prevState) {

if( prevState.value !== nextProps.value){

return {

value: nextProps.value

}

}

return null;

}

nextProps : 다음에 받을 props

prevState : 현재의 state 값

shouldComponentUpdate : 컴포넌트의 성능최적화에 사용

가상DOM에 그릴지 말지 선택하는 함수 True면 가상DOM에 그리고 False면 그리지않는다

ex) 컴포넌트가 수백개가 된다면 가상DOM에 그리는것도 부담이 될수가있기때문에

shouldComponentUpdate(nextProps, nextState){

if( nextProps.value === 10) return false;

return true;

}

False가되면 가상DOM에 그리지않아서 Update되지않는다

getSnapshotBeforeUpdate : render된 결과물을 브라우저(DOM)에 반영하기 직전에 사용하는 함수    ex) 스크롤 위치라던가 이것저것할때 사용

componentDidMount : API요청, 외부 라이브러리 사용시 세팅할때 호출

해당 컴포넌트에서 필요로하는 데이터를 요청하기 위해 axios, fetch등을 통하여 ajax요청을 하거나, DOM의 속성을 읽거나 직접 변경하는 작업을 진행

componentWillUnmout : DOM에서 컴포넌트를 제거될때 호출됨

componentDidUpdate : 컴포넌트의 State가 업데이트된후에 무언가 처리할때 사용

componentDidUpdate(prevProps, prevState){

if( this.props.value !== prevProps.value){

console.log('value 값이 바뀌었다!', this.props.value);

}

}

현재 props값과 비교해서 다르면 console출력 

componentDidCatch : 컴포넌트에 에러발생시 호출, 에러가 발생할수있는 컴포넌트의 부모컴포넌트에 구현을 해줘야한다

componentDidCatch(error, info){

console.log(error);

console.log(info);

}

error는 error표시 info는 에러난 위치를 표시