TypeScript 실습편, 작은 CRUD 프로젝트 만들어보기.

이전 시간에 TodoList를 만들어본 경험을 토대로 이번엔 스스로 작은 CRUD 프로젝트를 만들어보고자 한다.

이번 프로젝트의 목적은 기존의 학습을 복습하고, 추가적으로 라이브러리들을 설치하면서 이를 어떻게 TypeScript와 묶을 것인지, 그리고 자주 쓰는 JavaScript의 문법을 TypeScript에서는 어떻게 정의하고 사용할지를 정리해보고자 한다.

목차

1️⃣ TypeScript와 Redux가 포함된 Create-React-App 패키지 설치

2️⃣ 추가 환경 설치 및 적용 (styled-components의 예)

3️⃣ type을 생성하여 children prop을 받아오기

4️⃣ 구조 분해 할당 문법에서의 타입 정의

5️⃣ (styled-components) 공통 컴포넌트의 부분 스타일 적용

6️⃣ (Redux Toolkit) useSeletor의 매개변수 타입 지정

1️⃣ TypeScript와 Redux가 포함된 Create-React-App 패키지 설치

https://github.com/reduxjs/cra-template-redux-typescript

위의 레포지토리의 README.md를 통해 아래의 터미널 명령어를 확인할 수 있다.

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

# or

yarn create react-app my-app --template redux-typescript

내용대로 터미널에 설치해서 프로젝트를 만들어주자.

2️⃣ 추가 환경 설치 및 적용 (styled-components의 예)

이전에는 기존 템플릿 환경에서만 사용했다면, 이번에는 추가적인 라이브러리나 프레임워크를 직접 설치해봤다.