[React] TypeScript 적용하기

📘 TypeScript 환경 세팅

이미 생성된 React 프로젝트에 설치

작업폴더경로에서 터미널을 오픈한 뒤

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

설치가 다 되었다면 .js파일을 전부 .tsx파일로 바꿔서 사용가능합니다.
(React로 작업을 하지 않는다면 .ts파일로 사용)
파일을 전부 변경해준 뒤 npm start로 서버를 재시작 해줍니다.

TypeScript적용 된 React 프로젝트 생성

새로 작업할 폴더 생성 후 IDE와 터미널을 오픈한 뒤 명령어를 실행시킵니다.

npx create-react-app {project-name} --template typescript

📘 라이브러리 설치

작업을 하다보면 어떤 라이브러리나 패키지는 TypeScript로 만들어진게 아니라 오류 메시지를 띄우는 경우가 있습니다.
이 때, 당황할 필요없이 명령어를 실행시켜줍니다.

npm install @types/{라이브러니 or 패키지 이름}

@types는 큰 규모의 GitHub repository로 유명한 npm 라이브러리를 가지고 있는 저장소 같은 것입니다. 그리고 이 곳에서 라이브러리나 패키지의 type definition을 알려줍니다.

📘 Components

Container.tsx

import React from "react";

interface ContainerProps {
  bgColor : string;
  borderRadius? : string;
}

const Container({bgColor, borderRadius}: ContainerProps) {
  return(
    <Box bgColor={bgColor} borderRadius={borderRadius}></Box>
  );
}

export default Container;

App.tsx

import Container from './Container';

const App() {
  return(
    <Container bgColor="tomato" />
  );
}

📘 Event

주로 사용하는 Form과 button테크에 onClick과 onSubmit을 적용한 예시 입니다.

import React, { useState } from 'react';

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

export default Forms;