useLayoutEffect를 사용했습니다.

예 예…이 오해의 고리를 사용했습니다.
단순화합시다.

useLayoutEffect와 useEffect의 차이점은 각 후크가 실행되는 시점입니다.

React의 라이프사이클:

UI와 상호 작용하는 사용자에 대한 반응으로 상태가 변경됩니다.

useLayoutEffect가 실행됩니다.

브라우저가 변경 사항을 그립니다. 즉, 사용자에게 변경된 UI가 표시됩니다.

useEffect가 실행됩니다.

보시다시피 useLayoutEffect 는 useEffect 보다 먼저 발생하고 더 중요한 것은 브라우저가 UI의 변경 사항을 나타내기 전에 발생합니다.
이것이 깜박이는 UI 문제에 대한 해결책이 useEffect에서 useLayoutEffect로 전환된 이유입니다.

언제 useLayoutEffect를 선호해야 합니까?

DOM을 업데이트하고 초기 마운트에서 UI를 시각적으로 변경해야 하는 경우 useLayoutEffect 를 사용해야 합니다.

다음은 내가 가진 깜박임 문제를 해결하기 위해 useLayoutEffect를 사용한 실제 사례의 근사치입니다.

고장:

click 버튼을 누르면 상태가 초기 상태로 재설정됩니다.

In the real example I didn't press a button to initialize the state, the component unmounted and then mounted again which caused the state to re-intialize and the UI to flicker.

상태가 초기 상태와 같으면 The number is: [number] 텍스트가 표시되지 않습니다.

{displayedNumber && <div> The number is: {displayedNumber}</div>}

이것은 깜박임의 원인이 되는 선입니다. 동시에 displayedNumber 상태를 (useEffect의) 숫자와 동일하게 업데이트하기 때문입니다.
따라서 텍스트를 빠르게 제거하고 반환하여 UI가 깜박입니다.
useEffect를 사용할 때 브라우저가 페인트한 후에 발생하기 때문에 UI 깜박임이 있습니다.


useLayoutEffect를 사용할 때 브라우저가 페인트되기 전에 UI 깜박임이 발생하지 않습니다.