React - 라이프사이클 메서드의 이해

 

1.  마운트(Mount)

• DOM이 생성되고 웹 브라우저상에 나타나는 것
• 호출하는 메서드
  1. 컴포넌트 생성
  2. constructor
     컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
  3. getDerivedStateFromProps
     props에 있는 값을 state에 넣을 때 사용하는 메서드
  4. render
     UI를 렌더링하는 메서드
  5. componentDidMount
     컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드
• 함수형 컴포넌트의 마운트 과정
  1. 함수 컴포넌트 호출
  2. 구현부 실행
     props 취득, hook 실행, 내부 변수 및 함수 생성
     hook에 등록해둔 상태값, 부수함수 효과 등은 별도 메모리에 저장되어 관리됨
  3. return 실행
     렌더링 시작
  4. 렌더 단계(Render Phase)
     가상 DOM 생성
  5. 커밋 단계(Commit Phase)
     실제 DOM에 반영
  6. useLayoutEffect()
     브라우저가 화면에 paint 하기 전, useLayoutEffect에 등록해둔 부수효과 함수가 동기적으로 실행
     이 때, state, redux store 등의 변경이 있다면 한 번 더 재렌더링 됨
  7. 페인트(Paint)
     브라우저가 실제 DOM을 화면에 그림
     didMount가 완료됨
  8. useEffect()
     마운트 되어 화면이 그려진 직후, useEffect에 등록해둔 부수효과 함수가 비동기적으로 실행

***useLayoutEffect VS useEffect

1. useLayoutEffect ( 동기effect )

- useLayoutEffect에 등록된 effect는 실제DOM 반영 후, 화면이 그려지기 직전, "동기"로 실행된다.

1) (재)렌더링 시작

2) 실제DOM에 반영

3) effect 함수 동기 실행 : state 등 변경시, 다시 재렌더링 된다.

4) 화면에 Paint(didMount || didUpdate)

 

2.  useEffect( 비동기effect )

- useEffect에 등록된 effect는 화면이 그려진 직후, "비동기"로 실행된다.

1) (재)렌더링 시작

2) 실제DOM에 반영

3) 화면에 Paint(didMount || didUpdate)

4) effect 함수 비동기 실행

 

** 참고: effect "구현부"와 "return 함수" 실행 순서

- didMount => effect "구현부"만 실행

- didUpdate => effect "return 함수" 실행 => effect "구현부" 실행

- willUnmount => effect "return 함수"만 실행

 

* Redux store 변경시, 자동으로 재렌더링 되는 이유

<Provider store={store}> 로  컴포넌트들을 감싸주면,

스토어 상태가 변경될 때마다 이를 참조하는 컴포넌트들이 재렌더링 되도록
react-redux 라이브러리가 자동으로 컴포넌트들의 렌더 함수들을 subscribe 처리

 

 

 

 

 

2. 업데이트(Update)

• 컴포넌트가 업데이트 하는 조건
  1. state가 변경될 때
  2. props가 변경될 때
  3. 부모 컴포넌트가 리렌더링 될 때
  4. forceUpdate로 강제 렌더링을 트리거 할 때
• 호출하는 메서드
  1. getDerivedStateFromProps
     마운트 과정에서 호출, 업데이트가 시작하기 전에도 호출
     props의 변화에 따라 state값에도 변화를 주고 싶을 때 사용
  2. shouldComponentUpdate
     컴포넌트가 리렌더링을 해야하는지 결정하는 메서드
     forceUpdate()함수를 호출한다면 이 과정을 생략하고 바로 render 함수 호출
     ture 혹은 false값을 반환해야 함
  3. true 반환 시 render 호출, false 반환 시 여기서 작업 취소
     위의 과정에서 false 반환시 컴포넌트 리렌더링이 이루어지지 않음
  4. render
     컴포넌트 리렌더링
  5. getSnapshotBeforeUpdate
     컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드
     
  6. 웹 브라우저상의 실제 DOM 변화
  7.  componentDidUpdate
     컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드
• 함수형 컴포넌트의 업데이트 과정
  1. 함수 컴포넌트 재호출
  2. 구현부 실행
     props 취득, hook 실행, 내부 변수 및 함수 재생성
     단, 각 hook의 특성에 따라 기존에 메모리에 저장한 내용을 적절히 활용
  3.  return 실행
     렌더링 시작
  4. 렌더 단계(Render Phase)
     새로운 가상DOM 생성 후, 이전 가상 DOM과 비교하여, 달라진 부분을 탐색, 실제 DOM에 반영할 부분을 결정 
  5. 커밋 단계(Commit Phase)
     달라진 부분만 실제 DOM에 반영한다.
  6. useLayoutEffect
     브라우저가 화면에 Paint 하기 전에, useLayoutEffect에 등록해둔 effect(부수효과함수)가 '동기'로 실행
     이 때, state, redux store 등의 변경이 있다면 한번 더 재렌더링
     
  7. 페인트(Paint)
     브라우저가 실제 DOM을 화면에 그린다. didUpdate가 완료된다.
  8. useEffect
     update되어 화면이 그려진 직후, useEffect에 등록해둔 effect(부수효과함수)가 '비동기'로 실행
      effect에 return부분이 있다면, 구현부보다 먼저 실행

 

 

3. 언마운트(Unmount)

• 마운트의 반대과정, 컴포넌트를 DOM에서 제거하는 것
• 호출하는 메서드
  1. componentWillUnmount
     컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드

 

 

 

 

 

 

 

 

 

 

 

 

 

출처 : 리액트를 다루는 기술 [개정판]

리액트를 다루는 기술 [개정판]

https://curryyou.tistory.com/486

[React] 컴포넌트 렌더링 과정 정리(useLayoutEffect vs. useEffect)