[유튜브 강의 -코알누] 리액트 타입스크립트

셋팅

1. 타입스크립트로 프로젝트 생성하기
react typescript 구글링
tyscriptlan.dorg 링크 ㄱㄱ에서 확인하면
명령어 확인할 수 있음

npx create-react-app my-app --template typescript

2. tsconfig.json 
"target": "es6"로 변경
lib에 es6 추가
module은 esnext 로 두면 됨

3. 리액트의 함수 컴포넌트에 타입 지정 ㄱ
함수의 매개변수도 타입을 지정하고,
함수의 리턴 값도 타입을 지정해주어야 함

const App:React.FC = () => {
  return...

 

 

---

실습 코드

레스토랑정보 보여주기 예제

학습 내용: 객체 타입 정의, 타입, useState, 제네릭 문법, 함수, interface, extends, Pick, Omit, api

 

(App.tsx)

import Storel from './Store';
import {Address, Resturant} from './model/resturant';

// 이렇게 정의가 안되는 객체형 타입은 
// 우리가 타입을 만들어 줄 수 있음
let data:Restaurant = {
  name: '누나네 식당'
  category: 'western',
  address: {
    city: 'incheon',
    detail: 'somewhere',
    zipCode: 23232323
  },
  menu: [{name: "rose pasta", price: 2000, category: "PASTA"}, {name: "garlic steak", price: 3000, category: "STEAK"}
}
const App:React.FC = () => {

  // state에 넣어보기 ! 
  // <>는 제네릭 문법. 정해줄 수 없을 떄, usestate를 부르는 순간에 타입을 정해주고 싶을 때 쓰는게 제네릭 문법
  // useState를 쓸 때에 나는 Restaurant이라는 타입을 쓰겠다!
  const [myrestaurant, setMyrestaurant] = useState<Restaurant>(data)

  // props로 함수 보내기 !
  const changeAddress (address: Address) => {
    setMyRestaurant({...myRRestaurant, address: address})
  }

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

  return {
    <div className="App">

        // props로 넘기는 데이터의 타입이 지정되어있지 않아서 오류 -> 데이터 만들 때 타입지정해놔야 함
        // <Store info={data} />

        // state에 넣어보기 실습
        // 이번엔 props에서 받아주는게 없다고 에러 뜸 -> props 받아주는 곳으로가서 type을 지정해줘야 함
        <Store info={myrestaurant} changeAddress={changeAddress} />

        // 이렇게만 해두면 에러나니까 props 받는곳으로 가서 타입지정 해줘 ㄱㄱ
        <BestMenu name="불고기피자" category="피자" price={1000} showBestMenuName={showBestMenuName} />
    </div>
  );
}

export default App;

 

(src/Store.tsx)

import React from 'react'
import {Resturant} from './model/resturant';

// props가 info:Restaurant 형태로 들어올꺼니까
// 보통 props같은 경우는 props타입을 따로 만들어줄거 -> 이번엔 interface써서 만들어볼거~
interface OwnProps {
  info: Restaurant,

  // 함수
  // changeAddress함수는 인자로 adress를 받고 타입은 Address다
  // :뒤에는 return 타입 적음
  // return타입이 없을 때는 void적어
  changeAddress(adress:Address):void
}

// props를 assign해주는 법
// React.FC 리액트 펑션 컴포넌트도 제네릭을 가져감
// 이 펑션 컴포넌트에 들어오는 값이 OwnProps타입이라고 지정해주는거
const Store:React.FC<OwnProps> = ({info}) => {
  return (
    <div>{info}</div>
  );
}

export default Store;

 

(src/model/restorant.ts)

보통 타입 만들때는 model이라는 폴더를 만들어서 type만 들고 있음 

타입 만드는 방법 2가지
1. interface
2. type

// 레스토랑 관련 타입 만들거
export type Restaurant = {
  name: string;
  category: string;
  address: Address,
  // menu: 
    // {name: string; 
    // price: number; 
    // category: string;}[]
    // 이 객체의 array타입입니다.
  menu: Menu[]
}

// 타입을 세분화할 수도 있음. 타입 재정의할 수 있따
export type Address = {
  city: string;
  detail: string;
  zipCode: number;
}

export type Menu = {
  name: string; 
  price: number; 
  category?: string; // Omit 필요없이 있을 수도 있고 없을수도 있다고 표시할 수 있음. 그럼 얘를 필수인지 체크를 안하고 넘어갈 수도 있기때문에 유의
}

// type에 더 붙이고 싶을 때 extends익스텐즈
// 확장

// type에서만 쓸 수 있는 장점들이 있음

// 빼고싶을 때 !  Omit 빼주세요
// Address에서 'zipCode'를 빼주세요
// Omit<Address, 'zipCode'>
export type addressWithoutZip = Omit<Address, 'zipCode'>

// 골라서 가져올 때 ! Pick
export type addressOnlyCategory = Pick<Restaurant, 'category'>

// api도 응답 값을 타입스크립트로 처리할 때
// 제네릭은 어떤 값이 들어올 지 모를 때 쓰면 좋음
// ApiResponse를 쓸 때 T를 제네릭으로 넣어주면
// data가 T타입이 되는거
export type ApiResponse<T> {
  data: T[],
  totalPage: number,
  page: number
}

// 만약 레스토랑 데이터 타입을 만들고 싶다면
export type ResturantResponse = ApiResponse<Restaurant>

// 메뉴를 api호출했으면 이렇게 또 돌려막기 해줄수있음 ㄱ
export type MenuResponse = ApiResponse<Menu>

 

 

(src/BestMenu.tsx)

import React from 'react'
import {Menu} from './model/resturant';

// Menu랑 모양이 비슷하니까 Menu로 익스텐즈 ㄱ
// Menu로 익스텐즈하면 Menu가 갖고있던애들이 이미 작성돼있다고 가정하는 거 !! 추가하고싶은것만 적어주면 됨
interface OwnProps extends Menu {
  showBestMenuName(name: string): string
}

// Omit 사용해서 Menu에서 price만 빼고 받아올때 이렇게도 쓸 수 있음
// interface OwnProps extends Omit<Menu, 'price'> {
//   showBestMenuName(name: string): string
// }

// type으로 확장하는법
// type OwnProps = Menu & {
//   showBestMenuName(name: string): string
// }

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

export default BestMenu;

 

 

 

---

코딩알려주는누나 리액트 타입스크립트 강의

https://www.youtube.com/watch?v=V9XLst8UEtk&t=178s