React - 라이프사이클메서드

• 컴포넌트의 라이프사이클 메서드 : 컴포넌트 상태에 변화가 있을 때마다 실행하는 메서드. 서드파티 라이브러리를 사용하거나 DOM을 직접 건드려야 하는 상황에서 유용(클래스형 컴포넌트만 사용 가능)

• 라이프사이클은 총 3가지: 마운트, 업데이트, 언마운트
  && 접두사 Will(작업 작동 전), Did(작업 작동 후)를 붙인 메서드로 선언
  

• componentDidUpdate(prevProps, prevState, snapshot){...} : 리랜더링이 완료한 후 실행. 컴포넌트가 이전에 가졌던 데이터에 접근 가능. getSnapshotBeforeUpdate에서 반환한 값이 있다면 여기서 snapshot 값을 전달받을 수 있음

//예시
//1. DOM에 변화가 일어나기 직전의 색상 속성을 snapshot 값으로 반환
getSnapshotBeforeUpdate(prevProps, prevState){
	console.log('getSnapshotBeforeUpdate');
    if(prevProps.color !== this.props.color){
    	return this.myRef.style.color;
    }
    return null;
}

//2. componentDidUpdate에서 조회
componentDidUpdate(prevProps, prevState, snapshot){
	console.log('componentDidUpdate', prevProps, prevState);
    if(snapshot){
    	console.log('업데이트되기 직전 색상: ', snapshot);
    }
}

• componentWillUnmount(){...} : 컴포넌트를 DOM에서 제거할 때 실행. componentDidMount에서 등록한 이벤트, 타이머, 직접 생성한 DOM을 여기서 제거.
• componentDidCatch(error, info){...} : 컴포넌트 렌더링 도중에 에러가 발생했을 때, 애플리케이션이 먹통이 되지 않고 오류 UI를 보여줄 수 있게 해줌.

//예시
//1. 에러가 발생하면 componentDidCatch 메서드 호출하여 this.state.error값을 true로 업데이트
componentDidCatch(error, info){
	this.setState({
    	error: true
    });
    console.log({error, info});
}

//2. this.state.error 값이 true라면 에러가 발생했음을 알려주는 문구를 보여줌
render(){
	if(this.state.error) return <div>에러가 발생했습니다</div>;
    return this.props.children;
}

-> 여기서 error는 파라미터에 어떤 에러가 발생했는지 알려주며, info 파라미터는 어디에 있는 코드에서 오류가 발생했는지에 대한 정보를 줌.

컴포넌트의 라이프사이클 메서드 흐름 한눈에 보기

참고: 리액트다루는기술