[React] 리액트 생명주기

리액트 생명주기

---

리액트의 생명주기는 크게 마운트, 업데이트, 언마운트로 나뉘어져 있다.

마운트 : 컴포넌트가 페이지에 생성 될 때 실행
업데이트 : 컴포넌트가 리렌더링 될 때 실행
언마운트 : 컴포넌트가 페이지에서 사라질 때 실행

마운트

• 컴포넌트가 페이지에 생성 될 때 실행된다.
  • constructor
  • getDerivedStateFromProps
    • props를 state로 변경 할 때 사용
  • render
  • componentDidMount

업데이트

• 리렌더링 되는 요인은 다음과 같다.
  • props가 변경
  • state가 변경
  • 부모 컴포넌트가 리렌더링
  • this.forceUpdate로 강제 렌더링
• 컴포넌트가 리렌더링 될 때 실행된다.
  • getDerivedStateFromProps
  • shouldComponentUpdate
    • boolean 값을 반환 해야한다.
    • true일 시 render, false일 시 취소한다.
    • 이 과정에서 컴포넌트 렌더링 성능을 개선할 수 있다.
  • render
  • getSnapshotBeforeUpdate
    • render의 결과물이 브라우저에 적용되기 전에 실행된다.
    • componentDidUpdate에서 3번째 인자 값으로 받을 수 있다.
    • 업데이트 직전의 값을 참고할 일이 있을 때 사용한다.
    • ex) 스크롤바 위치 유지
  • componentDidUpdate

언마운트

• 컴포넌트가 DOM에서 사라질 때 실행된다.
  • componentWillUnmount

오류 제어

• 컴포넌트에서 오류 발생 시 실행된다.
• componentDidCatch
  • 어떤 에러가 어디에서 생기는지 알 수 있다.