TypeScript + React

TypeScript 의 사용 예시

Javascript의 사용

 

TypeScript의 사용

 

보다시피 TypeScript에서는 a : number , b:number을 사용하도록 하여 애초에 실행되지 않고 오류를 알려주는 약간의 보호장치 역할을 한다. 반면에 javascript에서는 지정된 type이 없다보니 실행할 수 있다면 개발자의 의도와 상관없이 실행된다.

 

리액트에서의 TypeScript 설치법

1.npx로 create-react-app 을 만들 때 typescript로 설정하는 방법

npx create-react-app my-app --template typescript

# or

yarn create react-app my-app --template typescript

 

2.만약 react 파일이 있고 나중에 typescript를 사용하는 경우 ( 리액트앱을 새로 만들기 싫은 경우)

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

# or

yarn add typescript @types/node @types/react @types/react-dom @types/jest

 

npm 으로 설치해준 뒤 사용하는 react 확장자 이름을 .tsx 로 바꾸어야한다. (javscript의 경우 jsx였었음.)

그러면 이런식으로 오류가 나는데 styled-component의 타입을 모르겠다는 오류의 내용이다

 

도움말의 내용대로 npm i --save-dev @types/styled-components  을 실행하면 된다.

 

 

interface , 리액트에서의 TypeScript 이용법

import styled from "styled-components";

interface CircleProps {
  bgColor: string;
}

const Container = styled.div<CircleProps>`
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: ${(props) => props.bgColor};
`;

function Circle({ bgColor }: CircleProps) {
  return <Container bgColor={bgColor} />;
}

export default Circle;

interface 는 props 가 무슨 타입인지 적어주는 역할이다 . 

 

예전에는 function Circle ({bgColor:string})으로 바로 적어주었다고 합니다.

 

요즘에는 interface로 사용한다고 합니다. 

 

styled를 생성할 때  타입을 부여할때는  styled.div<props 이름> 을 사용합니다.

 

function Circle({bgColor}) 에 프롭스 타입을 부여할 때는 function Circle({bgColor} : 변수이름) 을 사용합니다.

 

Optional Props ,required false , 그리고 default 값 부여하기 

bgColor 을 설명하지 않을 때 오류라고 나타남.

 

 

이렇게 props 가 required 인것을 false로 할 수 있는 방법이 있다.

 

바로 변수이름? : string ; 이렇게 하면 된다.

이것을 풀어 설명하자면 변수이름 : string | undefined ; 인 것을 ? 로 대체할 수 있다.

interface CircleProps {
  bgColor?: string;
}

 

그리고 default 값을 부여할 수 있는 방법이 2가지 있다.

1. ?? 를 이용해서 borderColor 이 없을 경우 bgColor 로 지정할 수 있다. 혹은 white 로 바로 입력할 수 도 있다.

 <Container bgColor={bgColor} borderColor={borderColor ?? bgColor} />

 

2. 타입스크립트가 아닌 자바스크립트의 기능을 이용해 지정해준다.

function Circle({ bgColor, borderColor = "yellow" }: CircleProps) {

default 값인 노랑색이 나타난 것을 알 수 있다.

 

useState 을 사용할 때 TypeScript 사용하는 방법

기본적으로 useState 안에 초기값을 해당하는 타입으로 넣어두면 자동으로 타입스크립트가 넘버로 읽어준다

타입스크립트가 string으로 인식하는 모습

---

예외적으로 초기값으로 숫자를 사용하다가 문자를 사용해야할 때

 

 

넘버로 인식되어 문자값은 오류로 나타내는 모습

  const [value, setValue] = useState<string | number>("");

---

useState를 사용할 때 event 를 타입스크립트로 사용하는 방법

import React, { useState } from "react";
import styled from "styled-components";

function App() {
  const [value, setValue] = useState("");
  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    const { value } = event.currentTarget;
    setValue(value);
  };
  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log("hello" + value);
  };
  return (
    <div className="App">
      <form onSubmit={onSubmit}>
        <input
          type="text"
          placeholder="username"
          value={value}
          onChange={onChange}
        ></input>
        <button>Submit</button>
      </form>
    </div>
  );
}

export default App;

onChagne 함수를 보면 (event: React.FormEvent<HTMLInputElement>) 를 사용하였다

타입스크립트에서 event 가 기본값으로 any 타입인데 이러한 부분은 최대한 없애는 게 좋다.

 

따라서 evnet : 이벤트가 어디서 일어나는지 <어떤 HTML 엘리먼트 이벤트인지> 적어주어야 한다.

 

자신이 사용해야하는 이벤트를 모를 떄는 기본적으로 구글링을 해야한다고 합니다. React.js 타입이기 떄문입니다

 

이 사이트에서 이벤트 종류들을 볼 수 있습니다

 

https://reactjs.org/docs/events.html

SyntheticEvent – React

 

 

 

또한 javascript 에서 react 를 기본으로 사용할 때는 value 값을 얻을 때

 

event.target.value 로 얻었었다면

 

타입스크립트에서는 event.currentTarget.value 로 타입스크립트라서 변경된 것이다. 내용은 똑같다.

---

ThemeProvider 사용하는 방법

 

1. 먼저 styled.d.ts 라는 파일을 만든 뒤 자신이 사용할 props 변수들의 타입을 정해준다.

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

// and extend them!
declare module "styled-components" {
  export interface DefaultTheme {
    bgColor: string;
    textColor: string;
    btnColor: string;
  }
}

 

https://styled-components.com/docs/api#typescript

 

styled-components: API Reference

 

 

2.theme.ts 에 DefaultTheme 을 불러와 덮어쓰며 각각의 모드에서 사용할 변수들을 설정한다 

 

import { DefaultTheme } from "styled-components";

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

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

 

3. app.tsx 에 변수들을 설정해준다

import React, { useState } from "react";
import styled from "styled-components";

const Container = styled.div`
  background-color: ${(props) => props.theme.bgColor};
`;

const H1 = styled.h1`
  color: ${(props) => props.theme.textColor};
`;
const Button = styled.button`
  color: ${(props) => props.theme.btnColor};
`;

function App() {
  return (
    <div className="App">
      <Container>
        <H1>Hello</H1>
        <Button>Click</Button>
      </Container>
    </div>
  );
}

export default App;

 

4. index.tsx 에 themeProvider을 import 해주고 theme를 설정해준다

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

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

 

---

타입스크립트는 자바스크립트의 확장판이다. 

 

타입스크립트의 장점으로는 실수를 방지하여 약간의 보호장치를 얻을 수 있고 타입스크립트를 잘 쓴다면 자동완성으로 도움을 받을 수 있으며 오타가 일어날 경우 테스트를 하기 전에도 이를 알아챌 수 있다는 장점이 있다.