📖 진행한 공부 📖

• TypeScript 객체 타입 정의 및 제네릭
• 개인과제 시작

TypeScript 객체 타입 정의

type, interface가 있는데 둘이 큰 차이는 없으나 사용할 수 있는 메서드가 조금 다르다는 점

type으로 타입 정의

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

객체는 타입을 다시 재정의를 할 수 있기에 address와 menu에 관한 타입을 다시 재정의 함으로써 address 및 menu가 필요한 다른 곳에서도 사용할 수 있다

코드가 훨씬 깔끔해보임

제네릭 문법

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

const [myRestaurant, setMyRestaurant] = 
      useState<Restaurant>(data)

useState을 선언할 당시에 Restaurant 라는 타입을 쓰겠다 라고 선언할 때 <> 안에 해당 타입을 넣어주는 식으로 사용

interface로 타입 정의

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

interface OwnProps {
	info: Restaurant
}

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

interface extends란?

클래스를 상속하는 클래스가 있듯이, 인터페이스 또한
extends 키워드를 사용해 인터페이스를 확장 할 수 있음

예시

interface ButtonInterface {
  readonly _type:string;
  width?:number;
  height?:number;
  onInit?():void;
  onClick():void;
}
​
interface ButtonSizeInterface {
  readonly _size:number;
  small():void;
  medium():void;
  large():void;
  onChangeSize?():void;
}
​
// ButtonInterface, ButtonSizeInterface를 다중 확장하는 ImageButtonInterface
interface ImageButtonInterface extends ButtonInterface, ButtonSizeInterface {
  readonly _url:string;
  getUrl():string;
  setUrl?(url:string):void;
  onChangeUrl?():void;
}

개인과제 시작

과제의 필수 구현 사항

getCountries.ts

import axios from 'axios';
import { Country } from '../types/Country';

const baseUrl = "https://restcountries.com/v3.1/all";

export const getCountries = async (): Promise<Country[]> => {
 try {
   const res = await axios.get<Country[]>(baseUrl);
   console.log(res.data);
   return res.data;
 } catch (error) {
   console.error("Axios Get Error:", error);
   throw error;
 }
};

export default getCountries;

처음엔 Promise 옆에 any 타입을 적어두고 후에 Country.ts를 작성한 후에 수정했음

Country.ts

export interface Country {
   name: {
       common: string;
   }
   region: string;
   flags: {
       png: string;
   }
   ccn3: number;
};

나라에 대해 필요한 정보만 타입 정의

CountryList.tsx

import React, { useEffect, useState } from "react";
import styled from "styled-components";
import { Country } from "../types/Country";
import getCountries from "../api/getCountries";
import CountryCard from "./CountryCard";

const Container = styled.div`
  padding: 20px;
`;

const CountryGrid = styled.ul`
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
`;

const CountryList: React.FC = () => {
  const [countries, setCountries] = useState<Country[]>([]);
  const [selectedCountries, setSelectedCountries] = useState<Country[]>([]);

  useEffect(() => {
    const fetchCountries = async () => {
      try {
        const data = await getCountries();
        setCountries(data);
      } catch (error) {
        alert(error);
      }
    };
    fetchCountries();
  }, []);

  const handleSelected = (country: Country): void => {
    if (
      !selectedCountries.find(
        (country: Country) => country.name.common === country.name.common
      )
    ) {
      setSelectedCountries([...selectedCountries, country]);
    } else {
      setSelectedCountries(
        selectedCountries.filter((country: Country) => {
          return country.name.common !== country.name.common;
        })
      );
    }
  };

  return (
    <Container>
      <h1>좋아하는 나라</h1>
      <CountryGrid>
        {selectedCountries.map((country) => (
          <CountryCard
            key={country.ccn3}
            country={country}
            handleSelected={handleSelected}
          />
        ))}
      </CountryGrid>
      <h1>Countries</h1>
      <CountryGrid>
        {countries.map((country) => (
          <CountryCard
            key={country.ccn3}
            country={country}
            handleSelected={handleSelected}
          />
        ))}
      </CountryGrid>
    </Container>
  );
};

export default CountryList;

동일한 나라가 selectedCountries에 있는지 확인하고, 해당 나라가 있으면 제거하고 없으면 추가하는 방법으로 코드를 작성했음

CountryCard.tsx

import React from "react";
import { Country } from "../types/Country";
import styled from "styled-components";

const CountryItem = styled.li`
  flex: 0 0 33.3333%;
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
  border: 1px solid black;

  h3 {
    margin: 10px 0;
  }

  p {
    margin: 5px 0;
  }

  img {
    width: 100px;
    height: auto;
  }
`;

interface CountryCardProps {
  country: Country;
  handleSelected: (country : Country) => void;
}

const CountryCard: React.FC<CountryCardProps> = ({ country, handleSelected }) => {
  return (
    <CountryItem onClick={() => handleSelected(country)}>
      <h3>{country.name.common}</h3>
      <p>{country.region}</p>
      <img src={country.flags.png} alt={`${country.name.common} flag`} />
    </CountryItem>
  );
};

export default CountryCard;

나라 목록에서 원하는 나라를 클릭하면 좋아하는 나라 항목으로 이동하게끔 구현은 성공했는데 아무리 많은 나라를 클릭해도 한 나라만 이동했다 사라졌다

아무래도 handleSelected 함수에 결함이 있는 거 같아 수정을 해줬다

전

const handleSelected = (country: Country): void => {
    if (
      !selectedCountries.find(
        (country: Country) => country.name.common === country.name.common
      )
    ) {
      setSelectedCountries([...selectedCountries, country]);
    } else {
      setSelectedCountries(
        selectedCountries.filter((country: Country) => {
          return country.name.common !== country.name.common;
        })
      );
    }
  };

후

const handleSelected = (country: Country): void => {
    if (
      !selectedCountries.find(
        (selectedCountry: Country) => selectedCountry.name.common === country.name.common
      )
    ) {
      setSelectedCountries([...selectedCountries, country]);
    } else {
      setSelectedCountries(
        selectedCountries.filter((selectedCountry: Country) => {
          return selectedCountry.name.common !== country.name.common;
        })
      );
    }
  };

일단 find, filter를 사용할 때 받는 매개변수 이름을 바꿔주었다. 왜냐면 위에 handleSelected의 매개변수 이름이랑 같기에 오작동을 일으키는 듯 싶었다.

수정을 해주고 나니 정상적으로 잘 작동되는 걸 볼 수 있었다.

마치 js, react를 처음 배울 때 무척이나 어려워했던 것처럼
typescript도 헷갈리는 부분이 너무 많다..ㅠㅠㅠ