라이프사이클 메서드

• 총 9가지이다.
• Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이다.
• Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드이다.
• 마운트, 업데이트, 언마운트 카테고리로 나눌 수 있다.

카테고리

마운트

• DOM이 생성되고 웹 브라우저 상에 나타나는 것을 마운트(mount)라고 한다.
• 호출하는 메서드는 다음과 같다.
  • constructor: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
  • getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메서드
  • render: 우리가 준비한 UI를 렌더링하는 메서드
  • componentDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드

업데이트

• 컴포넌트는 4가지 경우에 업데이트된다.
  • props가 바뀔 때
  • state가 바뀔 때
  • 부모 컴포넌트가 리렌더링 될 때
  • this.forceUpdate로 강제로 렌더링을 트리거할 때
• 호출하는 메서드는 다음과 같다.
  • getDerivedStateFromProps: 업데이트가 시작되기 전에 호출되며 props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용한다.
  • shouldComponentUpdate: 컴포넌트가 리렌더링을 해야할지 말아야 할지를 결정하는 메서드(true/false), this.forceUpdate()를 호출한다면 이 과정을 생략한다.
  • render: 컴포넌트를 리렌더링한다.
  • getSnapshotBeforeUpdate: 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드
  • componenetDidUpdate: 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드

언마운트

• 마운트의 반대 과정, 즉 컴포넌트를 DOM에서 제거하는 것을 언마운트(unmount)라고 한다.
• 호출하는 메서드는 다음과 같다.
  • componentWillUnmount: 컴포넌트가 웹 브라우저 상에서 사라지기 전에 호출하는 메서드

라이프 사이클 메서드 종류

render()

• 컴포넌트의 모양새를 정의한다.
• 라이프사이클 메서드 중 유일한 필수 메서드이다.
• this.props와 this.state에 접근할 수 있으며, 리액트 요소를 반환한다.
• 아무것도 보여주고 싶지 않다면, null이나 false를 반환하면 된다.
• 이벤트 설정이 아닌 곳에서 setState를 사용하면 안되며, 브라우저의 DOM에 접근해서도 안된다.
  -> componenetDidMount에서 처리

constructor(props)

• 컴포넌트를 만들 때 처음으로 실행된다.
• 초기 state를 정할 수 있다.

getDerivedStateFromProps(nextProps, prevState)

• props로 받아온 값을 state에 동기화시키는 용도로 사용된다.
• 컴포넌트가 마운트될 때와 업데이트될 때 호출된다.

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

componentDidMount()

• 첫 렌더링까지 마친 후 실행한다.
• 다른 자바스크립트 라이브러리 또는 프레임워크의 함수를 호출하거나 이벤트 등록, setTimeout, setInterval, 네트워크 요청 같은 비동기 작업을 처리한다.