[react] 컬러 팔레트 및 테마 정의

26 Dec 2023

react

React 애플리케이션에서 일관된 디자인을 유지하고 재사용 가능한 UI 구성요소를 만들려면 컬러 팔레트와 테마가 중요합니다. 이 블로그 포스트에서는 React 애플리케이션에서 컬러 팔레트와 테마를 어떻게 정의할 수 있는지에 대해 살펴보겠습니다.

1. 컬러 팔레트 정의

컬러 팔레트는 애플리케이션에서 사용할 수 있는 색상 집합을 정의합니다. 보통 기본 색상, 텍스트 색상, 배경색, 경계선 색상 등을 포함합니다.

const colors = {
  primary: '#007bff',
  secondary: '#6c757d',
  success: '#28a745',
  warning: '#ffc107',
  danger: '#dc3545',
  text: '#212529',
  background: '#f8f9fa',
  border: '#ced4da',
};

위의 예시에서는 colors 객체에 주로 사용하는 색상을 키-값 쌍으로 정의했습니다.

2. 테마 정의

테마는 컬러 팔레트와 같은 디자인 요소뿐만 아니라, 폰트 사이즈, 패딩 값, 그림자 효과와 같은 요소들을 포함합니다.

const theme = {
  colors: {
    ...colors,
  },
  fonts: {
    body: 'Roboto, sans-serif',
    heading: 'Poppins, sans-serif',
  },
  spacing: {
    small: '8px',
    medium: '16px',
    large: '24px',
  },
  shadows: {
    small: '0 2px 4px rgba(0, 0, 0, 0.1)',
    medium: '0 4px 8px rgba(0, 0, 0, 0.1)',
  },
};

위의 예시에서는 theme 객체에 컬러 팔레트 및 기타 디자인 요소를 정의했습니다.

3. 테마 적용

React에서는 주로 Context API 나 CSS-in-JS 라이브러리를 사용하여 테마를 정의하고 적용합니다.

// ThemeContext.js
import React from 'react';

export const ThemeContext = React.createContext(theme);

위의 예시는 Context API를 이용하여 테마를 프로바이딩하는 방법을 보여줍니다.

이제 정의한 테마를 사용하여 React 애플리케이션을 스타일링하고, 일관된 디자인을 적용할 수 있습니다.

이것은 React에서 컬러 팔레트와 테마를 정의하고 적용하는 간단한 방법에 대한 소개였습니다. 일관된 사용자 경험을 제공하고 유지보수성을 높이기 위해 컬러 팔레트와 테마를 활용하는 것은 매우 중요합니다.

1. 컬러 팔레트 정의

2. 테마 정의

3. 테마 적용

참고 자료