[TIL #43] Typescript 개인과제-1

개인과제를 최종 확인하던 도중, favorite country에서 country로 되돌리면 카드들이 원래 위치가 아니라 맨 아래로 내려간다는 것을 발견했다.

isFavorite을 type에 추가해서 사용해도 되었지만,
한줄만 쓰면 해결되는 문제였다.

countries 배열에서 특정 조건을 만족하는 요소들을 걸러내어 SortContries라는 새로운 배열을 생성했다.

 const SortContries = countries.filter((country) => !favoriteCountries.find((e) => e.name.common === country.name.common));

!favoriteCountries.find((e) => e.name.common === country.name.common):

! 연산자는 find 메서드가 undefined를 반환할 경우 true가 되도록 하게 한다. 즉, favoriteCountries 배열에 country.name.common과 같은 이름을 가진 나라가 없을 경우 true가 되어 원래 위치로 간다.

countries 배열에서 favoriteCountries 배열에 존재하지 않는 나라들만 걸러내어 SortContries 배열에 저장하는 코드를 추가해주었더니 해결되었다.

전체코드

//countryList.tsx
import { useEffect, useState } from "react"
import { PostCountries } from "../api/countriesApi";
import { Country } from "../types/Country"
import CountryCard from "./CountryCard";

export const CountryList = () => {
    const [countries, setCountries] = useState<Country[]>([]);
    const [favoriteCountries, setFavoriteCountries] = useState<Country[]>([]);

    useEffect(() => {
      const fetchCountries = async () => {
        try{
          const data = await PostCountries();
          setCountries(data);
        }catch(error){
          console.log("에러",error);
        }
      };
  
      fetchCountries();
    }, []);


  const SelectFavoriteCountry = (country: Country) => {
    setFavoriteCountries((prev) => {
      if (prev.find((e) => e.name.common === country.name.common)) {
        return prev.filter((e) => e.name.common !== country.name.common);
      } else {
        return [...prev, country];
      }
    });
  };

  const SortContries = countries.filter((country) => !favoriteCountries.find((e) => e.name.common === country.name.common));

  return (
    <div className="p-6">
      <h2 className="text-2xl text-center mt-12 font-bold ">Favorite Countries</h2>
      <ul className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 m-10">
        {favoriteCountries.map((country) => (
          <li key={crypto.randomUUID()}>
            <CountryCard country={country} isSelected={true} onClick={() => SelectFavoriteCountry(country)} />
          </li>
        ))}
      </ul>
      <h2 className="text-3xl font-bold text-center mt-12 mb-10">Countries</h2>
      <ul className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        {SortContries.map((country) => {
          return (
            <li key={crypto.randomUUID()}>
              <CountryCard country={country} isSelected={false} onClick={() => SelectFavoriteCountry(country)} />
            </li>
          );
        })}
      </ul>
  </div>
  
  )
}