[typescript] React와 사용할 때

타입스크립트가 세팅된 리액트 프로젝트 만드는 명령어

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

 

App.tsx 파일을 열어보면

App 함수(컴포넌트)의 return 값이 JSX이다.

해당 컴포넌트의 타입에는 ' React.FC ' 타입을 주면 된다. (react function component 타입)

const App: React.FC = () => {
  return (
    <div className="App">

    </div>
  );
};

App : React.FC

 

 

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Store from "./Store";

let data = {
  name: "누나네 식당",
  category: "western",
  address: {
    city: "incheoi",
    detail: "somewhere",
    zipCode: 23456,
  },
  menu: [
    { name: "rose pasta", price: 2000, category: "PASTA" },
    { name: "garlic pasta", price: 3000, category: "PASTA" },
  ],
};

const App: React.FC = () => {
  return (
    <div className="App">
      <Store data={data}/>
    </div>
  );
};

export default App;

<Store> 라는 컴포넌트에 data 데이터를 전달해서 사용하려고 한다.

그런데 data 타입이 뭐냐고 오류남. 정말 엄격한 타입스크립트 자식

객체 형태인 data에도 타입을 지정해줘야 한다.

보통 model이라는 폴더를 만들고 그 안에 타입들이 담긴 파일들을 모아둔다고한다

 

 

model 폴더 안에

restaurant.ts 파일을 만들고 타입을 만들면 된다.

export type Restaurant = {
  name: string;
  category: string;
  address: { city: string; detail: string; zipCode: number };
  menu: {
    name: string;
    price: number;
    category: string;
  }[];
};

App.jsx에서 import 해야하므로 type 앞에 *export 써줘야한다.

위의 코드처럼 타입을 만들어도되지만

타입안에 또 타입을 주면 더 효율적이고 간결하게 타입을 만들 수 있다.

 

 

export type Restaurant = {
  name: string;
  category: string;
  address: Address;
  menu: Menu[];
};

export type Address = {
  city: string;
  detail: string;
  zipCode: number;
};

export type Menu = {
  name: string;
  price: number;
  category: string;
};

address는 객체, menu는 배열이므로

두개를 따로 빼서 각각 타입으로 만들어주면 나중에 재사용하기도 편하고

코드가 깔끔해진다. 

 

 

 

Retaurant이라는 타입을 만들었으므로

다시 App.tsx로 가서 Retaurant 타입을 import 한 뒤

data 객체에 타입으로 지정해준다.

let data: Restaurant = {
  name: "누나네 식당",
  category: "western",
  address: {
    city: "incheoi",
    detail: "somewhere",
    zipCode: 23456,
  },
  menu: [
    { name: "rose pasta", price: 2000, category: "PASTA" },
    { name: "garlic pasta", price: 3000, category: "PASTA" },
  ],
};

 

 

 

만약 저 data를 useState에 넣어서 사용하고 싶으면

useState에도 타입을 지정해줘야 하는데

이때 < > 제네릭 문법을 사용한다.

const App: React.FC = () => {
  const [myRestaurant, setMyRestaurant] = useState<Restaurant>(data);

  return (
    <div className="App">
      <Store data={myRestaurant} />
    </div>
  );
};

 

useState에 data를 넣고

제네릭 < > 문법을 사용해서 타입을 지정해주면 된다.

이때 useState의 타입과 state안에 들어가있는 data의 타입이 같아야한다.

근데 아직도 Store data 부분에 빨간 오류쳐지는데

이건 Store 컴포넌트에서 props의 타입을 지정해주지 않아서이다

props에 타입을 지정해주기 위해서 Store 컴포넌트로 이동한다.

 

import React from "react";
import { Restaurant } from "./model/restaurant";

const Store: React.FC = (props) => {
  return <div>Store</div>;
};

export default Store;

보통 props는 타입을 따로 만들어준다.

 

 

 

import React from "react";
import { Restaurant } from "./model/restaurant";

interface OwnProps {
  data: Restaurant;
}

const Store: React.FC<OwnProps> = (props) => {
  return <div>Store</div>;
};

export default Store;

interface를 사용해서 이 컴포넌트 안에서만 사용할 수 있다는 의미로 OwnProps이라 작명하고

안에 타입을 지정한 후

props의 타입을 지정할 때는 제네릭 문법을 < > 사용한다. *React:FC 사용시에는 제네릭 문법

 

 

 

props로 함수도 전달하고 싶다면?

우선 App.jsx에 address를 바꿀 수 있는 함수 만들고

const App: React.FC = () => {
  const [myRestaurant, setMyRestaurant] = useState<Restaurant>(data);

  const changeAddress = (address: Address) => {
    setMyRestaurant({ ...myRestaurant, address: address });
  };

  return (
    <div className="App">
      <Store data={myRestaurant} changeAddress={changeAddress} />
    </div>
  );
};

 

 

 

Store 컴포넌트로 가서

위에서 만든 interface OwnProps 안에 함수의 타입을 지정해주면 된다.

함수는 (return 값이 없는 경우) 타입을 void라고 지정해주면 된다. *void : 어떠한 타입도 없다는 뜻

import React from "react";
import { Address, Restaurant } from "./model/restaurant";

interface OwnProps {
  data: Restaurant;
  changeAddress(address:Address):void
}


const Store: React.FC<OwnProps> = ({ data }) => {
  return <div>{data.name}</div>;
};

export default Store;

 

 

 

 

JSX 타입

 

 

react에서는 JSX도 변수에 담아서 쓸 수 있다.

즉, JSX에도 타입을 지정해야된단 말

let box : JSX.Element = <div></div>;
let button : JSX.Element = <button></button>

JSX.Element 라고 타입 지정해주면 된다.

 

 

 

 

 

function componemt 타입

 

 

컴포넌트는 함수로 만드는거라 함수 타입지정하는거랑 똑같아서

파라미터랑 return 값에 타입지정 할 수 있다.

function Profile( ){ 
	return(
    	<div>누구누구입니다.</div>
    )
}

위의 코드에서 파라미터는 없고 return 값만 있는데

return 값이 JSX 이므로 

 

 

 

function Profile( ) : JSX.Element{ 
	return(
    	<div>누구누구입니다.</div>
    )
}

JSX.Element 으로 지정해주면 된다.

 

 

 

 

props 타입

 

function Profile( props ) : JSX.Element{ 
	return(
    	<div>{props.name}입니다.</div>
    )
}

props로 전달한 data는 모두 object 형태라

object 타입지정하는거랑 똑같이 하면 된다.

 

 

type AppProps = { name : string, age : number }

function Profile( props : AppProps ) : JSX.Element{ 
	return(
    	<div>이름은 {props.name}입니다. 나이는 {props.number} 입니다.</div>
    )
}

리액트에서는 props 때문에 에러날때가 많아서

props의 타입지정을 미리 해두면 에러를 방지할수 있다고 한다.

 

 

 

 

useState 타입

 

 

useState는 타입이 알아서 지정된다. 굳

let [user, setUser] = useState('kim');