[React] 폰트 깜빡임 현상 해결(Global Style, CSS)

프로젝트 진행 중
폰트 적용이 늦어지는 깜빡임 현상을 해결한 과정을 기록하려고 한다.

문제 상황

위에서 말했듯

컴포넌트가 렌더링 될 때마다 폰트 적용이 늦어져 깜빡임 현상이 일어났다.

 

처음에는 리렌더링을 막는 방향으로 해결해보려고 했다.

메모제이션을 사용하고, 관련 문서들을 찾아보며 리팩토링 해봤지만 해결되지 않았다.

 

근본적인 문제가 폰트 관련 문제이므로

폰트 적용에 문제가 있는 것이 아닌가 생각이 들었다.

해결 전

원래 폰트 적용은 styled-components의 GlobalStyle을 이용해 적용했다.

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';
import GangwonEdu_OTFBoldA from './GangwonEdu_OTFBoldA.woff';

export const GlobalStyle = createGlobalStyle`
  ${reset};
  *, *::before, *::after {
    box-sizing: border-box;
  }
  body{
    margin : 0;
    padding:0;
    font-family: 'GangwonEdu_OTFBoldA';
  }
  @font-face {
    font-family: 'GangwonEdu_OTFBoldA';
    src: url(${GangwonEdu_OTFBoldA}) format('woff')
  }
`;

위와 같이 폰트를 적용했을 때 문제점은

폰트를 사용하는 컴포넌트가 리렌더링 될 때마다 폰트 파일을 불러온다는 것이다.

위 사진과 같이 폰트 파일을 불러오는 시간 때문에 폰트가 깜빡이는 것이 아닐까 생각했다.

그래서 폰트 적용을 GlobalStyle이 아닌 css파일로 적용해 봤다.

해결 후

//GlobalFont.css
@font-face {
  font-family: 'GangwonEdu_OTFBoldA';
  src: url('./GangwonEdu_OTFBoldA.woff') format('woff');
}

위와 같이 GlobalFont.css 파일에서 폰트 파일을 불러오고,

GlobalStyle에서 body에 폰트를 적용했다.

 

그랬더니 한 번 폰트를 불러온 이후

리렌더링 될 때마다 폰트를 불러오는 작업이 사라졌고,

폰트 깜빡임 현상을 해결할 수 있었다.

마치며

앞으로 막히는 것들을 해결하는 과정도 모두 기록해보려고 한다.

 

잘못된 정보에 대한 피드백은 환영입니다.

감사합니다.