[React] Styled-Component를 쓰면서 전역 스타일링을 하고 싶을 때(feat. react-helmet)

styled-component를 이용하는 css 방식은 분명 컴포넌트와 함께 작업하기 때문에 직관적이고 좋지만, 글로벌로 스타일을 매기려 하니 답답하였다.

물론, App.js에는

<div className="app"></app>

해당 클래스가 있고, 이 클래스에 styled-component를 적용하면 되긴 하다.

const AppConatainer = styled.div`
	box-sizing : border-box;
`

하지만 전역 스타일링을 컴포넌트 단위로 처리할 수 있다면? 더 styled-component의 느낌을 살릴 수 있지 않을까?

createGlobalStyle

해당 훅을 사용하면 전역 스타일을 설정할 수 있는 styled-component가 만들어진다.

// GlobalStyle.js

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
    *, *::before, *::after {
        box-sizing: border-box;
    }
    body {
        font-family: 'Noto Sans KR', sans-serif;
    }
`;

export default GlobalStyle;

// index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import GlobalStyle from "./Styles/GlobalStyle";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <GlobalStyle />
    <App />
  </React.StrictMode>
);

font도 원래 css에서 받아오는 것처럼 하면 된다. 하지만 본인은 이 방법을 썼다가 React dev tool에서 권고 사항을 받았다.

// Font.js
(이것도 index.js 에서 import 해서 컴포넌트 단위로 쓰면 된다. 하지만 해당 js 파일은 현재는 없고 이전에 썼었다)

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap');
    
    *, *::before, *::after {
        box-sizing: border-box;
    }
    body {
        font-family: 'Noto Sans KR', sans-serif;
    }
`;

export default GlobalStyle;

그 이유는 react에서 CSSOM API를 번들링 production 중에 제대로 불러오지 못한다는 이유 때문이었다. 그래서 react-helmet 훅을 이용해 해당 컴포넌트에 head 처럼 메타 데이터를 걸어줄 수도 있지만, 나는 그냥 index.html의 head 부분에 link 태그를 걸어서 해결하였다.

만약 컴포넌트에서 처리하고 싶다면 해당 블로그를 참조하자
(https://choi95.tistory.com/169)