useEffect 대 useLayoutEffect

언뜻 보기에는 같은 용도로 사용되는 것처럼 보이지만 핵심 원리에 따라 사용 사례에 차이가 있습니다.

useEffect

useEffect은 React 함수 구성 요소에서 99% 사용하는 것입니다. 후크가 안정적이고 후크를 사용하도록 클래스 구성 요소를 리팩터링하는 경우 코드를 componentDidMount , componentDidUpdate 및 componentWillUnmount 에서 useEffect 으로 이동할 수 있습니다.

한 가지 문제는 반응이 구성 요소를 렌더링하고 효과 콜백이 브라우저 페인팅을 차단하지 않도록 한 후에 실행된다는 것입니다. 이는 렌더링 후 componentDidMount 및 componentDidUpdate이 동기적으로 실행되는 클래스 구성 요소의 동작과 다릅니다. 이 방법은 더 성능이 좋으며 대부분의 경우 이것이 원하는 것입니다.

그러나 효과가 (DOM 노드 참조를 통해) DOM을 변경하고 DOM 변경이 렌더링되는 시간과 효과가 변경하는 시간 사이에 DOM 노드의 모양을 변경하는 경우 useEffect을 사용하고 싶지 않습니다. . useLayoutEffect 을 사용하고 싶을 것입니다. 그렇지 않으면 DOM 변형이 적용될 때 사용자가 깜박임을 볼 수 있습니다. 이것은 useEffect을 피하고 대신 useLayoutEffect을 사용하려는 유일한 시간입니다.

useLayoutEffect

이는 React가 모든 DOM 변형을 수행한 직후 동기적으로 실행됩니다. DOM 측정(예: 요소의 스크롤 위치 또는 기타 스타일 가져오기)을 수행한 다음 DOM 변경을 수행하거나 상태를 업데이트하여 동기식 재렌더링을 트리거해야 하는 경우에 유용할 수 있습니다.

스케줄링에 관한 한 이것은 componentDidMount 및 componentDidUpdate 과 동일한 방식으로 작동합니다. 코드는 DOM이 업데이트된 직후에 실행되지만 브라우저가 해당 변경 사항을 "페인트"할 기회를 갖기 전에(브라우저가 다시 페인팅될 때까지 사용자는 실제로 업데이트를 볼 수 없습니다).

요약

useLayoutEffect: DOM을 변경해야 하거나 측정을 수행해야 하는 경우

useEffect: DOM과 전혀 상호 작용할 필요가 없거나 DOM 변경 사항을 관찰할 수 없는 경우(대부분의 경우 이를 사용해야 함).

하나의 특별한 경우

useLayoutEffect 대신 useEffect을 사용할 수 있는 또 다른 상황은 값(예: ref)을 업데이트하고 다른 코드를 실행하기 전에 최신 상태인지 확인하려는 경우입니다.

예를 들어:

const ref = React.useRef()
React.useEffect(() => {
  ref.current = 'some value'
})

// then, later in another hook or something
React.useLayoutEffect(() => {
  console.log(ref.current) // <-- this logs an old value because this runs first!
})

따라서 이와 같은 상황에서 해결책은 useLayoutEffect 입니다.

결론

기본값에 관한 것입니다. 기본 동작은 React가 코드를 실행하기 전에 브라우저가 DOM 업데이트를 기반으로 다시 그리도록 하는 것입니다. 이는 코드가 브라우저를 차단하지 않고 사용자가 DOM에 대한 업데이트를 더 빨리 볼 수 있음을 의미합니다. 따라서 대부분의 경우 useEffect을 사용하십시오.