[BFE.dev] all kinds of effects

all kinds of effects

// This is a React Quiz from BFE.dev 

import * as React from 'react'
import { useState, useEffect, useLayoutEffect, useInsertionEffect} from 'react'
import { createRoot } from 'react-dom/client'

function App() {
  console.log(1)
  const [state, setState] = useState(0)
  useEffect(() => {
    setState(state => state + 1)
  }, [])

  useEffect(() => {
    console.log(2)
    return () => {
      console.log(3)
    }
  }, [state])

  useEffect(() => {
    console.log(4)
    return () => {
      console.log(5)
    }
  }, [state])

  useLayoutEffect(() => {
    console.log(6)
    return () => {
      console.log(7)
    }
  }, [state])

  useInsertionEffect(() => {
    console.log(8)
    return () => {
      console.log(9)
    }
  }, [state])
  console.log(10)
  return null
}

const root = createRoot(document.getElementById('root'));
root.render(<App/>)

출력 결과

1
10
8
6
2
4
1
10
9
8
7
6
3
5
2
4

풀이 과정

1. 초기 렌더링

• 1 출력: root.render(<App />)가 실행되면서 1이 출력됩니다.

• 10 출력: 렌더링 마지막으로 10이 출력됩니다.

• 8 출력: useInsertionEffect 실행되어 8이 출력됩니다.

• 6 출력: useLayoutEffect 실행되어 6이 출력됩니다.

• 상태 업데이트: 첫 번째 useEffect 실행되어 상태를 업데이트를 대기열에 등록합니다.

• 2 출력: 두 번째 useEffect 실행되어 2가 출력됩니다.

• 4 출력: 세 번째 useEffect 실행되어 4가 출력됩니다.

  React 실행 순서

  1️⃣ 렌더링: 리액트가 어떤 결과가 나올지 계산합니다.

  2️⃣ ✨ useInsertionEffect 실행: 스타일 태그를 본문에 삽입하는 단계입니다.

  3️⃣ DOM 업데이트: 리액트가 실제 HTML에 요소를 넣습니다.

  4️⃣ useLayoutEffect 실행: 요소의 크기나 위치를 읽는 단계입니다.

  5️⃣ 브라우저 페인트: 사용자가 화면을 봅니다.

  6️⃣ useEffect 실행: 데이터 가져오기 등 비동기 작업을 하는 단계입니다.

2. 상태 업데이트 후 재렌더링

• 1 출력: <App />이 리렌더되고 1이 출력됩니다.

• 10 출력: 렌더링 마지막으로 10이 출력됩니다.

• 9 출력: useInsertionEffect의 Cleanup 함수가 실행되어 9가 출력됩니다.

• 8 출력: useInsertionEffect 실행되어 8이 출력됩니다.

• 7 출력: useLayoutEffect의 Cleanup 함수가 실행되어 7이 출력됩니다.

• 6 출력: useLayoutEffect 실행되어 6이 출력됩니다.

• 3 출력: useEffect의 Cleanup 함수가 실행되어 3이 출력됩니다.

• 5 출력: useEffect의 Cleanup 함수가 실행되어 5이 출력됩니다.

• 2 출력: useEffect 실행되어 2가 출력됩니다.

• 4 출력: useEffect 실행되어 4가 출력됩니다.