[React] styled component (5) _ theme with TS

타입스크리트와 테마

// index.tsx

import React from "react";
import ReactDOM from "react-dom";
import { ThemeProvider } from "styled-components";
import App from "./App";
import { darkTheme, lightTheme } from "./theme";

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={darkTheme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

우선 ThemeProvider 가 들어가는 index.tsx를 보자.
이전에 봤던것과 마찬가지로 App 컴포넌트를 감싸고 있고 theme 이라는 인자를 받는다.

타입스크립트를 사용할 때 항상 고려해야 하는 것은 어떤 타입으로 내 코드를 보호하고 검증할지 생각하는 것이다.

그럼 ThemeProvider 가 존재하는 styled-components 파일을 봐야한다.

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/styled-components/index.d.ts

@styles/styled-components 의 타입 명세라고 생각하면 되겠다.

일일히 뜯어보진 못하겠지만 중요하게 봐야할 부분은 297번~ 인것같다.
중요한 것은 이 명세 안에 우리가 직접 지정할 theme, 예를들면 lightMode나 darkMode의 타입 명세같은건 없다는 것이다.

정확히 말하면 위 깃험 링크의 명세는 ThemeProvider가 어떻게 React와 일하게 되는지 타입스크립트에게 설명해주는 것과 같다.

따라서 우리는 이 모듈에 우리가 쓰고자하는 theme types를 추가하여 사용해야한다.

//styled.d.ts

import "styled-components";

declare module "styled-components" {
  export interface DefaultTheme {
    textColor: string;
    bgColor: string;
  }
}

위와 같이 우리가 사용할 속성을 추가한 DefaultTheme을 export 해줬다.
위 깃헙 명세에를 잠깐 보면 DefaultTheme 이라는 것은 빈 배열로 정의된 interface로 여러 매서드들의 제네릭 타입으로서 쓰인다.

이렇게 DefaultTheme을 사용하고자 하는 타입으로 만들어줬으면 그 타입에 맞춘 styled-component 모듈을 사용할 준비가 된 셈이다.

이 과정 후에 DefaultTheme 타입으로 theme 객채의 속성을 정의해주면 된다.

//theme.ts
import { DefaultTheme } from "styled-components";

export const lightTheme: DefaultTheme = {
  bgColor: "white",
  textColor: "black",
  btnColor: "tomato",
};

export const darkTheme: DefaultTheme = {
  bgColor: "black",
  textColor: "white",
  btnColor: "teal",
};

이제 index.tsx에서 Theme-Provider를 사용할 준비가 끝났다.