자식 컴포넌트와 부모 컴포넌트의 useEffect의 실행 순서를 알아보자.

const Child = () => {
  console.log('child')
  useEffect(() => {
    console.log('mount : child')

    return () => {
      console.log('unmount: child')
    }
  }, [])
  return {/*대충 리턴값 아무거나*/}
}

const Parent = () => {
  console.log('parent')
  useEffect(() => {
    console.log('mount : parent')
    return () => {
      console.log('unmount : parent')
    }
  }, [])

  return <Child />
}

정답

parent // 부모 컴포넌트 실행
child  // 자식 컴포넌트 실행
mount : child  // 자식 컴포넌트 useEffect 실행
mount : parent // 부모 컴포넌트 useEffect 실행
unmount : parent // 부모 컴포넌트 useEffect 실행
unmount : child // 자식 컴포넌트 useEffect 실행

다음과 같이 실행됩니다.

• useEffect를 제외한 함수내 요소들이 실행 됩니다.
• componentDidMount는 자식 컴포넌트에서 먼저 발생하고
• componentWillUnmount는 부모 컴포넌에서 먼저 발생합니다.

저번 포스트와 다른게 이번 포스트는 순수한 궁금증에 의해 작성된 포스트입니다. React를 사용하고 있다고 하지만 한 번도 부모나 자식 컴포넌트의 라이프 사이클에 대해 생각을 해 본적이 없긴 때문입니다. 이번 포스트는 가볍게 정답 알려드리고 다음에 혹시 이 포스트를 참고할만한 예를 찾게 되면 그때 또 추가 포스팅 하도록 하겠습니다.