React Theme 파일 적용하기

Theme파일이란?

: 일반적으로 앱 전체적인 스타일, 색상, 폰트, 각종 스타일 변수 및 설정을 담고 있는 파일을 의미하며, 이 파일을 사용하여 애플리케이션의 디자인과 스타일을 일관성 있게 유지하고 관리할 수 있습니다. 즉 스타일 변수들을 전역변수로 선언하여 사용하기 위한 파일 입니다.

 

제작 방법

1. src 파일 안에 Style 폴더 생성

2. 생성된 Style 폴더 안에 theme.js 파일 생성

 

3. styled-components 설치

$ npm install styled-components

 

4. "createGlobalStyle" 를 사용하여 애플리케이션 전체에 적용되는 스타일 정의

: createGlobalStyle는 HTML의 <style> 태그처럼 동작하며 전역 스타일을 정의하고, 모든 컴포넌트에서 이 스타일을 사용할 수 있도록 작동한다.  저는 웹 폰트를 적용할 때 많이 사용하였습니다! 

export const GlobalStyle = createGlobalStyle`

@font-face {
  font-family: 'Pretendard';
  font-weight: 100;
  font-style: normal;
  src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.eot');
  src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.eot?#iefix') format('embedded-opentype'),
      url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.woff') format('woff'),
      url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.ttf') format("truetype");
  font-display: swap;
}

  body{
      font-family: "Pretendard";
      margin: 0px;
      padding: 0px;
   }

`;

 

5. Theme 변수 생성 후 폰트와 색상 설정하기

디자이너가 작성한 디자인시스템을 기반으로 변수를 설정해줍니다. 이때 다른 파일에서 사용할 수 있도록 꼭 export 해줘야합니다!

export const theme = {
  colors: {
    primary: "#3498db",
    secondary: "#2ecc71",
    accent: "#e74c3c",
    background: "#ecf0f1",
    text: "#2c3e50",
  },
  Web_fontSizes: {
    Header1: "32px",
    Header2: "18px",
    Header3: "24px",
    Header4: "20px",
    Body1: "16px",
    Body2: "14px",
    Body3: "14px",
    Body4: "16px",
    Body5: "14px",
    Body6: "16px",
    Caption1: "12px",
    Caption2: "12px",
    Caption3: "12px",
    Caption4: "16px",
  },
  fontWeights: {
    Header1: "700",
    Header2: "600",
    Header3: "400",
    Header4: "700",
    Body1: "600",
    Body2: "500",
    Body3: "600",
    Body4: "400",
    Body5: "500",
    Body6: "600",
    Caption1: "500",
    Caption2: "600",
    Caption3: "700",
    Caption4: "700",
  },
  LineHeight: {
    Header1: "38px",
    Header2: "22px",
    Header3: "28px",
    Header4: "24px",
    Body1: "20px",
    Body2: "18px",
    Body3: "18px",
    Body4: "20px",
    Body5: "20px",
    Body6: "24px",
    Caption1: "16px",
    Caption2: "16px",
    Caption3: "14px",
    Caption4: "20px",
  },
};

 

6. Theme 변수 사용하기 

: ThemeProvider를 활용하여 하위 컴포넌트에 대해 theme 변수를 전역으로 전달하고, <Header1> 컴포넌트와 같이 props를 통해 theme 파일에서 적용된 내용에 대해 활용할 수 있습니다. 

import React, { useState, useEffect } from "react";
import styled, { ThemeProvider } from "styled-components";
import { theme } from "../../../Style/theme";

// theme 파일 폰트 적용 방법 + style-components 사용
const Header1 = styled.div`
  font-size: ${(props) => props.theme.Web_fontSizes.Header1}; 
  font-weight: ${(props) => props.theme.fontWeights.Header1};
  line-height: ${(props) => props.theme.LineHeight.Header1};
  color: ${(props) => props.theme.colors.secondary};
  font-family: "Pretendard";
`;

const AppHome = () => {

  return (
    <ThemeProvider theme={theme}>
        <div>
          <Header1>홈 모바일 페이지</Header1>
        </div>
    </ThemeProvider>
  );
};

export default AppHome;