8일차 스터디 - React with TypeScript
React with TypeScript
React에서 PropTypes로 충분히 타입 체킹이 가능하지만 state, function parameters 등의 타입 체킹은 할 수 없습니다.
하지만 TypeScript를 이용하면 PropTypes로 부족했던 것들까지 모두 타입 체킹을 할 수 있습니다.
설치
1. 새롭게 프로젝트 생성
create-react-app typescript-react-tutorial --scripts-version=react-scripts-ts
위 create-react-app을 이용하면 TypeScript가 적용된 React 프로젝트를 생성할 수 있습니다.
2. 기존 프로젝트에 적용
npm i typescript ts-loader @types/react @types/styled-components @types/react-router @types/react-router-dom @types/react-dom -D
위 모듈을 추가해준 뒤 최상위 폴더에 tsconfig.json 파일과 webpack.config.js 파일을 생성후 설정해줍니다.
tsconfig.json
webpack.config.js
Component 생성
파일을 생성할때 확장자를 기존 js에서 tsx로 생성해줍니다.
기존에는 js로 설정해도 JSX를 인식하여 에러 없이 빌드가 되었지만 TypeScript에서는 꼭 tsx로 해줘야만 JSX를 인식하고 에러없이 빌드된다.
리액트는 컴포넌트를 만들기 위한 세 개의 클래스를 제공하는데 모두 제네릭으로 만들 수 있다.
FC<Props> (FunctionComponent<Props>): 함수형 컴포넌트PureComponent<Props, State>: 클래스형 컴포넌트Component<Props, State>: 클래스형 컴포넌트
// 함수형 컴포넌트
const Counter: React.FC<{name: string}> = props => {
const { name } = props;
return <p>{name} counter</p>
}
export default Counter;
// 클래스형 컴포넌트
class Counter extends React.Component<{name: string}, CounterState> {}
class Counter extends React.PureComponent<{name: string}, CounterState> {}
과제
링크: 8일차 과제
기존 JavaScript에서 TypeScript로 변경하시면 됩니다.
- 디테일하게 Type을 지정할 필요는 없습니다.
- 다만
.js=>.tsx로 변환 후 생기는 타입에러는 모두 해결하셔야 합니다. - 모든 기능이 정상적으로 작동해야 합니다.