컴포넌트 업데이트 전후로 처리해야 할 때 사용하는 컴포넌트의 라이프사이클 메서드를 알아보자.

알고 넘어가자!

• 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있음.
• 대신 함수 컴포넌트는 Hooks 기능을 사용하여 비슷하게 작업을 처리할 수 있음.

💡 라이프사이클 메서드의 이해

• 라이프사이클 메서드는 컴포넌트 상태에 변화가 있을 때마다 실행하는 메서드임.
• 서드파티 라이브러리를 사용하거나 DOM을 직접 건드려야 하는 상황에서 유용함.
• shouldComponentUpdate로 컴포넌트의 업데이트 성능을 개선할 수 있음.

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

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

  static getDerivedStateFromProps(nextProps, prevState) {
  	if(nextProps.value !== prevState.value) {
  		return { value: nextProps.value };
  	}
  	return null;
  }
  

• render : 컴포넌트를 렌더링 함.

• componentDidMount : 컴포넌트가 웹 브라우저 상에 나타난 후(업데이트 작업이 끝난 후) 호출하는 메서드. 이 안에서 함수 호출, 이벤트 등록, 비동기 네트워크 요청같은 작업을 처리함.

• shouldComponentUpdate : 컴포넌트가 리렌더링을 할지 말지를 결정하는 메서드. true 또는 false 값을 반환함.

• getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드.

  //ex 스크롤바 위치 유지
  getSnapshotBeforeUpdate(prevProps, prevState) {
  	if(prevState.array !== this.state.array) {
  		const { scrollTop, scrollHeight } = this.list
  		return { scrollTop, scrollHeight };
  	}
  }
  

• componentWillUnmount : 컴포넌트가 웹 브라우저 상에서 사라지기 전에 호출하는 메서드. 컴포넌트를 DOM에서 제거할 때 실행.

• componentDidUpdate : 리렌더링 완료 후 실행. DOM 관련 처리 가능. prevProps 또는 prevState를 사용하여 컴포넌트가 이전에 가졌던 데이터에 접근할 수 있음.

• componentDidCatch : 컴포넌트 렌더링 도중 에러가 발생했을 때 애플리케이션이 먹통이 되지 않고 오류 UI를 보여줄 수 있게 해줌.

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