[타입스크립트] React에서 Typescript 사용하기(1)

CRA를 통한 프로젝트 생성

기존의 CRA와 크게 다를 것이 없다.

$ npx create-react-app [project-name] --template typescript

하지만, 만약 기존 작업 중이던 프로젝트에 typescript를 설치하고싶다면 아래의 코드를 사용해야 한다.

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

---

기본 세팅

이 또한 기존의 일반 CRA에서의 방식과 거의 비슷하다.

물론 취향에 따라 css와 같은 것들을 살려두는 경우도 있겠지만, 나의 경우는 styled-components를 사용하기에 css파일까지 모두 삭제했다.

styled-components in Typescript

여기에서 조금 세부적인 차이점이 드러나는데, typescript에서 활용하기 위해 추가적으로 설치해줘야 할 것이 있다.

## 뒤에 붙은 @types~까지 설치해줘야 정상적으로 작동한다.
$ npm i styled-components @types/styled-components

---

React.FC

Function Component의 약자
Nodemodules의 React에 저장되어 있는 React에서 제공하는 타입이다.

tsx파일에서 눈에 띄는 것이 있는데, 바로 React.FC다. 이 타입을 선언해주면, FC 안에 jsx형식이 아닌 그냥 함수가 들어갈 경우 에러를 반환해준다.

// 정상 동작
const App: React.FC = () => {
  return <div className='App'></div>;
};

// 이 경우는 오류가 남 (FC를 선언해줬는데, 그냥 함수로써 사용했기 때문)
const App: React.FC = () => {
  return;
};

하지만 이러한 React.FC를 굳이 선언해야 하는지, 말아야 하는지에 대해서는 왈가왈부가 많다. 하지만 내가 리스펙하는 벨로퍼트님께서는 굳이 사용하지 않는 방향성을 추천하셨다… 그래서 그런지 뭔가 그쪽으로 마음이 많이 끌리는 것은 사실이다…

---

Typescript에서 props 주고 받기

기존의 일반 React에서는 props를 다른 컴포넌트로 넘겨줄 때, 그냥 컴포넌트 태그 안에 key와 value값을 넣어주기만 하면 됐었다. 하지만 typescript에서는 해당 props에도 타입을 지정해줘야 한다.

// App.tsx
const App: React.FC = () => {
  return (
    <div className='App'>
      <TODO items={todos} />
    </div>
  );
};

// TODO.tsx

// 이와 같이 props에 대한 interface를 정의하는 방법이 있다.
interface TodoProps {
  items: { id: string; text: string }[];
}
// 그리고 해당 interface를 FC 옆에 아래와 같이 넣어주면 된다.
const TODO: React.FC<TodoProps> = () => {
  return <ul></ul>;
};

하지만 만약 React.FC를 사용하지 않는다면? 아래와 같이 props 전달을 하면 된다.

// TODO.tsx

interface TodoProps {
  items: { id: string; text: string }[];
}

// 일반 함수
function TODO({ items }: TodoProps) {
  return <ul></ul>;
}

// arrow 함수
const TODO = ({ items }: TodoProps) => {
  return <ul></ul>;
};

이제 아주 기본적인 것들은 끝났다.
따라서 다음 포스팅에선 React와 Typescript를 활용한 Todo App을 만드는 과정을 통해 state, hooks등의 typescript 활용법에 대해서 다뤄보고자 한다.

---