리액트 프로젝트에 웹 폰트 적용할 때 GlobalStyles의 문제점

문제

import {createGlobalStyle} from 'styled-components';
import reset from 'styled-reset';

const GlobalStyles = createGlobalStyle`
    ${reset};

	( ... )
    
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');

	( ... )
}
`;

export default GlobalStyles;

어플리케이션 레벨 스타일상에서 공통 웹 폰트를 사용하기 위해 다음과 같이 styled-components의 createGlobalStyle 내에서 import문을 통해 폰트를 적용해주었다.

 

dev-server를 통해 import한 웹 폰트가 문제 없이 적용됨을 확인하였지만, 아래와 같은 Warning Message가 콘솔 창에서 계속 나왔다.

Waring Message

요지는 @import CSS 구문을 createGlobalStyle 상에서 사용하는 것을 권장하지 않다는 내용이었다.

(번들링 production 단계에서는 CSSOM 관련 APIS를 제대로 컨트롤할 수 없기 때문이다)

 

이에 createGlobalStyle를 대신하여 React helmet으로 리팩토링하고자 했다.

 

Refactor_helmet을 통한 웹 폰트 전역 적용

https://www.npmjs.com/package/react-helmet

react-helmet

This reusable React component will manage all of your changes to the document head.

react-helmet을 사용하면 각 컴포넌트의 헤더 부분에 메타 데이터를 적용할 수 있다.

 

이에 HelmetComponent를 다음과 같이 따로 분립해주어, Root Component 상에서 import하여 사용해주었더니 문제 없이 웹 폰트를 전역적으로 사용할 수 있었다.

import React, {Component} from 'react';
import {Helmet} from 'react-helmet';

class HelmetComponent extends Component {
    render() {
        return (
            <Helmet>
        <link rel="icon" href="./img/instagram.png"/>
        <link rel="preconnect" href="https://fonts.googleapis.com"/>
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
        <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"/>

        <link rel="preconnect" href="https://fonts.gstatic.com"/> 
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"/>

        <script src="https://kit.fontawesome.com/3090fba733.js" crossorigin="anonymous"/>
            </Helmet>
        )
    }
}

export default HelmetComponent; //별도 컴포넌트로 생성

	( ... )

class App extends Component {
  render() {
    return (
      <>
      <HelmetComponent/> //Root Component에 적용
      <Router>
        <Switch>
        <Route exact path='/' component={Login}/>
        <Route exact path='/main' component={Main}/>  
        </Switch>
      </Router>
      </>
    )
  }
}

export default App;

 

common style로 import

createGlobalStyle이나 helmet을 사용하지 않고 다음과 같이 common style에 전역적으로 선언해주어도 웹 폰트를 프로젝트 상에서 똑같이 사용할 수 있음을 확인하였다.

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

* {
  box-sizing: border-box;
}

	( ... )