React숙련주차08(LifeCycle)

LifeCycle - 클래스형 컴포넌트에서의 라이프사이클 이해하기(우리는 클래스형 컴포넌트가 아닌 함수형 컴포넌트를 사용)

생명주기(LifeCycle)

리액트 컴포넌트는 각각 [Mount] → [Update] → [Unmount]의 과정을 거친다. 리액트 생명주기(라이프사이클)란, 컴포넌트 중심 라이브러리의 집합체라고 보시면 된다. 모든 컴포넌트에는 각각의 생명주기가 존재하고 각 생명주기에 맞는 메서드 들이 있다. 

---

Mount

컴포넌트가 생성될 때를 말한다. 

• constructor
  • 컴포넌트가 맨 처음 만들어 질 때 호출
  • 생성자_역할이 필요한 경우 여기에 적어준다.
• getDerivedStateFromProps
  • 부모 컴포넌트로부터 props를 전달받을 때, state에 값을 일치시키는 역할을 하는 메서드
  • 마운트 될 때, 업데이트(리렌더링) 될 때도 호출
• render
  • 최초 mount가 준비완료 되면 호출되는, 즉 렌더링 하는 메서드
  • 컴포넌트를 DOM에 마운트하기 위해 사용
• componentDidMount
  • 컴포넌트가 브라우저에 표시가 된 후 호출되는 메서드_그 상황에서 어떠한 역할을 해야 되는 함수 또는 기능 등을 적어준다.

---

Update

컴포넌트가 갱신될 때를 말한다. (리렌더링 되는 경우_state의 변경, props의 변경, 부모 component의 변경)

• getDerivedStateFromProps
  • Mount 과정에서도 동일하게 호출되었던 메서드.
  • 부모 컴포넌트로부터 props를 전달받을 때, state에 값을 일치시키는 역할을 하는 메서드
• shouldComponentUpdate
  • 리렌더링 여부 판단(함수 호출 결과 : true / false)
    • true인 경우 : 리렌더링 진행
    • false인 경우 : 리렌더링 하지 않음
  • 함수형 컴포넌트에서 memo, useMemo, useCallback이 역할을 대신한다.
• render
  • 변경사항 반영이 다 되어 준비완료 되면 호출되는, 즉 렌더링 하는 메서드
  • 컴포넌트를 DOM에 마운트하기 위해 사용
• getSnapshotBeforeUpdate
  • 컴포넌트에 변화가 일어나기 직전 DOM의 상태를 저장
  • componentDidUpdate 함수에서 사용하기 위한 스냅샷 형태의 데이터
• componentDidUpdate
  • 컴포넌트 업데이트 작업 완료 후 호출

---

Unmount

컴포넌트가 DOM에서 제거되는 시점을 말한다.

• componentWillUnmount
  • 컴포넌트가 사라지기 전 호출되는 메서드
  • useEffect의 return과 동일