codinghatso

React에서 폰트 테마(Theme) 적용하기 본문

WEB/React

React에서 폰트 테마(Theme) 적용하기

hatso 2024. 1. 12. 12:28

theme.js

import { createGlobalStyle } from "styled-components";

export const GlobalStyle = createGlobalStyle`
  @import url('https://fonts.googleapis.com/...');

  body{
    font-family: 'Dongle', sans-serif;
    ...
  }
`;

export const theme = {
  colors: {
    ...
  },
  spacing: {
    ...
  },
};

코드의 구조를 살펴보시면 GlobalStyle과 theme를 export 해서 적용시키고자 하는 파일에서 import 해서 사용하면 됩니다.

styled-components 라이브러리를 사용해서 적용시키고자 한다면, 위 코드처럼 적용시키면 됩니다.

문제상황

"Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app."

 

번역 (파파고)

"현재는 프로덕션에서 사용하는 CSSOM API가 잘 처리하지 않으므로 createGlobalStyle에서 @import CSS 구문을 사용하지 마십시오. 대신 react-helmet과 같은 라이브러리를 사용하여 일반적인 <link> 메타 태그를 스타일시트에 주입하거나 간단한 앱을 위해 index.html <head> 섹션에 수동으로 임베딩하는 것이 좋습니다."

 

문제해결

'react-helmet' 라이브러리를 사용하여 해결

  1. 개요
    • react-helmet은 리액트 애플리케이션에서 동적으로 HTML의 head 부분을 조작할 수 있게 해주는 라이브러리입니다.
  2. 문제해결
    • 리액트 애플리케이션에서는 SPA(Single Page Application)로써 렌더링이 클라이언트 측에서 이루어집니다. 이때, SEO(Search Engine Optimization) 및 페이지 공유를 위해 HTML의 head 부분에는 메타태그, 스타일시트 링크, 스크립트 등이 필요합니다.
    • 일반적으로 SPA에서는 서버 측에서 head를 동적으로 변경하기 어려워, 이를 클라잉너트 측에서 관리할 수 있는 방법이 필요했습니다.
  3. 특징과 이점
    • 동적 조작: react-helmet을 사용하면 리액트 컴포넌트 내에서 동적으로 head를 조작할 수 있습니다.
    • 서버사이드 렌더링(SSR) 지원: 서버 측에서도 head를 관리할 수 있어 SEO에 유리하며, SSR에서도 올바르게 동작합니다.
    • 간편한 사용: JSX 문법을 사용하여 head 내용을 선언하므로 코드가 직관적이고 간단합니다.
  4. 기본 개념
    • Helmet 컴포넌트: react-helmet 패키지에서 제공되는 Helmet 컴포넌트를 사용하여 head 부분을 조작합니다.
    • Props: Helmet 컴포넌트의 title, meta, link 등의 속성을 통해 head에 추가할 내용을 정의합니다.
  5. 활용
    • SEO 최적화: 페이지별로 다른 메타태그를 설정하여 검색 엔진 최적화를 수행할 수 있습니다.
    • 소셜 미디어 썸네일: 각 페이지에 맞는 소셜 미디어 썸네일 및 카드 설정이 가능합니다.

예시

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

const MyComponent = () => (
  <div>
    <Helmet>
      <title>페이지 제목</title>
      <meta name="description" content="페이지 설명" />
      <link rel="stylesheet" href="/path/to/styles.css" />
    </Helmet>
    {/* 컴포넌트 내용 */}
  </div>
);

 

추가적으로 발생한 문제해결

react helmet으로 중요한 문제는 해결이 됬지만 하위 컴포넌트에서 폰트가 적용되지 않는 몇몇 문제를 발견했습니다.

여러 이유가 있겠지만 아마 로컬 style을 우선순위가 문제인 걸로 판단했고, 로컬 스타일에서 font-family를 작성하여 해결했습니다.

저작자표시

'WEB > React' 카테고리의 다른 글

React-Hook-Form을 적용시켜보자  (0) 2024.01.18
Transient props란 무엇인가?  (0) 2024.01.17
styled-components를 활용하여 일관된 디자인 시스템을 구축하기  (0) 2024.01.10
useReducer - React Hooks  (0) 2023.11.30
useMemo -React Hooks  (0) 2023.11.09
'WEB/React' Related Articles more
Comments