6_useEffect 실행 순서

 

useEffect 훅은 함수 컴포넌트가 렌더링될 때마다 특정 작업을 수행하거나 호출되는데, 컴포넌트의 상태나 속성(props) 값이 변경될 때 두 가지 상황에서 실행됩니다. 

1. 초기 렌더링(initial render):

컴포넌트가 처음 렌더링될 때 useEffect 훅이 실행됩니다. 이때 useEffect의 두 번째 매개변수로 전달된 배열(dependency array)의 값이 비어 있거나, 배열이 전달되지 않은 경우입니다. 이때 useEffect 훅은 컴포넌트가 화면에 처음 렌더링될 때 한 번만 실행됩니다.

2. 의존성 배열(dependency array)의 값이 변경될 때:

useEffect의 두 번째 매개변수로 전달된 배열(dependency array)에 포함된 값이 변경될 때마다 useEffect 훅이 다시 실행됩니다. 이때 배열에 포함된 값 중 하나라도 변경되면 useEffect 훅이 실행됩니다.

useEffect 훅은 컴포넌트의 렌더링이 완료된 직후에 실행되며, 기본적으로 렌더링 작업이 끝난 후에 비동기로 처리됩니다. 만약 useEffect 훅 안에서 비동기 작업을 수행하고, 해당 작업이 완료된 후에 화면을 업데이트하고 싶다면, useEffect의 콜백 함수 안에서 비동기 작업을 수행하고 그 안에서 상태를 업데이트하면 됩니다.