styled-components 라이브러리를 사용하던 중 리렌더링이 될 때마다 글자가 깜빡이는 현상이 발생하였다.
처음에는 다운로드 받은 폰트 파일이 잘못되어 발생하는 오류인 줄 알았는데 이와 같은 걸 FOUT(Flash Of Unstyled Font) 현상이라고 한단다!
FOUT 현상이 발생하는 궁극적인 이유는 styled-components 설정 때문이다. styled-components는 새로운 스타일을 렌더링해야 할 때 <head> 안의 <style> 태그를 변경한다. 다시 말하면, 스타일이 변경될 때마다 폰트를 다시 요청한다는 것이다.
@font-face {
font-family: 'Pretendard';
src: url('@/assets/fonts/Pretendard-Medium.woff2') format('woff2');
font-weight: 500;
}
html {
font-family: 'Pretendard';
font-size: 62.5%;
}
body {
font-family: 'Pretendard';
}
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './styles/font.css';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
전역으로 설정하고 싶은 폰트를 GlobalStyles에 두지 않고 별도의 CSS 파일로 분리하여 적용하면 문제를 해결할 수 있다.
👇🏻 참고
https://tesseractjh.tistory.com/182
[styled-components] 폰트 깜빡임(FOUT) 해결하기
styled-components를 사용할 때, 리렌더링이 일어날 때 글자 폰트가 기본 폰트에서 적용된 폰트로 변경되는 과정이 그대로 보이는 경우가 있다. 이러한 현상을 FOUT(Flash Of Unstyled Font)라고 부른다. FOUT
tesseractjh.tistory.com
https://uhgenie7.github.io/fixed/fout
다크모드 토글 시, 폰트가 깜빡이는 현상 (Feat. Styled-Component) | 지니의 개발 블로그
결론적으로 Styled-Component 설정 문제
uhgenie7.github.io
'개발 > 나의 오류 일지' 카테고리의 다른 글
| [나의 오류 일지] MIME type ('text/html') is not executable (0) | 2024.07.28 |
|---|---|
| [나의 오류 일지] Typescript emitted no output (0) | 2024.07.14 |
| [나의 오류 일지] __dirname is not defined (0) | 2024.07.14 |