styled-component의 ThemeProvider

2024. 10. 28. 08:27·개발/FE
목차
  1. 🌿 ThemeProvider란?
  2. 🌿 ThemeProvider 장점
  3. 🌿 ThemeProvider 단점
  4. 🌿 ThemeProvider 특징

🌿 ThemeProvider란?

  • styled-components에서 제공하는 기능으로, 전역적으로 테마를 관리하고 적용할 수 있게 해주는 컴포넌트
  • React의 Context API를 기반으로 만들어져 있어, 하위 컴포넌트들에게 테마 정보를 props 형태로 전달

테마 객체 정의

src/types/themes.ts 파일 생성

export const lightTheme: Theme = {
  colors: {
    background: "#ffffff",
    text: "#000000",
    primary: "#0070f3",
  },
  fontSize: {
    small: "12px",
    medium: "16px",
    large: "20px",
  },
};

ThemeProvider로 래핑

테마를 적용할 컴포넌트에 ThemeProvider를 감싸줍니다.

import { ReactNode } from "react";
import { ThemeProvider } from "styled-components";
import useThemeStore from "@/store/useThemeStore"; // Zustand 스토어 임포트

type StyleProviderProps = {
  children: ReactNode;
};

const StyleProvider = ({ children }: StyleProviderProps): JSX.Element => {
  const { theme } = useThemeStore();

  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};

export default StyleProvider;

styled-component에서 테마 사용

import styled from "styled-components";

export default function Home() {
  const Button = styled.button`
    background-color: ${(props) => props.theme.colors.primary};
    font-size: ${(props) => props.theme.fontSize.medium};
  `;
  return (
    <div>
      <div>여기가 홈이야?</div>
      <Button className="p-2 text-white rounded-md">테마별 버튼 테스트</Button>
    </div>
  );
}

🌿 ThemeProvider 장점

  • 일관성 유지
  • 유지보수 용이성
  • 동적 테마 적용 : 사용자 설정에 따라 테마 동적 변경 가능(ex: 다크 모드)
  • 타입 안정성 : TypeScript와 함께 사용 시, 테마 객체에 대한 타입 정의를 통해 안정성 증가
  • 재사용성

🌿 ThemeProvider 단점

  • 초기 설정 복잡성
  • SSR 설정 : Next.js에서 SSR을 위해 추가 설정이 필요할 수 있다.

🌿 ThemeProvider 특징

  • Context API 기반. Props를 통한 접근
  • 중첩 테마 : ThemeProvider를 중첩 사용할 수 있어, 특정 섹션에 다른 테마를 적용할 수 있다.
  • 함수형 테마 : 테마 값을 함수로 정의해 동적인 테마 적용 가능

사이드프로젝트를 진행하다가 다크/라이트 모드를 적용하고 싶어 알아보던 중 ThemeProvider를 알게되었습니다.

그래서 적용을 하기위해 세팅을 하던 중 내용을 정리해 두고 싶어 간단하게 정리해 보았습니다.

이후 실제로 테마를 적용하고 추가적인 작업 후 내용을 추가할 예정입니다.

 

 

 

'개발 > FE' 카테고리의 다른 글

Monorepo vs. Multirepo: 코드 관리 방식 비교  (0) 2024.11.19
npm vs. pnpm : 패키지 매니저 비교  (0) 2024.11.19
프론트엔드 아키텍처, 방법론, 디자인 패턴  (0) 2024.11.02
코딩앙마 React JS 복습  (1) 2024.10.08
본격적인 공부에 앞서 프론트엔드 복습하기  (2) 2024.10.05
  1. 🌿 ThemeProvider란?
  2. 🌿 ThemeProvider 장점
  3. 🌿 ThemeProvider 단점
  4. 🌿 ThemeProvider 특징
'개발/FE' 카테고리의 다른 글
  • npm vs. pnpm : 패키지 매니저 비교
  • 프론트엔드 아키텍처, 방법론, 디자인 패턴
  • 코딩앙마 React JS 복습
  • 본격적인 공부에 앞서 프론트엔드 복습하기
개발자 화진
개발자 화진
https://github.com/HwajinLee3114
  • 개발자 화진
    lhjin.log
    개발자 화진
  • 전체
    오늘
    어제
    • 분류 전체보기 (31)
      • 개발 (10)
        • FE (9)
        • BE (0)
      • Algorithm (0)
      • 기술면접 (4)
      • 스터디 (14)
        • 사이드 프로젝트 (7)
        • Udemy) NextJS 15 & React (3)
        • Udemy) TypeScript with Reac.. (1)
      • ETC (2)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 인기 글

  • 태그

    코딩앙마
    유데미 스터디
    사이드프로젝트
    pnpm
    lazy loading
    프론트엔드
    ThemeProvider
    supabase
    React
    Zustand
    NextJS
    fe
    아키텍처
    multirepo
    오블완
    Frontend
    javascript
    Typescript
    티스토리챌린지
    멀티레포
    모노레포
    유데미 코리아
    vercel
    인프런
    Next.js
    udemy
    유데미 러닝크루
    자바스크립트
    유데미
    프론트엔드 아키텍처
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
개발자 화진
styled-component의 ThemeProvider

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.