useEffect 순서 관련 질문!

오잉 반대아닌가요? child -> parent 순인 것 같습니다. 간단히 설명하자면 작성하신 react 컴포넌트가 화면에 그려지기까지 여러 단계를 거치게 되는데요. 크게 render phase와 commit phase가 있습니다. render phase에서는 작성된 코드를 기반으로 어떻게 DOM을 수정해야할지 계산하는 단계고 commit phase에서는 실제 수정을 가하는 단계라고 생각하시면 될 것 같습니다. "useEffect의 순서가 어떻게 보장되나요?" 에 대한 답은 react가 작업 순서를 어떻게 정하는지 보면 될 것 같습니다. react는 각 컴포넌트를 react fiber node라는 객체로 변환을해서 render, commit phase를 수행하게 됩니다. react fiber node들은 linked list 형태로 저장이 되어 있어서 root fiber node에서 child fiber node까지의 순서가 보장됩니다. 비슷하게 useEffect도 effect list에 저장이되고 commit 단계에서 해당 effect list를 돌면서 useEffect를 수행하게 됩니다. 즉, 질문자님의 코드는 react에 의해서 아래의 과정을 거치게 될 것 같습니다. (편의를 위해 1단계 2단계로 나누겠습니다. render, commit phase와는 관계 없음) 1 단계: react fiber node 생성 단계와 effect list에 useEffect를 담는 과정 - App의 render 함수를 보니 ChildComponent라는 react fiber node를 생성하는 함수임. - ChildComponent의 render 함수를 보니 GrandChildComponent라는 react fiber node를 생성하는 함수임. - GrandChildComponent라는 react fiber node를 생성하면서 해당 컴포넌트 컨텍스트에서 돌아가는 코드 (useEffect와 기타 코드)를 보고 여러가지 메타 정보 및 commit 단계에서 실행해야할 함수를 react fiber node 객체에 저장함. useEffect의 경우는 hook이라는 객체로 생성이되고 effect list (작업 큐)에 담김 - ChildComponent도 위와 마찬가지 - App도 위와 마찬가지 1단계 종료시: - react fiber node는 App (root) -> ChildComponent (child node) -> GrandChildComponent (child's child node) 형태로 형성됨 - effect list는 [GrandChildComponent's useEffect, ChildComponent's useEffect, App's useEffect] 형태로 형성됨 2 단계: 작업 처리 과정 - App이라는 root fiber node를 기준으로 작업을 처리하기 시작함 - App의 render 함수를 실행하려고 보니 ChildComponent를 먼저 render 해야함. - ChildComponent도 GrandChildComponent를 먼저 render 해야함. - GrandChildComponent를 먼저 렌더하고, 해당 컨텍스트에 저장된 코드를 수행함 - ChildComponent도 위와 마찬가지 - App도 위와 마찬가지 - 렌더 후 effect list를 돌면서 effect들을 수행함 - effect list에 담긴 순서가 GrandChildComponent -> ChildComponent -> App 순이니 child -> parent 순으로 console.log 찍힘 저도 리액트 내부를 정확히 다 이해하고 있는 것은 아니니 대충 이런 느낌이다 정도로 참고하시면 될 것 같습니다. 더 정확한건 react source code를 직접보시거나 react fiber와 render, commit 단계를 설명해놓은 블로그들을 참고하시게 좋아보여요! 몇개 첨부해놓겠습니다 - https://www.bussieck.com/useeffect-under-the-hood/ - https://blog.logrocket.com/deep-dive-react-fiber/ - https://github.com/facebook/react - https://beta.reactjs.org/learn/render-and-commit