(TS) TS11 실습: React 및 TypeScript(TSX)

1. React-TypeScript 프로젝트 생성

npx create-react-app 프로젝트명 --template typescript

2. React에서 TS를 사용할 때 주의할 점

– 프로젝트 규모는?
– 협업할 때 다른 사람이 작성한 코드를 참고하는 경우가 많나요?
– 장기적으로 유지보수에 도움이 되는가?
– 추후 팀원이 더 필요하더라도 인력 공급이 용이한가?
– 팀원들이 배우는 데 시간과 비용이 적게 드는가?

– 취직/이직을 원하면 어차피 배워야 한다.

3. 문법

– 일반 TSX의 유형 지정(HTML 요소)


팍스

– 구성 요소 유형 지정


소품 때문에 버그가 많으니 만드는데 집중하세요

– UseState 타입 지정 : 대부분 스스로 하니까 너무 고민하지 말고 마우스를 올려보자.


useState도 후크(함수)이기 때문에 강제로 Generic 유형으로 만들 수 있습니다.

– Redux에서 유형 지정

가게


같은

매장에서 하실 수 있습니다.

사용


– 이렇게 사용하시면 됩니다.

– 자세한 내용은 공식 문서 또는 chatGPT 참조

– redux-toolkit을 사용합니다. 함수로 보기에도 좋고, immer가 내장되어 있어 불변성을 보호하기에도 좋습니다.

– reducers 필드에 함수를 생성할 때 매개변수에 대한 유형을 지정할 필요가 없습니다. 너 스스로해라.

– redux-toolkit에서 PayloadAction을 가져와서 사용해야 합니다.


redux 툴킷에서 PayloadAction 유형 지정