Post

React Hook Flow

https://raw.githubusercontent.com/donavon/hook-flow/master/hook-flow.png

✨Mount

컴포넌트가 페이지에 처음 렌더되는 단계

1. Run lazy initializers

useStateuseReducerlazy initializers는 초기 상태 계산을 하는데 사용이 된다. 또한 처음 렌더링될 때 한번만 사용이 되고(mount 단계에서만 실행), 초기값으로 할당된다.

2. Render

작성된 JSX를 가상 DOM에 렌더링 한다.

3. React updates DOM

가상 DOM이 업데이트가 되면 실제 DOM을 업데이트 한다.

4. Run Layout Effects

useLayoutEffect의 내부 코드를 실행 한다.

5. Browser paints the screen

브라우저가 업데이트된 DOM을 화면에 표시한다.

6. Run Effects

useEffect의 내부 코드를 실행 한다.

✨Update

컴포넌트가 업데이트되는 단계이며, Mount 단계와 유사하다.

■ 컴포넌트 업데이트되는 이유

  • 부모 컴포넌트의 재-렌더링
  • 컴포넌트 상태 변경
  • 컨텍스트 변경

1. Render

작성된 JSX를 가상 DOM에 렌더링 한다.

2. React updates DOM

가상 DOM이 업데이트가 되면 실제 DOM을 업데이트 한다.

3. cleanup Layout Effects

useLayoutEffect의 반환 코드를 실행한다.

4. Run Layout Effects

useLayoutEffect의 내부 코드를 실행 한다.

5. Browser paints the screen

브라우저가 업데이트된 DOM을 화면에 표시한다.

6. Cleanup Effects

useEffect의 반환 코드를 실행한다.

7. Run Effects

useEffect의 내부 코드를 실행 한다.


✨Unmount

컴포넌트가 종료되는 단계

1. Cleanup Layout Effects

useLayoutEffect의 반환 코드를 실행한다.

2. Cleanup Effects

useEffect의 반환 코드를 실행한다.

참고 사이트

This post is licensed under CC BY 4.0 by the author.