서울 음식점 API의 Type 정의하기

React 기반으로 REST API를 활용한 프로젝트를 구성 중에 TypeScript를 활용해서 만들면 더 구체적인 코드로 구현할 수 있을 것 같아 새로운 도전을 해보았습니다.

 

📌 TS로 API Type 만들기

export type apiType = {
  CRTFC_UPSO_MGT_SNO: number;
  UPSO_SNO?: string;
  UPSO_NM: string;
  CGG_CODE?: string;
  CGG_CODE_NM: string;
  COB_CODE_NM?: string;
  BIZCND_CODE_NM: string;
  OWNER_NM?: string;
  CRTFC_GBN?: string;
  CRTFC_GBN_NM: string;
  CRTFC_CHR_NM?: string;
  CRTFC_CHR_ID?: string;
  CRTFC_YMD?: string;
  USE_YN?: string;
  MAP_INDICT_YN?: string;
  CRTFC_CLASS?: string;
  Y_DNTS: string;
  X_CNTS: string;
  TEL_NO?: string;
  RDN_DETAIL_ADDR?: string;
  RDN_ADDR_CODE?: string;
  RDN_CODE_NM: string;
  BIZCND_CODE?: string;
  COB_CODE?: string;
  CRTFC_SNO?: string;
  CRT_TIME?: string;
  CRT_USR?: string;
  UPD_TIME?: string;
  FOOD_MENU?: string;
  GNT_NO?: string;
  CRTFC_YN?: string;
};

프로젝트에 사용하지 않는 변수들까지 다 선언한 이유는 초기에는 데이터를 다 저장하고 있기 때문입니다.

프로젝트에 사용하지 않는 변수에는 반드시 ?:를 써주어야 합니다. 그래야 해당 변수가 없을 때 오류가 발생하지 않습니다.

 

 

📌 코드 해석

1. datas: 검색어와 필터를 통해 일치하는 결과를 담는 변수입니다.

2. originalData: API의 데이터를 그대로 가지고 있는 변수입니다.

import { useState } from "react";
import { apiType } from "./apiType";

function App() {
  const [datas, setDatas] = useState<apiType[]>([]);
  const [originalData, setOriginalData] = useState<apiType[]>([]);
  ...
}

datas와 originalData는 API의 데이터를 가지고 있으므로 apiType의 데이터 타입을 지정해줍니다.
배열로 활용할 것이기 때문에 apiType 뒤에 반드시 []를 명시해줘야 합니다.