React - useEffect와 useLayoutEffect의 차이점

useEffect

• useEffect는 브라우저가 화면을 그리고 나서 비동기적으로 실행된다.
  => 즉, 컴포넌트의 렌더링이 완료된 이후에 실행된다.
• useEffect 안의 코드는 렌더링 결과를 기다리지 않고 비동기적으로 실행되기 때문에, 렌더링 작업에 영향을 주지 않는다.
• 주로 데이터 가져오기, 구독 설정, 타이머 설정 등의 비동기 작업에 사용된다.
• 렌더링 후에 일어나는 업데이트가 필요한 경우에 사용한다.

useEffect(() => {
  // 비동기 작업 수행
}, [dependency]);

useLayoutEffect

• useLayoutEffect는 useEffect와 비슷하지만, 동기적으로 실행된다.
• 브라우저가 새로운 렌더링을 실행하기 전에 발생한다.
  => useLayoutEffect안의 코드는 브라우저가 화면을 그리기 직전에 실행되기 때문에, 렌더링에 직접적으로 영향을 줄 수 있다.
• useLayoutEffect의 실행시간이 오래 걸리면 화면이 멈추거나 끊기는 현상이 발생할 수 있으므로 주의해야 한다.
• 일반적으로는 useEffect보다 더 세밀한 제어가 필요할 때 사용한다.

useLayoutEffect(() => {
  // 동기 작업 수행
}, [dependency]);

useEffect와 useLayoutEffect의 차이점

보통 대부분의 상황에서는 useEffect를 사용하면 된다.
하지만 렌더링 전에 작업을 수행해야 할 경우에는 useLayoutEffect를 사용한다.
이러한 경우가 드물지만, 화면 레이아웃이 변경되기 전에 렌더링 작업을 수행해야 하는 상황 등에서 사용될 수 있다.