TypeScript로 리액트 프로젝트 시작하기

1. 프로젝트 생성

https://create-react-app.dev/docs/adding-typescript

# yarn을 사용하는 경우
yarn create react-app my-app --template typescript

# npx를 사용하는 경우
npx create-react-app my-app --template typescript

 

2. 리액트 프로젝트와 동일하게 yarn start 명령어로 프로젝트를 실행함

yarn start

 

3. tsconfig.json 파일 수정

// tsconfig.json 
"target": "ES2016" 수정

 

4. 타입 정의 패키지 설치

# react-router-dom
yarn add react-router-dom @types/react-router-dom

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

# Redux
yarn add react-redux @types/react-redux

 

5. 폴더 구조

src

|— components

|— hooks

          |— hooks.ts

|— pages

|— redux

          |— config

                   |— configStore.ts

          |— modules

                   |— todosSlice.ts

|— shared

          |— Layout.tsx

          |— Router.tsx

|— styles

          |— GlobalStyles.tsx

          |— Layout.styled.tsx

|— types

          |— global.ts

 

 

// 만약 상태가 null이 들어올 수도 있면 제네릭을 사용하여 타입 지정
const [number, setNumber] = useState<number | null>(null);

// props 타입 정의
type OwnProps = {
  todos: TodoModel[];
  setTodos: React.Dispatch<React.SetStateAction<TodoModel[]>>;
  listIsDone: boolean;
  children: React.ReactNode;
};
// 방법1: 권장
const TodoList = ({ todos, setTodos, listIsDone, children }: OwnProps) => {...};
// 방법2
const TodoList: React.FC<OwnProps> = ({ todos, setTodos, listIsDone, children }) => {...};