<aside> 📌 2021-03-16. 문제가 됐던 상황

</aside>

Blob으로 불러온 이미지가 렌더가 일어 날 때마다 깜빡거렸다.

<aside> 💡 FOUC (Flash of Unstyld Content, 링크 사라짐)

</aside>

이 에러를 해결하다 알게 된 단어인데, 무언가 처리되면서 DOM 요소가 반짝 거릴 경우를 FOUC라고 하는데, css의 스타일이 적용이 안되었는데 화면이 표시되거나 웹 폰트 등이 로딩이 되지 않았을 때 발생하는 화면 깜빡임을 말한다. 이번에는 useEffect에 의해 해당 깜빡임이 있었음을 알게 되었다.

하지만 useEffect는 사용도 안하고 "찾았다!" 생각하고서는 글 쓰다가 아랫쪽에 React.memo를 사용했음을 알린다.

<aside> ℹ️ useEffect vs useLayoutEffect

</aside>

• useEffect

  • 렌더가 화면에 그려진 후 비동기적으로 실행

    ✨ 일부 state를 즉시 바꿔 렌더할 필요가 없을 경우

    ✨ 페이지에 시각적으로 영향을 주지 않는 무언가를 동기화 할 경우

    ✨ 이벤트 핸들러를 설정하는 경우

    ✨ 모달 상자가 나타나거나 사라질 때 일부 상태를 재설정하는 경우

• useLayoutEffect

  • 렌더링 후 화면이 업데이트 되기 전에 동기적으로 실행

    ✨ state가 업데이트 될 때 요소가 깜빡이는 경우

    ✨ DOM을 변경하려는 경우