useEffect 실행 시점

[ghdtjgus76]

책 223-224 페이지에 있는 예제를 보다가 궁금해져서 찾아보게 되었습니다.

일단, 아래 코드를 실행시켜봤습니다.

const MyContext = createContext()

function ContextProvider({
  children,
  text
}) {
  return (
    <MyContext.Provider value={{ hello: text }}>{children}</MyContext.Provider>
  )
}

function useMyContext() {
  const context = useContext(MyContext)
  if (context === undefined) {
    throw new Error('useMyContext는 ContextProvider 내부에서만 사용할 수 있습니다.')
  }
  return context
}

function GrandChildComponent() {
  const { hello } = useMyContext()

  useEffect(() => {
    console.log('렌더링 GrandChildComponent')
  })

  return <h3>{hello}</h3>
}

function ChildComponent() {
  useEffect(() => {
    console.log('렌더링 ChildComponent')
  })

  return <GrandChildComponent />
}

function ParentComponent() {
  const [text, setText] = useState('')

  function handleChange(e) {
    setText(e.target.value)
  }

  useEffect(() => {
    console.log('렌더링 ParentComponent')
  })

  return (
    <>
      <ContextProvider text="react">
        <input value={text} onChange={handleChange} />
        <ChildComponent />
      </ContextProvider>
    </>
  )
}

렌더링 GrandChildComponent
렌더링 ChildComponent
렌더링 ParentComponent

위 코드에서는 useEffect를 사용해서 콘솔문을 출력했습니다.

아래 코드에서는 useEffect를 제외하고 실행시켜봤습니다.

const MyContext = createContext()

function ContextProvider({
  children,
  text
}) {
  return (
    <MyContext.Provider value={{ hello: text }}>{children}</MyContext.Provider>
  )
}

function useMyContext() {
  const context = useContext(MyContext)
  if (context === undefined) {
    throw new Error('useMyContext는 ContextProvider 내부에서만 사용할 수 있습니다.')
  }
  return context
}

function GrandChildComponent() {
  const { hello } = useMyContext()

  console.log('렌더링 GrandChildComponent')

  return <h3>{hello}</h3>
}

function ChildComponent() {
  console.log('렌더링 GrandChildComponent')

  return <GrandChildComponent />
}

function ParentComponent() {
  const [text, setText] = useState('')

  function handleChange(e) {
    setText(e.target.value)
  }

  console.log('렌더링 GrandChildComponent')

  return (
    <>
      <ContextProvider text="react">
        <input value={text} onChange={handleChange} />
        <ChildComponent />
      </ContextProvider>
    </>
  )
}

결과는 다음과 같았습니다.

렌더링 ParentComponent
렌더링 ChildComponent
렌더링 GrandChildComponent

아래 코드는 useLayoutEffect를 사용해서 실행해본 결과입니다.

const MyContext = createContext()

function ContextProvider({
  children,
  text
}) {
  return (
    <MyContext.Provider value={{ hello: text }}>{children}</MyContext.Provider>
  )
}

function useMyContext() {
  const context = useContext(MyContext)
  if (context === undefined) {
    throw new Error('useMyContext는 ContextProvider 내부에서만 사용할 수 있습니다.')
  }
  return context
}

function GrandChildComponent() {
  const { hello } = useMyContext()

  useLayoutEffect(() => {
    console.log('렌더링 GrandChildComponent')
  })

  return <h3>{hello}</h3>
}

function ChildComponent() {
  useLayoutEffect(() => {
    console.log('렌더링 ChildComponent')
  })

  return <GrandChildComponent />
}

function ParentComponent() {
  const [text, setText] = useState('')

  function handleChange(e) {
    setText(e.target.value)
  }

  useLayoutEffect(() => {
    console.log('렌더링 ParentComponent')
  })

  return (
    <>
      <ContextProvider text="react">
        <input value={text} onChange={handleChange} />
        <ChildComponent />
      </ContextProvider>
    </>
  )
}

렌더링 GrandChildComponent
렌더링 ChildComponent
렌더링 ParentComponent

[ghdtjgus76]

책에서도 배운 것처럼 첫 번째 예시에서는 useEffect를 사용했고, 두 번째 예시에서는 그냥 콘솔문만 출력했습니다.
첫 번째 예시에서 useEffect는 렌더링 이후 실행이 되고, 두 번째 예시에서는 렌더링하면서 함께 실행이 되는 것으로 판단하고 있습니다.

아래 링크 참고하시면 대충 구조는 아실 것 같습니다.
https://stackoverflow.com/questions/69340168/react-hooks-child-component-useeffect-executes-first-before-parent-component

자바스크립트 이벤트 버블링처럼, 상위에서 하위 컴포넌트로 모두 렌더링 후 useEffect는 하위에서 상위 컴포넌트로 실행되는 구조라고 합니다.
그래서 상위에서 하위로 렌더링되면서 그냥 콘솔문이 찍히는 것이고, 하위에서 상위로 가면서 useEffect 내부 콘솔문이 찍히는 것 같아요.

조금 더 의미 있는 자료를 찾으면 더 추가할게요.

[ghdtjgus76]

https://www.reddit.com/r/reactjs/comments/1447nft/how_the_useeffect_work_in_react/
요약하자면, recursive 방식으로 동작하는데, 하위까지 드릴 다운한 후 그 항목이 마운트되면 useEffect가 실행되고 상위까지 올라가는 방식이라고 합니다.

[ghdtjgus76]

책에서 useLayoutEffect, useEffect의 실행 시점도 제시해줬었는데, 아래와 같습니다.

1. 리액트가 DOM을 업데이트
2. useLayoutEffect 실행
3. 브라우저에 변경 사항 반영
4. useEffect 실행

그래서 리액트 렌더링이란게 1번 과정까지인 것 같고 브라우저 렌더링 과정이 3번인 것 같습니다.
useLayoutEffect 또한 리액트 렌더링 이후 실행되는 것이니 useEffect와 동일한 실행 결과를 산출하는 걸로 결론을 내렸습니다.