CRA React에 TypeScript 적용, 알아두면 좋은 타입들 정리

기존 React 프로젝트에 TypeScript 적용, 알아두면 좋은 타입들

CRA로 만든 React 프로젝트에 TypeScript 적용 방법과 적용 과정에서 알아두면 좋은 타입들을 정리했습니다.
해결하기 힘든 오류로 프로젝트가 엉망이될까봐 새 브랜치에 나누고 merge 하면서 진행했습니다.

TypeScript 적용

프로젝트를 처음 만든다면,

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

기존 CRA로 만든 React 프로젝트에 TypeScript를 적용한다면,

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

로 typescript와 필요한 type들만 추가하면 됩니다.

tsconfig.json 생성, 확장자 tsx로 바꾸기

yarn start로 프로젝트를 실행시키면 타입스크립트 설정 파일 tsconfig.json 파일이 생성됩니다. 만약 오류가 난다면 기존의 jsconfig.json을 지우고 실행합니다.

기존의 js, jsx 확장자를 써도 typescript가 인식해 오류가 나지 않습니다. 기존의 확장자들을 하나씩 .tsx로 바꾸면서 발생하는 오류를 해결하면서 적용했습니다.

기본 타입 외 타입들 정리

TpyeScript의 기본 타입 외 React에서 사용하는 타입들을 정리해봤습니다.

1. react-router의 history, location, match
   주로 navbar의 경로나 url, params를 구하기 위해 컴포넌트로 위 3가지 props를 넘겼습니다.
   가장 쉽게 해결할 수 있는 방법은 props로 넘기지 않을 땐, 각각 useHistory, useLocation, usePrams를 이용하면 따로 타입을 정의할 필요가 없습니다.

2. history, location, match를 다른 컴포넌트로 부터 props로 전달 받아야 할 때 : RouteComponentProps

   import { RouteComponentProps } from 'react-router';
   
    const Component = ({ location }:RouteComponentProps) => {

3. history, location, match의 내부 속성 사용할 때
   예를 들어 location의 state나, match의 params와 같이 내부 속성을 사용할 땐 RouteComponentProps 안에서 따로 타입을 정의해줘야 합니다.

   import { RouteComponentProps, useLocation } from 'react-router';
   import { Location } from 'history';
   import { StaticContext } from 'react-router';
   
    // location state의 from이란 값을 사용할 때
   interface LocationProps{
    from : Location;
   }
   
   const Component = ({ location }:RouteComponentProps<{}, StaticContext, LocationProps>) => {
   const { pathname } = useLocation();

4. props로 match 사용 시,

   interface Props {
     id: string;
   }
   
   const MenuDetailPage: FC<RouteComponentProps<Props>> = ({ match }) => {};

   useParamrs 사용 시,

   interface Props {
     id: string; // id의 타입에 따라
   }
   const component = () => {
     const { id } = useParams<Props>();
   };

5. props로 {children} 가져올 때 : react의 FC

   import React, { FC } from "react";
   
   const Component: FC = ({ children }) => {};

6. {children}이 배열 형태일 때
   children의 내용으로 태그가 여러개로 들어올 때 배열의 형태로 넘어오게 되고 타입을 따로 지정해야 합니다.

   interface Props{
    children: JSX.Element[];
   }
   
   const Component :FC<Props> = ({ children }) => {
   const [leftArrow, title, side] = children;

7. props로 함수가 넘어올 때 : 매개변수, 리턴의 타입 지정하기
   예를 들어 단순한 클릭 이벤트 함수가 넘어 온다면 onClick : ()=> void와 같이 매개변수와 리턴 타입을 지정합니다.

   // const [state, setState] = useState(false)의 경우
   
   interface Props {
     // 초기값에 따라 매개변수의 타입 설정
     setState: (e: boolean) => void;
   }
   
   const SubscribeDropdown: FC<Props> = ({ setState }) => {};