[TS] 초기세팅

먼저 타입스크립트를 다운로드 한다

create-react-app 홈페이지에서 타입스크립트 추가 및 생성하는 방법을 찾아 볼 수 있다.

• 새로 파일을 생성할땐,
  npx create-react-app my-app --template typescript
• 타입스크립트만 추가로 다운로드 받을땐,
  npm install --save typescript @types/node @types/react @types/react-dom @types/jest

이때 주의해야할 점은, 파일 확장자명도 .ts(타입스크립트만).tsx(타입스크립트 + 리액트) 로 같이 수정을 해주어야한다.
그리고 타입스크립트를 기반으로 만들어지지 않은 라이브러리는 에러가 나기때문에 타입스크립트 기반으로 만든 버전을 install 해야한다
npm i --save-dev @types/styled-components

스타일드 컴포넌트를 타입스크립트랑 연결한다

스타일드 컴포넌트 홈페이지에서 나온 방법을 적용해 보자

• 앞서 @types/styled-components 파일을 설치 해줬으므로 두번째 단계로 바로 넘어간다
• 이미 declaration 파일이 존재하지만 theme를 활용하기 위해서 이 파일을 확장해주어야하므로 styled.d.ts 을 만든다(확장자명이 d.ts)
• 만든파일에 해당 템플릿을 붙여넣고 변경할 부분들은 변경한다

// import original module declarations
import 'styled-components';

// and extend them!
declare module 'styled-components' {
  export interface DefaultTheme {
    borderRadius: string;

    colors: {
      main: string;
      secondary: string;
    };
  }
}

타입스크립트에 대한 선언(선언파일: 타입스크립트를 위한 일종의 설명 파일)이 없는 패키지를 사용할 때

• 터미널에 npm i --save-dev @types/패키지명을 입력해 보거나
• 유명한 라이브러리들을 모아놓은 Definetely Typed 레포지토리에서 다운로드 가능하다.

theme.ts 파일을 작성한다

이 파일에 내가 작업할 테마들의 색상을 지정한다.

import { DefaultTheme } from "styled-components";

export const lightTheme: DefaultTheme = {
  bgColor: "whitesmoke",
  textColor: "#222",
  btnColor: "teal",
};

export const darkTheme: DefaultTheme = {
  bgColor: "#222",
  textColor: "whitesmoke",
  btnColor: "tomato",
};

index.tsx 파일로 넘어와서

App 컴포넌트를 ThemeProvider 컴포넌트로 감싸고 theme 오브젝트를 작성해 준다.

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

const rootElement = document.getElementById("root");
if (!rootElement) throw new Error("Failed to find the root element");
const root = ReactDOM.createRoot(rootElement);

root.render(
  <React.StrictMode>
    <ThemeProvider theme={darkTheme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

ThemeProvider로 감싸준 컴포넌트에서는 props로 theme에 접근할 수 있게 된다

이제 테마에 작성한 색들을 App.tsx 하위의 모든 컴포넌트에서 props로 받아와 자유롭게 사용할 수 있다

import styled from "styled-components";

function App() {
  const Container = styled.div`
    background-color: ${(props) => props.theme.bgColor};
  `;
  const H1 = styled.h1`
    color: ${(props) => props.theme.textColor};
  `;
  
  return (
    <Container>
      <H1>fully protected</H1>
    </Container>
  );
}

export default App;

자바스크립트와 동일한 방식으로 작동하지만 theme을 타입화 해줌으로써 완전히 보호할 수 있다.

보통 App 컴포넌트에는 createGlobalStyle을 사용하여 css 초기세팅을 잡아주는 것만 하고 컴포넌트를 분리하는것이 깔끔하다

import { createGlobalStyle, ThemeProvider } from "styled-components";
import { darkTheme } from "./thems";

const GlobalStyle = createGlobalStyle`
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400&display=swap');
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
    display: none;
}
* {
  box-sizing: border-box;
}
body {
  font-weight: 300;
  line-height: 1.2;
  font-family: 'Source Sans Pro', sans-serif;
  background-color: ${(props) => props.theme.bgColor};
  color: ${(props) => props.theme.textColor};
}
menu, ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
`;

function App() {

  return (
    <>
      <GlobalStyle />
    </>
  );
}

export default App;