TypeScript
1.React + TypeScript 시작하기
사용하는 이유개발 중 데이터 타입 측면의 실수가 있을 때, 그냥 넘어가지 않고 사용자에게 알려줌특이사항확장자 js => tsx로 변경하기라이브러리 설치도 조금 다름Installation (터미널)(1) TypeScript 설치npx create-react-app 내 앱
2.interface
interface는 object를 설명해주는 것. (데이터 타입)이런 함수가 있다고 하면,=> CircleProps가 설명 (같은 이름이 아니어도 된다)=> ContainerProps가 설명 (같은 이름이 아니어도 된다)이럴때 interface 사용한다.CirclePr
3.state
TypeScript로 state 관리하기TypeScript에서 1을 number로 잘 인식하고 있기 때문에setCounter(1)에서 오류가 생기지 않는다.하지만 ! 갑자기 string을 넣어주면 ??빨간줄 부분에 오류가 발생했다type이 달라서인데, 이는 이렇게 해결
4.Form, Input
event: React.FormEvent<HTMLInputElement>event: React.FormEvent<HTMLFormElement>에 주목하기. 나머지는 비슷
5.(React + TypeScript + Styled-components) Theme
install타입스크립트 + 리액트에서는 style components를 다음과 같이 설치한다.npm install --save-dev @types/styled-componentsstyled.d.ts 파일 생성 https://styled-components.c
6.쉽고 편하게 type 정의하는 방법
TypeScript에서 type을 정의하기 위해선 api로부터 불러온 데이터의 key와 value의 type이 필요하다.손수 정의해주면 문제가 없겠지만... api의 양이 방대하다면 매우 귀찮으므로 이를 비교적 손쉽게 정의하는 방법에 대해서 알아보자 😚data fet
7.React Query(TypeScript + React v18)
0 . installnpm i react-queryimportindex.jsimport { QueryClient, QueryClientProvider } from "react-query";queryClient 생성 후 provider에 넣어주기fetcher 함수 만들기
8.apexcharts : 데이터 시각화 하기 (react v18 + TypeScript)
installnpm install --save react-apexcharts apexchartsimportimport ApexCharts from "react-apexcharts";component위와 같이 간단하게 사용가능하다.차트를 만드려면 공식 페이지의 여러 pr
9.TypeScript
TypeScript란 // 이거 오늘 TypeScript is a strongly typed programming language that builds on JavaScript 다시 말해, 타입스크립트는 "타입 검사가 가능한" 자바스크립트입니다.브라우저는 "자바스크립트