[React] TypeScript 사용 방법

React에서 TypeScript를 적용하고 사용 방법에 대해 알아보겠습니다.

설치

create-react-app 명령어에 typescript 옵션을 추가합니다.

$ npx create-react-app typescript --template typescript

Typescript를 추가하지 않은 기존 프로젝트가 있다면 다음 명령어를 실행하여 설치합니다.

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

Typescript 사용 시 styled-components 부분에서 에러가 날 경우 다음 명령어를 실행하여 설치합니다.

$ npm i --save-dev @types/styled-components

Typing the Props

Prop Types는 코드를 실행한 후 에만 브라우저의 콘솔에 경고 표시로 확인이 가능합니다.
TypeScript를 사용하는 이유는 코드가 실행되기 전에 오류를 확인하기 위해서입니다.

interface는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있습니다.

import Circle from './Circle';

function App() {
  return (
    <div>
      <Circle bgColor="teal" />
      <Circle bgColor="tomato" />
    </div>
  );
}

export default App;

import styled from 'styled-components';

interface CircleProps {
  bgColor: string;
}

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

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

export default Circle;

Optional Props

props는 기본으로 required 이지만 interface의 object 뒤에 ?를 추가하여 optional 될 수 있도록 변경 가능합니다.

import styled from 'styled-components';

interface ContainerProps {
  bgColor: string;
  borderColor: string;
}

const Container = styled.div<ContainerProps>`
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-color: ${(props) => props.bgColor};
  border: 1px solid ${(props) => props.borderColor};
`;

interface CircleProps {
  bgColor: string;
  borderColor?: string; // object뒤에 ?를 추가 => Option props
  text?: string;
}

function Circle({ bgColor, borderColor, text = 'default text' }: CircleProps) {
  return (
    <Container bgColor={bgColor} borderColor={borderColor ?? 'white'}>
      {text}
    </Container>
  );
}

export default Circle;

State

State 사용 시 number, string 타입을 같이 쓰고 싶다면 다음과 같이 정의합니다.

const [value, setValue] = useState<number | string>(0);
setValue(1);
setValue('hello');
setValue(true); // error

Event

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

SyntheticEvent는 기본적으로 ReactJS 버전의 이벤트입니다. 이벤트들의 정보를 확인하는 사이트입니다.

Form

React.FormEvent<HTMLInputElement> 또는 React.FormEvent<HTMLFormElement>와 같은 Element를 사용함으로써 event를 보호하고 어떤 event 를 받는지 알 수 있습니다.

import React, { useState } from 'react';

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

export default App;

Theme

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

styled.d.ts 파일을 생성합니다.

// styled.d.ts
import 'styled-components';

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

thmem.ts 파일을 생성하고 테마를 정의합니다.

// thmem.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',
};

React에서 테마 사용하는 것과 똑같은 방식입니다.

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from 'styled-components';
import App from './App';
import { lightTheme } from './theme';

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

참고

• https://create-react-app.dev/docs/adding-typescript/