React 애플리케이션을 개발하다 보면 사용자 정의 테마 기능이 필요한 경우가 많습니다. 테마를 쉽게 관리하고 전환할 수 있는 테마 라이브러리를 활용하면 이를 간단하게 구현할 수 있습니다. 이번 글에서는 React Theme UI 라이브러리를 사용하여 리액트 애플리케이션에 테마를 적용하는 방법에 대해 알아보겠습니다.

React Theme UI란?

React Theme UI는 리액트 애플리케이션에서 테마를 쉽게 관리하기 위한 라이브러리입니다. CSS-in-JS 라이브러리인 Emotion과 함께 사용하여, 컴포넌트 기반으로 테마를 적용하고 관리할 수 있습니다.

React Theme UI 설치

먼저, React Theme UI를 설치합니다. npm을 사용하는 경우 아래 명령어를 실행합니다.

npm install theme-ui @emotion/react @emotion/styled

또는 yarn을 사용하는 경우 아래 명령어를 실행합니다.

yarn add theme-ui @emotion/react @emotion/styled

테마 적용하기

이제, 테마 파일을 작성하고 적용하는 방법에 대해 알아보겠습니다. 먼저, 테마 파일을 작성합니다.

// theme.js

export default {
  colors: {
    text: '#333',
    background: '#fff',
    primary: '#07c',
  },
  fonts: {
    body: 'Arial, sans-serif',
    heading: 'Roboto, sans-serif',
  },
};

위와 같이 theme.js 파일을 작성한 후, 다음과 같이 테마를 적용할 컴포넌트에서 ThemeProvider를 이용하여 적용합니다.

// App.js

import { ThemeProvider } from 'theme-ui';
import theme from './theme';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <div>
        {/* 여기에 테마를 적용할 컴포넌트들을 넣는다. */}
      </div>
    </ThemeProvider>
  );
}

export default App;

테마 전환하기

React Theme UI를 사용하면 테마를 쉽게 전환할 수 있습니다. 사용자가 테마를 변경할 때마다 ThemeProvider의 theme prop을 변경하여 테마를 전환합니다.

// ThemeSwitcher.js

import { useColorMode, Button } from 'theme-ui';

export default function ThemeSwitcher() {
  const [colorMode, setColorMode] = useColorMode();
  return (
    <Button
      onClick={() => setColorMode(colorMode === 'default' ? 'dark' : 'default')}
    >
      Toggle {colorMode === 'default' ? 'Dark' : 'Light'}
    </Button>
  );
}

위와 같이 useColorMode 후킹을 사용하여 간단히 테마를 전환할 수 있습니다.

결론

이제, React Theme UI를 사용하여 리액트 애플리케이션에 쉽게 테마를 적용하고 전환하는 방법에 대해 알아보았습니다. React Theme UI를 통해 사용자 정의 테마를 쉽게 관리할 수 있다는 장점을 활용하여, 보다 사용자 친화적인 애플리케이션을 개발할 수 있습니다.

참고: React Theme UI 공식 문서