useLayoutEffect와 useEffect의 실행 시점

useLayoutEffect는 React가 DOM 변경 사항을 적용한 직후, 브라우저가 해당 변경 사항을 화면에 그리기 전에 동기적으로 즉시 실행됩니다. 브라우저의 관점에서 레이아웃 효과와 DOM 변경 사항은 중단 없이 이어지는 하나의 동기 작업 블록에 해당합니다.

useEffect는 브라우저가 화면에 그리기를 완료한 후 비동기적으로 실행됩니다. 사용자는 먼저 업데이트된 UI를 보고 그다음 효과가 실행됩니다. 따라서 useEffect는 렌더링 성능을 덜 방해하지만, 효과로 인해 화면에 보이는 변경이 발생하면 두 번째 화면 그리기 주기가 일어납니다.

두 효과에 타임스탬프를 기록하면 실행 시점의 차이를 확인할 수 있습니다. useLayoutEffect 안에 console.log('layout', Date.now())를 추가하고, useEffect 안에 console.log('passive', Date.now())를 추가하십시오. 콘솔에서 레이아웃 효과의 타임스탬프가 수동 효과의 타임스탬프보다 항상 더 이릅니다. 이를 통해 실행 순서를 확인할 수 있습니다.

useEffect가 시각적 출력에 영향을 주는 상태를 업데이트하면 사용자는 두 번의 렌더링을 보게 됩니다. 먼저 오래된 상태로 초기 렌더링이 이루어지고, 효과가 실행된 후 수정된 렌더링이 이루어집니다. 이 과정은 화면에 보이는 깜박임이나 재배치로 나타납니다. useLayoutEffect는 브라우저가 아무것도 화면에 그리기 전에 상태 업데이트를 커밋하므로 이러한 현상을 방지합니다.

useLayoutEffect 안에서 setState를 호출하면 React는 화면에 그리기 전에 즉시 또 한 번의 렌더링 및 커밋 주기를 실행합니다. 브라우저는 최종 결과만 화면에 그리므로 사용자는 중간 상태를 보지 못합니다. 이것이 useLayoutEffect의 주요 사용 사례입니다. DOM을 측정하고, 새로운 값을 계산하고, 상태를 설정하여 한 번의 깔끔한 화면 그리기를 보장합니다.

useLayoutEffect는 화면에 그리기 전에 동기적으로 실행되고 추가 렌더링을 유발할 수 있으므로, 과도하게 사용하면 성능이 저하될 수 있습니다. 동기 작업이 무거우면 브라우저가 화면에 그리지 못하도록 차단하여 눈에 보이는 끊김을 일으킵니다. 시각적 깜박임을 방지해야 할 때만 사용하고, 나머지 경우에는 useEffect를 사용하십시오.

React 엄격 모드에서는 개발 환경에서만 마운트할 때마다 useLayoutEffect와 useEffect가 모두 두 번 호출됩니다. 순서는 마운트, 정리, 다시 마운트입니다. 이를 통해 제대로 정리되지 않는 효과를 감지할 수 있습니다. 프로덕션 빌드에서는 이중 호출이 발생하지 않습니다.

항상 기본 선택은 useEffect여야 합니다. 시각적 깜박임이나 잘못된 레이아웃 문제가 실제로 관찰되고 재현될 때만 useLayoutEffect로 전환하십시오. useLayoutEffect를 과도하게 사용하면 브라우저의 화면 그리기 과정을 불필요하게 차단하여 체감 성능을 저하시킬 수 있습니다.

서버 환경에는 DOM이나 브라우저의 화면 그리기 주기가 없으므로 useLayoutEffect는 서버에서 실행할 수 없습니다. 서버에서 렌더링되는 컴포넌트에서 사용하면 React가 경고를 출력합니다. 해결 방법은 효과를 조건부로 건너뛰는 것입니다. typeof window !== 'undefined'를 확인하거나 SSR 호환 코드에는 useEffect로 전환하십시오.

스스로 이렇게 물어보십시오. "이 효과가 사용자가 첫 화면 그리기에서 보게 될 무언가를 변경합니까?" 그렇다면 깜박임을 방지하기 위해 useLayoutEffect를 사용하십시오. 그렇지 않다면 데이터 가져오기, 구독, 분석, 기록 및 대부분의 다른 부수 효과에는 useEffect를 사용하십시오. 이 판단 기준은 실제 개발에서 발생하는 대부분의 사례에 적용됩니다.

useLayoutEffect는 DOM 변경 사항과 동일한 동기 작업 블록에서 실행됩니다. useLayoutEffect가 실행되는 동안 React는 다른 작업, 예를 들어 사용자 이벤트에 대한 응답을 처리할 수 없습니다. 따라서 이 효과는 빠르고 집중적으로 실행되어야 합니다. useLayoutEffect 안에서 오래 실행되는 동기 코드는 브라우저가 화면에 렌더링하는 것을 직접 지연시킵니다.

DOM 변경 사항 및 브라우저의 화면 그리기와 관련하여 useLayoutEffect는 정확히 언제 실행됩니까?

useLayoutEffect는 동기적으로 실행되며 브라우저가 화면에 그리기 전에 실행되므로 DOM 측정과 시각적 수정에 적합합니다. useEffect는 화면에 그린 후 실행되며 데이터 가져오기, 구독 및 대부분의 부수 효과에 적합합니다. useEffect를 기본값으로 사용하고, 시각적 깜박임으로 useLayoutEffect가 필요하다는 것이 확인될 때만 전환하십시오. 별도의 보호 조건 없이 SSR에서 사용하는 것은 피하십시오.