React-LifeCycle

hazel's·2023년 10월 4일
0
  • 리액트는 컴포넌트 기반의 View를 중심으로한 라이브러리입니다. 그러다보니 각각의 컴포넌트에는 라이프 사이클 즉, 컴포넌트의 생명주기가 존재합니다.
    컴포넌트의 수명은 보통 페이지에서 렌더링이 되기 전인 준비과정에서 시작하여 페이지가 사라질때 끝이 납니다.

라이프 사이클

1.contructor

  • 생성자, 컴포넌트를 만들때 처음 실행됩니다.

2.getDerivedStateFromProps

  • 이후에 리액트 측에서 업데이트할 시 보충 필요
  • props로 받아 온 값을 state에 동기화시키는 용도로 사용하며, 컴포넌트가 마운트될 때와 업데이트 될 때 호출됩니다.

3.shouldComponentUpdate

  • props나 state를 변경했을 때, 리렌더링을 할지 말지 결정하는 메서드입니다.
  • 이 메서드에서는 반드시 'true'또는 'false'를 반환해야 합니다.

4.render

  • 가장 기초적이면서 중요한 메서드로, 컴포넌트를 렌더링할 때 필요합니다.
  • 함수형 컴포넌트에서는 'render'를 대체할 수 있습니다.

5.getSnapshotBeforeUpdate

  • render에서 만들어진 결과가 브라우저에 실제로 반영되기 직전에 호출됩니다.
  • 스크롤 위치 등의 작업을 처리하는데 유용합니다.

6.componentDidMount

  • 컴포넌트를 만들고 첫 렌더링을 마친 후에 실행됩니다.
  • 의존성 배열을 비워야 함수형 컴포넌트의 'useEffect'와 유사한 효과를 얻을 수 있습니다.

7.componentDidUpdate

  • 리렌더링을 완료한 후 실행되며, 업데이트가 끝난 직후일 경우 입니다.
  • 돔 관련 처리를 해도 무방합니다.

8.componentWillUnmount

  • 컴포넌트를 돔에서 제거할 때 실행됩니다.
  • 등록한 이벤트 등을 제거하는 작업을 수행해야 합니다.
  1. componentDidCatch
    컴포넌트 렌더링 도중에 에러가 발생했을 때 어플리케이션이 멈추지 않고 오류 UI를 보여줍니다.

라이프 사이클은 9가지가 있지만 크게 세가지로 간략히 나누면 마운트, 업데이트, 언마운트입니다.
마운트는 돔이 생성되고 웹 브라우저 상에 나타나는 것을 뜻하고, 반대로 언마운트는 돔에서 제거되는 것을 뜻합니다.
업데이트는 props가 바뀔때, state가 바뀔때, 부모컴퍼넌트가 리렌더링 될때, this.forceUpdate가 강제로 렌더링을 트리거 할때 발생합니다.

profile
좋아하는 것을 하나하나 채워가면 행복해질꺼야

0개의 댓글

Powered by GraphCDN, the GraphQL CDN