ch02.라이프사이클 메서드 살펴보기

render() 메서드

• 컴포넌트 모양새를 정의한다
• 라이프사이클 메서드 중 유일한 필수 메서드이다.
• 해당 메서드 안에서 this.props, this.state에 접근할 수 있으며, 리액트 요소를 반환한다.
  • Div, 따로 선언한 컴포넌트가 요소가 될 수 있고, null값이나 false값을 반환하여 아무것도 안 보여줄 수 있다.
• 이 메서드 안에서는 이벤트 설정이 아닌 곳에서 setState를 사용하면 안 되며, 브라우저의 DOM에 접근해서도 안된다.
  • DOM 정보를 가지고 오거나 state에 변화를 줄 때는 componentDidMount에서 처리하여야 한다.

Constructor 메서드

• constructor(props) {... }
• 컴포넌트의 생성자 메서드로 컴포넌트를 만들 때 처음으로 실행된다.
• 초기 state를 정할 수 있다.

getDerivedStateFromProps 메서드

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

• 리액트 v16.3 이후에 새로 만든 라이프 사이클 메서드이다.
• props로 받아온 값을 state에 동기화시키는 용도로 사용하며, 컴포넌트가 마운트 될 때와 업데이트될 때 호출된다.

componentDidMount 메서드

• componentDidMount() {... }
• 컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행된다.
• 이 안에서 다른 자바스크립트 라이브러리, 프레임워크 함수를 호출하거나 이벤트 등록, setTimeout, setInterval, 네트워크 요청 같은 비동기 작업을 처리하면 된다.

shouldComponentUpdate 메서드

• shouldComponentUpdate(nextProps, nextState) {... }
• props, state를 변경했을 때, 리 렌더링을 시작할지 여부를 지정하는 메서드
• 해당 메서드는 반드시 true, false를 반환해야 하며, 컴포넌트를 만들 때 이 메서드를 따로 생성하지 않으면 기본적으로 true값을 반환한다.
• 만약 false를 반환하면 업데이트 과정은 여기서 중지
• 현재 props와 state는 this.props, this.state로 접근하고 , 새로 설정될 props, state는 nextProps, nextState로 접근한다.
• 프로젝트 성능을 최적화할 때, 상황에 맞는 알고리즘을 작성하여 리 렌더링을 방지할 때는 false를 반환하게 한다.

getSnapshotBeforeUpdate 메서드

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

• 리액트 v16.3 이후에 만든 메서드이다.
• render에서 만들어진 결과물이 브라우저에 실제로 반영되기 직전에 호출된다.
• 이 메서드의 반환 값은 componentDidUpdate에 세 번째 파라미터인 snapshot 값으로 전달받을 수 있는데 주로 업데이트하기 직전의 값을 참고할 일이 있을 때 활용된다((ex) scrollbar 위치 유지 )

componentDidUpdate 메서드

• componentDidUpdate(prevProps, prevState, snapshot) {... }
• 리 렌더링이 완료된 후 실행된다.
• 업데이트가 끝난 직후이므로 DOM 관련 처리를 해도 무방하다.
• prevProps, prevState를 사용하여 컴포넌트가 이전에 가졌던 데이터에 접근할 수 있다.
• getSnapshotBeforeUpdate에서 반환한 값이 있다면 여기서 snapshot 값을 전달받을 수 있다.

componentWillUnmount 메서드

• componentWillUnmount() {... }
• 컴포넌트를 DOM에서 제거할 때 실행된다.
• 등록한 이벤트, 타이머, 직접 생성한 DOM이 있다면 여기서 제거 작업을 해야 한다.

componentDidCatch 메서드

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

• 리액트 v16에 새롭게 도입되었다.
• 컴포넌트 렌더링 도중 에러가 발생했을 때 애플리케이션이 먹통이 되지 않고 오류 UI를 보여줄 수 있게 한다.
• error 파라미터에 어떤 에러가 발생했는지 알려주며, info 파라미터는 어디에 있는 코드에서 오류가 발생했는지 알려준다.
• 실제로 사용할 때에는 오류가 발생하면 서버 API를 호출하여 오류 로그를 따로 수집할 수 있다.
• 단, 이 메서드를 사용할 때 , 컴포넌트 자신에게 발생하는 에러를 잡아낼 수 없고 자신의 this.props.children으로 전달되는 컴포넌트에서 발생하는 에러만 잡아낼 수 있다