[Frontend 기술면접 top30] 6. useEffect의 실행 순서에 대해 설명해주세요.

useEffect의 동작방식

useEffect는 기본적으로 컴포넌트가 렌더링 된 후에 실행됩니다. useEffect는 두번째 인자로 배열을 전달할 수 있으며, 이 배열에 포함된 값들이 변경되었을 때만 useEffect내의 코드가 실행됩니다.

useEffect의 실행순서

1. 컴포넌트 렌더링: 컴포넌트의 상태나 props가 변경될 때 컴포넌트가 렌더링됩니다.
2. useEffect의 코드 실행: 컴포넌트가 렌더링 된 후에 useEffect에 전달된 함수가 실행됩니다.
3. 다음 렌더링 시 이전 useEffect의 cleanup 함수 실행: 만약 컴포넌트가 재렌더링되어 useEffect가 다시 실행되어야 하는 상황이 발생한다면, 이전에 실행된 useEffect의 cleanup 함수가 먼저 실행됩니다.
4. 다음 useEffect의 코드 실행: 이전 useEffect의 cleanup 함수 실행 후, 새롭게 렌더링 된 컴포넌트와 관련된 useEffect의 코드가 실행됩니다.
5. 컴포넌트 언마운트 시, 마지막 useEffect의 cleanup 함수 실행: 컴포넌트가 DOM에서 제거될 때, 마지막으로 실행된 useEffect의 cleanup 함수가 호출됩니다.