ThemeProvider를 왜 사용할까? 🧐

 

팀 프로젝트를 진행하며 공통 color를 정의해 놓고 쓰기로 하였다.

우리 팀은 styled-components를 사용하고 있는데

구글링을 통해 ThemeProvider를 통해 전역에서 공유할 수 있다는 내용을 접하고 바로 적용해 보기로 했다.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import { ThemeProvider } from 'styled-components';
import { theme } from './styles/theme.js';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </StrictMode>
);

 

최상단에서 <ThemeProvider>로 children을 감쌌다.

그런데 갑자기 든 의문.. 

어쨌든 theme.js 자체를 export 했고

사용처에서 import해서 필요할 때 바로바로 사용할 수도 있는 거 아닌가?

색상을 변경한다고 하더라도 theme.js 안에 코드를 수정하니까 사용하고 있는 곳은 다 같이 수정될 거 아냐?

근데 왜 굳이 ThemProvider를 써야하지..? 🤔

 

그래서 ThemeProvider를 사용해야 하는 이유를 찾아봤다.

---

 

✨ ThemeProvider를 사용하는 이유

---

1.  React Context 활용

ThemeProvider는 내부적으로 React Context API를 활용한다.

따라서 컴포넌트 트리 내의 모든 자식 컴포넌트들에게 자동으로 값을 전달할 수 있다.

이를 통해서 하위 컴포넌트들은 theme.js 파일을 일일이 import하지 않아도 쉽게 theme에 접근하여 값을 사용할 수 있다.

2.  동적 테마 변경

ThemeProvider를 사용하면 동적으로 테마를 쉽게 변경할 수 있다.

예를 들어 다크 모드 / 라이트 모드를 전화하고 싶다면 ThemeProvider의 theme의 값을 동적으로 변경할 수 있다.

이 변경이 자동으로 모든 자식 컴포넌트에 적용되기 때문에

테마를 변경할 때 import한 theme.js를 일일이 수정할 필요 없이 컴포넌트 상태나 컨텍스트를 통해 쉽게 적용할 수 있다.

 

3. 테마 값 관리의 일관성

theme.js에서 theme 값을 직접 관리하고 import해서 사용하는 방식은 작은 프로젝트에서는 괜찮지만 프로젝트 규모가 커질수록 복잡해질 수 있다. 여러 컴포넌트에서 import를 반복하게 되고, 이 값들이 중복되거나 관리가 어려워질 수 있다.

ThemeProvider는 그런 문제를 방지하고, 전역적으로 테마를 일관되게 관리할 수 있도록 도와준다.

 

---

 

일단 이유를 정리는 해봤는데 사실 크게 와닿지가 않았다.

동적 테마 변경?

export const lightTheme = {
  background: "#fff",
  color: "#000",
};

export const darkTheme = {
  background: "#000",
  color: "#fff",
};

 

이렇게 theme.js에 정의되어 있다고 가정하고

다른 컴포넌트에서 사용할 때

export default function Component () {
  const [isDark,setIsDark] = useState(false);
  return(
    <h1 style={{ color : isDark ? theme.colors.dakr : theme.colors.light}}>Hello!</h1>
    <button>{isDark ?'다크' :'라이트'}모드 전환</button>
  )
}

 

이렇게 사용될 텐데 이것도 동적 테마 변경이 되는 거 아닌가?

라고 생각했다.

 

아무리 생각해도 이해가 되지 않아 chatGPT에게 예시를 만들어 달라고 요청했다.

---

✨ ThemeProvider 예시

---

export const lightTheme = {
  background: "#fff",
  color: "#000",
};

export const darkTheme = {
  background: "#000",
  color: "#fff",
};

import { createContext, useContext, useState } from "react";
import { lightTheme, darkTheme } from "./theme";

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [isDark, setIsDark] = useState(false);
  const theme = isDark ? darkTheme : lightTheme;

  return (
    <ThemeContext.Provider value={{ theme, isDark, setIsDark }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);

import { ThemeProvider } from "./ThemeContext";
import MyComponent from "./MyComponent";

const App = () => {
  return (
    <ThemeProvider>
      <MyComponent />
    </ThemeProvider>
  );
};

export default App;

import { useTheme } from "./ThemeContext";

const MyComponent = () => {
  const { theme, setIsDark, isDark } = useTheme();

  return (
    <div style={{ background: theme.background, color: theme.color }}>
      <button onClick={() => setIsDark((prev) => !prev)}>
        Toggle Theme
      </button>
      <p>Hello, Theme!</p>
    </div>
  );
};

export default MyComponent;

 

코드를 보니 단번에 이해가 되었다.

 

라이트 / 다크 테마 모드는 모든 페이지에 영향을 미치는데

일일이 import해서 사용할 경우 모든 컴포넌트 내부에서 테마 모드에 대한 state를 관리해줘야 한다.

 

하지만 ThemeProvider를 사용하면 Provider 함수 내부에서 state를 만들어 관리하고

전역 상태에서 사용할 수 있기 때문에 코드가 훨씬 더 간결하고 유지보수도 편하다.

---

 

아하! contextAPI처럼 작동하는구나~

그러면 contextAPI로 구현해도 되는데 왜 ThemeProvider를 쓸까? 🤔

---

✨  styled-components의 ThemeProvider vs Context API

---

styled-components 같은 CSS-in-JS 라이브러리에서는 자체적인 ThemeProvider를 제공하는데, 이게 Context API와 거의 동일한 역할을 한다. 하지만 다음과 같은 차이가 있다.

 

✅  styled-components의 ThemeProvider 장점

• styled-components는 자동으로 theme 값을 props.theme 형태로 전달해 주기 때문에 스타일 정의가 훨씬 깔끔해진다.

const Home = () => {
  return <StHome>hello</StHome>;
};

export default Home;
const StHome = styled.div`
  background-color: ${(props) => props.theme.colors.primary};
`;

 예를 들면 위와 같이 에 background-color를 props로 직접 전달해 주지 않아도 theme에 접근하여 사용이 가능하다.

 

• styled-components 내부적으로 "스타일 캐싱"과 "스타일 재사용"을 자동으로 관리하기 때문에 스타일 변경만 감지하고 컴포넌트 자체는 리렌더링이 되지 않아 성능에 더 좋다.
• css-in-js 방식과 자연스럽게 어울려서 사용이 편리함.

❌  Context API만으로 스타일을 관리할 때의 단점

• styled-components, Emotion, MUI 등의 테마 시스템과 통합하기 어렵다 → 해당 라이브러리들은 기본적으로 ThemeProvider를 사용하도록 설계되어 있음.
• 리렌더링 비용이 증가할 수 있다 → theme 값이 바뀔 때, Context를 사용하는 모든 컴포넌트가 리렌더링 될 수 있음. (React의 useContext는 값이 바뀌면 해당 Context를 구독하는 모든 컴포넌트를 다시 렌더링함)
• CSS-in-JS 방식보다 코드가 지저분해질 수 있다 → style={{ color: theme.color }} 같은 인라인 스타일을 계속 써야 해서 스타일 코드가 길어지고 가독성이 떨어질 수 있음.

---

 

여기까지 ThemeProvider에 대해 알아보았다.

역시 다 존재의 이유가 있다(?)

styled-components는 처음 사용해 보는데 오늘을 기점으로 좀 더 친해졌으면 좋겠다..😅