화면 깜빡임(FOUC) 문제해결

FOCU 란 -

에프오씨유는 스타일링이 미쳐 되지 못한 콘텐츠가 스타일 적용이 완료되면서 깜빡거리는 현상이다.

발생하는 상황

1. 참조된 @Import CSS
   CSS 폰트가 로딩이 완료되어, 기본 폰트가 바뀔때 깜빡임 발생

2. JS로 DOM 조작
   화면이 이미 노출된 DOM에서 변경이 일어나면 깜빡임 발생

React에서 FOCU 발생의 예 1

부모의 state가 변하면서, 자식 컴포넌트를 리랜더링 할때
바뀌는 부분은 리랜더링이 옳다.
하지만 바뀌지 않는 부분은 memo를 활용해 리랜더를 방지하자

• useEffect 및 useLayoutEffect 차이

• useEffect
  랜더가 화면에 그려진 이후 비동기적으로 실행
  용도 : 페이지의 시각적요소를 바꾸지 않는 무언가를 동기화 할때
  이벤트 핸들러 재설정
  백그라운드 데이터 Push/Poll
  일부 state변경해도 랜더할 필요가 없는 경우

• useLayoutEffect
  랜더링 후 화면이 업데이트 되기 전에 동기적으로 실행
  복잡한 연산을 하게 되면 화면에 그리는 시간이 느려진다.
  깜빡거리는 현상을 제거 할 수 있다.
  ( 깜빡이는 현상을 제공하는 함수를 그리기전에 처리하므로 )

• useLayoutEffect 언제 사용 ?

1. 랜더링 직후 돔 요소의 값을 읽을 때
2. 조건에 따라서 컴포넌트를 리랜더링 할때

React에서 FOCU 발생의 예 2

가정

1. Webpack을 사용하여 SCSS 를 CSS로 (sass loader)
2. CSS 를 js로 번들링 ( css loader )
3. 이때, sourceMap True 옵션으로 작동
4. Blob( 데이터의 크기(Byte) 및 MIME 타입을 알아내거나, 데이터를 송수신을 위한 작은 Blob 객체로 나누는 등의 작업에 사용된다) 으로 분리되어진 JS 여러개가 출력된다.
5. 그래서 분리된 CSS를 호출할때 마다, FOCU 현상이 나오게 된다.

ref

https://webdir.tistory.com/416

https://velog.io/@dev_hikun/React-%EB%A0%8C%EB%8D%94%EC%8B%9C-%EA%B9%9C%EB%B9%A1%EA%B1%B0%EB%A6%BC-%ED%95%B4%EA%B2%B0-Trouble-shooting

https://p-iknow.netlify.app/front-end/fouc-when-using-css-loader-sourceMap