React with Typescript

React with Typescript

 

1. create-react-app을 이용해 TypeScript를 사용하는 방법

 

npx create-react-app 프로젝트 이름 --template typescript

 

2. 기존 프로젝트에 typescript 를 적용하는 방법

1. typescript를 template으로 설정할 시 함께 설치되는 모듈을 install한다.

npm install typescript @types/node @types/react @types/react-dom @types/jest

2. js & jsx 파일을 ts, tsx 파일 변경하면 적용이 가능하다.

3. tsconfig.json 파일 생성 (compilerOptions 안의 “jsx”: “react-jsx” 추가) - jsx init

 

props와 interface

interface Props {
 name: string;
 address? : string // 굳이 넘겨주지 않아도 됨
 }
 function PropsType1({ name }: Props) {
 	return (
 			<>
 			<h2>Hello {name}</h2>
 			</>
 		);
 	}

 

• props를 이용해서 데이터를 상위 컴포넌트에게 받을 때는 props 가 어떤 형태로 넘어오는지 type을 미리 적어둬야 함.

• 상위 컴포넌트에서 prop를 넘겨줄 때, 정의된 props라면 반드시 넘겨줘야 함.

• 넘겨주고 싶지 않은 props가 있다면→?를이용!