React] Mount & Rerender (LifeSycle)

React를 사용했을 때, 화면이 그려지는 동작 순서와 화면을 다시 그리게 되는 리렌더링 순서입니다.

 

 

---

 

 

Mount (마운트)

컴포넌트가 생성되어 렌더링 되는 과정을 마운트라고 하며,

렌더링 된 컴포넌트가 삭제되는 과정을  Unmount(언마운트)라고 합니다.

 

1. 함수 컴포넌트 호출
2. 구현부 실행
   • props 전달받고, hook 내부 변수, 함수 생성.
     (내부 변수 및 함수는 hook에 있는 state나 function을 제외. 이들은 별도로 메모리에 저장되어 관리함.)
3. 가상 DOM을
   • 생성
4. 커밋
   • 실제 DOM에 반영
5. useLayoutEffect
   • 화면에 Paint 하기 전에, useLayoutEffect에 등록해 둔 effect '동기'로 실행된다.
   • 실제로 해당 훅은 잘 사용하지 않는 것으로 알고 있음.
   • 공식 문서를 확인하면 성능저하이슈가 있으므로, useEffect를 권장
6. state, redux store 등의 변경이 있다면 한번 더 리렌더링 된다.
7. Paint
   • 실제 DOM을 화면에 그리며 마운트 완료(didMount).
8. useEffect
   • 마운트 되어 화면이 그려지자마자, useEffect에 등록해 둔 내용들이 '비동기'로 실행

 

 

---

 

 

Rerender (리렌더)

state값이 변하여 화면이 다시 그려지게 되는 것을 리렌더라고 합니다.

 

1. 함수 컴포넌트 재호출
2. 구현부 실행
   • props 전달받고, hook 내부 변수, 함수 재생성. (hook의 특성에 따라 기존에 메모리에 저장한 값을 적절히 활용)
3. 렌더링
   • 새로운 가상DOM을 더 생성 후, 이전 가상 DOM과 비교하여, 달라진 부분을 탐색하고, 실제 DOM에 반영할 부분을 결정
4. 커밋
   • 달라진 부분만 실제 DOM에 반영
5. useLayoutEffect
   • 마운트와 같음
6. state, redux store 등의 변경이 있다면 한번 더 리렌더링 된다.
7. Paint
   • 실제 DOM을 화면에 그림. 업데이트 완료(didUpdate).
8. useEffect
   • 의존성 확인 후, 해당하는 부분만 ‘비동기’로 실행

 

Rerender 조건

• state값 변경
• props 변경
• redux store 변경
• 부모 컴포넌트가 리렌더링 되어 자식 컴포넌트까지 리렌더링

 

Rerender를 막는 방법

• 부모 컴포넌트떄문에 불필요한 리렌더링을 막기 위해서는 React.memo를 사용할 수 있습니다.
• 컴포넌트 내부 변수의 값을 막으려면 useMemo, 함수를 막으려면 useCallback 사용 후 의존성을 부여하여 Rerender 조건을 부여하면 됩니다.

 

 

---

 

 

 

 

---

 

 

동작 원리는 중요합니다.
이를 기반으로 개발을 진행하는데 어려움이 없고, 디버깅 또한 잘할 수 있습니다.