[TypeScript] React 시작해보기

Create React App

typescriptlang

링크에 들어가서 Create React App - TS docs 확인

https://create-react-app.dev/docs/getting-started

그냥 결국 여기임

npx create-react-app portfolio --template typescript

---

기본설정

tsconfig.json

"target": "es6"

es5 -> es6

"lib": [
  "dom",
  "dom.iterable",
  "esnext",
  "ES6"
],

라이브러리에 es6추가

---

React.FC<>

---

• Function Component의 줄임말
• 기본적으로 컴포넌트는 함수 형태이며, 이 컴포넌트의 타입을 정의할 때 사용하는데 검색해보니 많은 사람들이 지양하고 있다.

하지만 일단 따라해보자

let data = {
  name: "식당"
  category: '일식'
}

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

와 같이 작성할 경우 Property 'info' does not exist on type 라는 에러가 발생, info의 타입을 먼저 정의 해야한다.

타입만 정의해 놓은 폴더에 타입을 정의한 ts파일 생성

타입 정의는 interface, type으로 가능

model-restaurant.ts

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;
};

App

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

let data: Restaurant = {
  name: "식당",
  category: "일식",
  address: {
    city: "Gunpo",
    detail: "48-2",
    zipCode: 123,
  },
  memu: [
    {
      name: "초밥",
      price: 1234,
      category: "밥",
    },
    {
      name: "우동",
      price: 22,
      category: "면",
    },
  ],
};

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

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

store에도 props의 타입을 지정해주어야 한다.

Store

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

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

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

---

extends

---

App

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

let data: Restaurant = {
  name: "식당",
  category: "일식",
  address: {
    city: "Gunpo",
    detail: "48-2",
    zipCode: 123,
  },
  memu: [
    {
      name: "초밥",
      price: 1234,
      category: "밥",
    },
    {
      name: "우동",
      price: 22,
      category: "면",
    },
  ],
};

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

  const showBestMenuName = (name:string) => {
    return name
  };

  return (
    <div classname="App">
      <Store info={myRestaurant} changeAddress={changeAddress} />
      <BestMenu name="불고기피자" category="피자" price={2000} showBestMenuName={showBestMenuName}>
    </div>
  );
};

BestMenu

// interface OwnProps {
//   name: string;
//   category: string;
//   price: number;
// } 이미 정의한 Menu 타입과 똑같기 때문에 재사용할 수 있다.

import { menu } from "./model/restaurant";

interface OwnProps extends Menu {
  showBestMenuName(name: string): string;
  // 요소를 추가하고 싶으면 추가할 수 있다.
}

const BestMenu: React.FC<OwnProps> = ({
  name,
  price,
  category,
  showBestMenuName,
}) => {
  return <div>{name}</div>;
};

export default BestMenu;

---

API

---

export type ApiResponse<T> {
  data:T[],
  totalPage:number,
  page:number
}

export type RestaurenatResponse = ApiResponse<Restaurant>