TIL31, React: Styled Component Themeprovider 를 araboza.

스타일 컴포넌트는 알겠는데 themeprovider는 뭐야?

---

Themeprovider

styled component 패키지 에서 제공하는 컴포넌트이다. 단어 의미 그대로, theme 을 제공하는 친구.

마치 react-router-dom 에서 Browserrouter 와 비슷하다. Browserrouter 는 최상단에서 하위 컴포넌트를 감싸, 하위 컴포넌트들에게 router 의 다양한 기능을 제공해준다.

Themeprovider 또한 최상위에서 하위 컴포넌트들을 감싸, 모든 하위 컴포넌트들에게 특정한 기능을 제공한다.

import React from "react";
import ReactDOM from "react-dom";
import Routes from "./Routes";
import GlobalStyle from "./styles/GlobalStyle";
import { ThemeProvider } from "styled-components";
import theme from "./styles/Theme";

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Routes />
    <GlobalStyle />
  </ThemeProvider>,
  document.getElementById("root")
);

그 제공하는 기능이 무엇이냐. 바로 theme 이다.

Themeprovider 는 theme 이라는 프롭스를 받는다. theme 은 객체인데, 이 객체는 공통 스타일에 대한 정보를 담는다. 예로,

const theme = {
  fontSizeSupersmall: "12px",
  fontSizeExtrasmall: "13px",
  fontSizeSmall: "14px",
  fontSizeRegular: "15px",
  fontSizeMedium: "16px",
  fontWeightLight: "200",
  fontWeightRegular: "300",
  fontWeightMedium: "400",
  fontWeightBold: "600",
  fontColorLightgray: "#bdbdbd",
  fontColorGray: "#909090",
  fontColorBlack: "#191919",
  fontColorLighterblack: "#333",
  fontColorLightblue: "#bbd6ed",
  fontColorBlue: "#1e93f2",
  primaryColor: "#ff395c",
  bgColorGray: "#f7f7f7",
  borderColor: "#f8f9fa",
};

그래서Themeprovider 를 통해 한번 theme 을 제공하면, 하위 컴포넌트에서는 부가적인 import 없이, 바로 props 를 통해 theme 에 담겨있는 스타일 정보에 접근 가능하다.

const Nav = styled.nav`
  ${flexAlignCenter}
  justify-content: space-between;
  height: 80px;
  padding: 20px 20px;
  color: ${props => props.theme.primaryColor}; // 이런식으로 !
`;

---

스타일 컴포넌트. 처음에는 삭제하고 싶었지만, 이 녀석 생각보다 괜찮은 것 같다.