React Life Cycle (생명주기)

본 게시글은 개인 공부를 하면서 기록 목적으로 작성하였습니다.
잘못된 내용이 있다면 제보 부탁드립니다. 감사합니다.🙇‍♂️

 

1.  라이프 사이클이란?

• 모든 리액트 컴포넌트에는 라이프사이클(생명 주기)가 존재한다. 리액트에서 컴포넌트가
  렌더링을 준비하는 순간부터 페이지가 사라질 때까지를 라이프 사이클(생명 주기)이라 말한다.

라이프사이클

• 컴포넌트는 생성(Mounting) → 수정(Updating) → 제거(Unmounting) 된다.
• 생성(Mounting) : 컴포넌트를 불러오는 단계를 말한다.
• 수정(Updating) : 사용자의 행동(클릭, 데이터 입력 등)으로 데이터가 바뀌거나, 부모 컴포넌트가 렌더링할 때 업데이트 된다.
  • 부모 컴포넌트에서 넘겨주는 props가 바뀔 때
  • 컴포넌트 자신이 들고 있는 state가 바뀔 때
  • 부모 컴포넌트가 업데이트 되었을 때
  • this.forceUpdate로 강제로 컴포넌트를 업데이트할 때
• 제거(Unmounting) : 페이지를 이동하거나, 사용자의 행동(삭제 버튼 클릭 등)으로 인해 컴포넌트가 화면에서 사라지는 단계

 

2.  라이프 사이클 메서드

• constructor()
  • 컴포넌트가 생성되면 가장 처음 호출하는 메서드로 초기 state를 정할 수 있다.
• render()
  • UI를 렌더링하는 메서드이며, state나 props에 접근하여 데이터를 보여줄 수 있다.
• componentDidMount()
  • 컴포넌트의 첫번째 렌더링을 마친 후 실행되는 메서드로 주로 axios, fetch 등을 통하여 데이터를 요청할 때 사용한다.
• componentDidUpdate(prevProps, prevState, snapshot)
  • 리렌더링을 완료한 후 실행되는 메서드로 보통 이전 데이터와 비교할 일이 있을 때 사용한다.
• componentWillUnmount()
  • 컴포넌트가 DOM에서 제거될 때 실행하는 함수로 만약, setTimeout 같은 이벤트가 등록되어 있다면 꼭 해제를 해줘야 한다.

 

 

---

참 고

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

React Lifecycle Methods diagram

https://ko.reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React