useEffect의 실행 순서

React의 useEffect 훅은 컴포넌트의 라이프 사이클에 따라 특정 작업을 수행할 수 있게 해줍니다. useEffect의 실행 순서를 이해하려면 컴포넌트 라이프 사이클을 먼저 이해해야 합니다. 다음은 일반적인 실행 순서입니다.

마운트 (Mounting)

1. 컴포넌트 렌더링: 컴포넌트가 처음 마운트되면 렌더링 함수가 호출됩니다.
2. useEffect 실행: 렌더링 후에 useEffect 내의 코드가 실행됩니다. 두 번째 인자로 빈 배열 ([])을 전달한 경우, 이 훅은 마운트 시점에만 실행됩니다.

업데이트 (Updating)

1. 컴포넌트 렌더링: 상태나 속성이 변경되면 컴포넌트가 다시 렌더링됩니다.
2. useEffect 정리 (Clean-up) 함수 실행: 이전 렌더링에서 useEffect가 반환한 정리 함수가 있다면, 그 함수가 실행됩니다. 이는 업데이트 전에 발생합니다.
3. useEffect 실행: 렌더링 후에 useEffect 내의 코드가 다시 실행됩니다. 두 번째 인자로 특정 값의 배열을 전달하면, 그 값이 변경될 때만 useEffect가 실행됩니다.

언마운트 (Unmounting)

1. useEffect 정리 (Clean-up) 함수 실행: 컴포넌트가 언마운트되기 전에 마지막으로 실행된 useEffect의 정리 함수가 실행됩니다.
2. 컴포넌트 언마운트: 컴포넌트가 DOM에서 제거됩니다.

useEffect의 실행 순서를 제어하려면 두 번째 인자를 적절히 활용해야 합니다. 빈 배열을 전달하면 훅은 컴포넌트 마운트와 언마운트 시에만 실행되고, 특정 값의 배열을 전달하면 해당 값이 변경될 때마다 실행됩니다. 두 번째 인자를 전달하지 않으면 컴포넌트가 렌더링될 때마다 실행됩니다.

정리

useEffect는 React 컴포넌트가 마운트, 업데이트, 언마운트될 때 실행되는 사이드 이펙트를 다루는 훅입니다. 컴포넌트 라이프 사이클의 각 단계에서 원하는 작업을 수행할 수 있으며, 두 번째 인자로 전달한 배열의 값에 따라 실행 시점을 제어할 수 있습니다.

포인트

useEffect가 소속된 컴포넌트의 라이프 사이클에 따라 움직이는 단계에 대해 마운트 / 업데이트 / 언마운트로
나누어서 정리해서 말씀을 드리는 것이 포인트라고 생각합니다.

면접에서 할 대답

useEffect를 선언한 컴포넌트가 렌더링 되고나서 마운트 시점에서 처음 실행이 되며,

의존성 배열의 참조값 혹은 컴포넌트의 업데이트가 일어날때 선행되는 클린업 함수가 있었다면

먼저 실행되고 그 이후 useEffect가 다시 실행됩니다.

마지막으로 컴포넌트가 언마운트될때 마지막으로 클린업 함수가 실행되고 dom에서 컴포넌트와 함께 제거됩니다.