React + Typescript 프로젝트 시작하기

프로젝트 생성하기

npx create-react-app [프로젝트명] --template typescript

터미널에 위 명령어를 입력하면 자동으로 [*.tsx] 확장자로 프로젝트가 생성된다. 설치를 완료했다면 yarn start 명령어를 통해 브라우저에서 확인할 수 있다.

styled-components 설치

반드시 필요한 라이브러리는 아니며 전략에 따라 필요하다면 설치, styled-components를 typescript에서 문제없이 사용하기 위해 타입까지 함께 설치를 진행한다.

yarn add styled-components
yarn add -D @types/styled-components

기본 형태

기본적으로 사용할 데이터에 대한 타입을 지정한다. 아래는 name, age라는 데이터를 props로 내려 받을 경우의 예시이다.

PropTypes라는 인터페이스로 props 타입을 지정하고, styled-components에 데이터를 내릴 때도 마찬가지로 타입을 지정한다.(최하단 styled 코드 참고)

// App.tsx

import styled from "styled-components";

interface PropTypes {
  name: string;
  age: number;
}

const App = ({ name, age }) => {
  return <Container name={name}>Hello World</Container>;
};

export default App;

const Container = styled.div<{ name: string }>``;

기본적인 프로젝트 생성은 완료했고, 이후에는 eslint와 prettier의 설정을 정리해보겠다.