React + TS - 프로젝트 시작하기

프로젝트 시작하기

CRA 공식문서 를 보고 시작하면 된다. 게시물 작성 시점에서 프로젝트를 시작하는 방법은 터미널에 다음 명령어를 입력하는 것이다.

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

위 명령어는 my-app이라는 이름을 사용하여 react+ts 환경으로 프로젝트를 돌릴 수 있도록 셋팅해준다.

React에 ts를 도입하는 이유

코드가 clean하고, 구조가 clean함을 보장해주기 위해 사용하는 것!

React.FC (Functional Components) (더이상 권장X)

ts를 적용했으니 특정 함수가 어떤 자료형을 반환하는지 알려줘야 자동추론 대신 명시적으로 적어줄 수 있을 것이다. 하나의 JSX element를 리턴하는 컴포넌트는 React.FC 자료형을 리턴한다.

다음의 코드는 투두리스트 만드는 화면 중 발췌했다.

import React from "react";

const ToDos: React.FC = (props) => {
  return <ul>{}</ul>;
};

export default ToDos;

만약 위의 코드에서 React.FC를 생략하면 props의 자료형을 적어줘야 한다고 ts가 경고한다. 위와 같이 적어주는 이유는 기본적으로 props.children과 같이 자동으로 넘어오는 데이터에 대해서 정의를 암시적으로 제공하기 위해서였는데 React 18을 기준으로 CRA로 프로젝트를 생성한 경우 ts에서 더이상 제공하지 않는다.

React.FC를 권장하진 않는다

자세한 이유는 위의 문서에 적혀있으니 참고하자.

React.FC를 사용하지 않으려면?

가장 일반적이고 간단한 방법은 props에 직접 타입을 정의해주는 것이 간단하다.