1. Lifecycle

• 모든 리액트 컴포넌트에는 라이프 사이클(생명주기)이 존재한다.
• 컴포넌트를 처음으로 렌더링 할 때, 컴포넌트를 업데이트 하기 전 후로 어떤 작업을 처리해야 할 수도 있는데, 이럴 때 라이프사이클 매서드를 사용한다. (클래스형 컴포넌트에서만 사용)

2. Lifecycle 메서드

1. 마운트 : 페이지에 컴포넌트가 나타남
2. 업데이트 : 컴포넌트 정보 업데이트
3. 언마운트 : 페이지에서 컴포넌트가 사라짐

2-1. Mount

• Dom이 생성되고 웹 브라우저상에 나타나는 것

2-1-1. constructor

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

constructor(props) {...}

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

2-1-2. getDerivedStateFromProps

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

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

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

2-1-3. render

• 우리가 준비한 UI를 렌더링하는 메서드

render() {...}

• 필수 메서드, this.props와 this.state에 접근할 수 있으며, 리액트 요소를 반환한다.

2-1-4. componentDidMount

• 컴포넌트가 웹 브라우저 상에 나타난 후 호출하는 메서드

componentDidMount(){...}

• 이벤트 사용 시

2-2. Update

• props가 바뀔때, state가 바뀔때, 부모 컴포넌트가 리렌더링될때, this.forceUpdate로 강제로 렌더링을 트리거할 때

2-2-1. getDerviedStateFromProps

• 이 메서드는 마운트 과정에서도 호출되며, 업데이트가 되게 전에도 호출된다.
• props의 변화에 따라 state의 값에도 변화를 주고 싶을 때 사용

2-2-2. shouldComponentUpdate

• 컴포넌트가 리렌더링을 해야할지 말아야할지 결정하는 메서드

shouldComponentUpdate(nextProps, nextState) {...}

• props 또는 state를 변경했을 때, 리렌더링의 시작 여부 지정 메서드

2-2-3. render

• 컴포넌트를 리렌더링한다.

2-2-4. getSnapshotBeforeUpdate

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

getSnapshotBeforeUpdate(prevProps, prevState){
	if(prevState.array !== this.state.array){
    	....
    }
}

• render에서 만들어진 부분이 브라우저에 실제 반영되기 직전 호출

2-2-5. componentDidUpdate

• 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드( 렌더링 완료 후 실행 )

componentDidUpdate(prevProps, prevState, snapshot){ ... }

2-3. Unmount

• 마운트의 반대과정이며, 컴포넌트를 DOM에서 제거

3-1-1. componentWillUnmount

• 컴포넌트가 웹 브라우저 상에서 사라지기 전에 호출하는 메서드

componentWillUnmount(){...}