[4/13] 리액트 라이프사이클

1. 라이프사이클이란?

v16.8업데이트 이후에 Hooks가 도입되어 함수 컴포넌트도 라이프사이클 기능을 사용할 수 있게 됨
리액트의 라이프사이클은 크게 4가지로 설명할 수 있다.

• componentDidMount(): 최초로 컴포넌트 객체가 생성될 때 한 번 수행
• render(): 초기에 화면을 그려줄 때와, 업데이트가 될 때 호출
• componentDidUpdate(): 컴포넌트의 속성 값 또는 상태값이 변경되면 호출
• componentWillUnmount(): 컴포넌트가 소멸될 때 호출

1. 라이프 사이클의 분류

• Did접두사가 붙은 메서드: 특정작업을 작동한 후 실행되는 메서드
• Will접두사가 붙은 메서드: 특정작업을 작동하기 전에 실행되는 메서드

2. 라이프 사이클 메소드

1. 생성 (마운트)

• DOM이 생성되고 웹 브라우저상에서 나타나는 것
• 컴포넌트의 인스턴스가 생성되어 DOM상에 삽입될 때에 constructor/static getDerivedStateFromProps()/render()/componentDidMount()가 순서대로 호출됨
• constructor:
  컴포넌트가 마운트 되기 전에 호출됨, state초기화 / 인스턴스에 이벤트 처리 메서드를 바인딩함
• static getDerivedStateFromProps():
  render메서드를 호출하기 직전에 호출됨, state를 갱신하기 위한 객체를 반환하거나 null을 반환하여 아무것도 갱신하지 않을 수도 있음.
• render():
  클래스 컴포넌트에 반드시 구현되어야 하는 유일한 메서드, 호출될 때마다 동일한 결과를 반환하고 브라우저와 직접적으로 상호작용을 하지 않음
• componentDidMount():
  컴포넌트가 마운트된 직후에 호출됨. 브라우저 상호작업하는 작업을 수행 (데이터 구독)

2. 업데이트

• props/state가 바뀔 때, 부모 컴포넌트가 리렌더링 될 때, this.forceUpdate로 강제 렌더링을 트리거 할 때 발생
• 컴포넌트가 다시 렌더링 될 때 static getDerivedStateFromProps()/shouldComponentUpdate()/render()/getSnapshotBeforeUpdate()/componentDidUpdate()가 순서대로 호출됨
• shouldComponentUpdate(): props또는 state가 새로운 값으로 갱신되어 렌더링이 발생하기직전에 호출됨, 성능최적화만을 위해 사용됨
• getSnapshotBeforeUpdate(prevProps, prevState): 가장 마지막으로 렌더링된 결과가 DOM 등에 반영되기 전에 호출됨, 스냅샷 또는 null을 반환
• componentDidUpdate: 갱신이 일어난 직후에 호출 됨, 최초 렌더링에서는 호출되지 않음, 이전과 현재의 props를 비교하여 네트워크 요청을 보내는 작업이 이뤄짐

3. 제거 (언마운트)

• DOM에서 제거되는 것
• componentWillUnmount(): 컴포넌트가 마운트 해제되어 제거되기 직전에 호출됨, 타이머 제거/네트워크 요청 취소/componentDidMount()에서 생성된 구독해제 등 정리작업 수행
  컴포넌트 인스턴스가 마운트 해제되고 나면 다시 마운트 되지 않음

3. 함수 컴포넌트에서 클래스 컴포넌트의 라이프 사이클 메소드를 사용하는 방법

1. useEffect(callBackFunc):
   렌더링이 될 때마다 (컴포넌트가 마운트 된 후, 컴포넌트가 업데이트되고 난 후, 컴포넌트가 언마운트 되기 전에) 실행이된다.
   생명주기 메소드의 네가지의 메소드를 모두 사용한 것과 마찬가지이다.
2. useEffect(callBackFunc, []):
   컴포넌트가 최초 렌더링 되었을 때만 실행이 된다.
   생명주기 메소드의 ComponentDidMount의 역할을 수행한다.
3. useEffect(callBackFunc, [state1, state2]):
   최초 렌더링 + state1 또는 state2가 변경되었을 때 실행이 된다.
   생명주기 메소드의 componentDidUpdate, getDerivedStateFromProps의 역할을 수행한다.
4. useEffect(()=>{ return(() => func()) }):
   useEffect는 clean-up이라고 표현하는 함수를 return할 수 있는데, clean-up함수(리턴하는 함수)를 활용해 컴포넌트가 Unmount될 때 정리하거나 unscribe 해야할 것을 처리한다.
   clean-up함수는 생명주기 메소드의 componentWillUnmount의 역할을 수행한다.

4. shouldComponentUpdate(갱신)

1. 정의

바뀌어야 하는 부분만 다시 렌더링하도록 해주는 성능 최적화 라이프사이클 API다.
props 또는 state가 새로운 값으로 갱신되어 렌더링이 발생하기 직전에 호출된다.
shouldComponentUpdate에서 false를 반환할 경우 render()와 componentDidUpdate()는 호출되지 않는다.

2. 사용해야하는 이유 :

shouldComponentUpdate를 사용하지 않고 웹을 동작시켜 보면 setState()가 호출될 때 값이 바뀐 컴포넌트뿐만 아니라 값이 바뀌지 않은 컴포넌트까지 다시 렌더링
된다는 걸 확인할 수 있다.

3. 사용방법

shouldComponentUpdate(nextProps, nextState, nextContext) 함수 안에서 리렌더링하게 되는 경우에 대해서만 반환값으로 true를 주고, 다른 경우에는 false를 반환하도록 하면 된다.
아래처럼 코드를 작성할 경우. this.state.something의 값이 바뀔 경우에 컴포넌트가 업데이트된다.