📌 props로 넘겨주는 data가 어떤 타입인지 지정되지 않았을때

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

let data = {
	name: "type Store",
  category: "Korean Food",
  address: {
    city: "Seoul",
    detail: "someWhere",
    zipCode: 12345678,
   },
    menu: [
      { name: "rice", price: 1000 },
      { name: "soup", price: 2000 },
    ],
  };

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

export default App;

src - model - 파일명.ts 생성

App.tsx에 있는 data의 타입들을 별도로 빼와서 type을 지정해준다.

타입을 지정하는 방법에는 type과 interface 두 가지가 있다. 둘의 차이점은 크게 없으나, method와 syntax의 차이가 있다.

✏️

let data = {
  name: "type Store",
  category: "Korean Food",
  address: {
    city: "Seoul",
    detail: "someWhere",
    zipCode: 12345678,
  },
  menu: [
    { name: "rice", price: 1000 },
    { name: "soup", price: 2000 },
  ],
};

Type

type으로 지정해보기

내가 이해한바로는 어떤 data를 받아오는 객체의 구조를 미리 잡아두고 그 안에 받아오는 data들의 type을 정해두는것 같다.

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

✏️ type을 조금 더 재사용성 높히도록 만들어보기

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

**import { Restaurant } from "./model/restaurant";**
.
.
let **data:Restaurant** = {
.
.
};