useEffect sometimes fires before paint 이 문서는 useEffect가 업데이트 블로킹을 방지하기 위해 그림 이후에 실행될 것으로 예상되는 경우에도 때로는 그림 이전에

useEffect sometimes fires before paint 이 문서는 useEffect가 업데이트 블로킹을 방지하기 위해 그림 이후에 실행될 것으로 예상되는 경우에도 때로는 그림 이전에 실행되는 문제를 탐구합니다. 이 문서는 useLayoutEffect에서 상태를 업데이트하면 같은 렌더링에서 모든 useEffect가 그림 이전에 실행되도록 만들어 레이아웃 효과로 변경된다는 것을 설명합니다. 이는 useEffect에서 상태가 업데이트되는 경우 깜빡임이 발생할 수 있습니다. 이 문서는 이러한 문제를 피하기 위한 실용적인 조언을 제공합니다. 첫째로, 업데이트 후 useEffect에 의존하지 않도록하는 것을 제안합니다. 그러나 새로운 렌더링보다 먼저 실행될 것이 보장됩니다. 둘째로, 앱 성능에 해로운 useLayoutEffect에서 상태를 업데이트하지 않는 것이 좋습니다. 그러나 이러한 것이 항상 가능하지는 않으므로 성능 중요 시나리오에서 상태 업데이트를 우회하고 DOM을 직접 변경하는 것이 좋습니다. 또한, 이 문서는 레이아웃 효과를 분할하는 데 시간을 낭비하면 문제가 해결되지 않을 뿐만 아니라 난잡해질 수 있으므로 주의를 줄 것을 권장합니다. 대신 모든 크기 추적 로직을 하나의 layoutEffect에 유지하는 것이 더 안전하고 깔끔합니다. 마지막으로, 이 문서는 효과에 의존하지 않는 상태 모델을 고안하는 것이 좋지만 도전적인 문제라는 것을 인정합니다.