[React] 생명주기

아직도 나에겐 많이 어려운 리액트..공부해도 끝이 없는 것 같다..

 

 

컴포넌트 생명주기

마운트(DOM에 추가) -> 업데이트(새로운 props/state) -> 언마운트(DOM에서 제거)

리액트16 +) 에러(에러 발생 시 실행)

 

 

라이프 사이클 이벤트 실행 순서

• constructor()를 포함한 라이프 사이클 실행 순서는 아래와 같다.
  1. constructor() : 엘리먼트를 생성하여 기본 state와 prop을 설정할 때 실행된다.
  2. componentWillMount() : 컴포넌트를 DOM에 삽입하기 전 실행
  3. render()
  4. componentDidMount() : DOM에 삽입되어 렌더링이 완료된 후 실행
  5. componentWillReceiveProps(nextProps) : 컴포넌트가 props를 받기 직전 실행
  6. shouldComponentUpdate(nextProps, nextState) : 컴포넌트가 갱신되기 전 실행. 랜더링 유무 설정 가능
  7. componentWillUpdate(nextProps, nextState) : 컴포넌트가 갱신되기 직전 실행
  8. render()
  9. componentDidUpdate(prevProps, prevState) : 컴포넌트가 갱신된 후에 실행
  10. componentWillUnmount() : 컴포넌트를 DOM에서 제거하기 전 실행
• React는 엘리먼트를 먼저 렌더링(= render()함수 호출)하고 나서 DOM에 추가한다.

💡 리액트 17부터는 componentWillMount(), componentWillUpdate(), componentWillReceiveProps() 라이프 사이클이 deprecated 된다.

 

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

 

그렇다면 mount될 때 useEffect의 실행 시점은 언제일까?

 

useEffect는 componentDidMount() + componentDidUpdate() + componentWillMount()의 개념

 

useEffect는 컴포넌트가 mount, update, unmount될 때 실행된다.

또한, 실행은 컴포넌트 랜더링과 동시에 일어나는게 아니라 랜더링 후에 일어난다.

 

 

 

 

 

 

Reference

https://react.dev/learn/lifecycle-of-reactive-effects

Lifecycle of Reactive Effects – React

https://velog.io/@gyumin_2/React.js-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0Life-Cycle

React.js - 컴포넌트 생명주기(Life Cycle)

https://choyeon-dev.tistory.com/m/10