[TS][프로젝트] Country Card🗺️ - API 호출 로직, useState를 이용한 상태 관리 TypeScript로 구현하기

 

💙 Link

🔗 깃허브 : https://github.com/Park-Yuyeong/account-book
✈️ 웹사이트 : https://country-card-sooty.vercel.app

 

🛠️ Stacks

 

☁️ Country API

class CountryAPI {
  private client: AxiosInstance;

  constructor(client: AxiosInstance) {
    this.client = client;
  }

  async getCountries() {
    try {
      const path = "/all";
      const response = await this.client.get<TCountry[]>(path);
      const result = response.data;

      return result;
    } catch (error) {
      console.error("Country API Error => ", error);
    }
  }
}

• GET 메서드를 활용한 API 호출

 

☁️ useState를 이용한 상태 관리

  const [countries, setCountries] = useState<TCountry[]>([]);
  
  const changeCountryCardState = (country: TCountry) => {
    const newCountries = countries.map((prevCountry) =>
      prevCountry.name.common === country.name.common
        ? { ...prevCountry, selected: !prevCountry.selected }
        : prevCountry
    );

    setCountries(newCountries);
  };

• 상태 변화에 따라 selected 속성이 변하도록 구현
• selected 값이 true면 Favorite Countries에 나라 카드 위치
• selected 값이 false면 Countries에 나라 카드 위치