24. 06. 27 TIL

이번 타입스크립트 과제 정리!

 

 const [countriesList, setCountriesList] = useState<CountriesType[]>([]);

먼저 state를 만든다.

 

api에 들어있는 데이터를 일단 쫙 가져와야 하는데 그걸 담는 state를 만들어줘야 한다.

 

그럼 그 api 데이터를 가져와야 하는데 

 

여기서 좀 생각을 했다. 쿼리냐 이펙트냐. . .

 

찾아보니까 useEffect는 단순히 컴포넌트가 마운트 될 때 데이터를 가져오는 등의 작업을 처리할 때 사용하고, useQuery는 데이터 페칭, 캐싱, 로딩 상태 관리, 오류 처리 등을 쉽게 관리할 수 있도록 도와준다고 한다.

 

그래서 지금 상황에서는 서버에서 데이터를 가져오는 것이니까 useQuery가 더 적절한 느낌이었지만,,,

 

간단한 코드를 짜는 거라 그냥 useEffect를 쓰기로,,, (귀찮아서아님)

 

하여튼 그래서 useEffect를 작성해준다.

  useEffect(() => {
    const getApi = async () => {
      const api = await countryApi();
      return setCountriesList(api);
    };
    getApi();
  }, []);

일단 async await 써준다.

async로 나라 목록 가져올 때까지 기다리라. . . 

await로 기 다 려. . .

써주고 데이터가 왔다? api에 저장해준다.

그리고 setCountriesList에 api를 넣어준다.

그리고 getApi를 실해주면~

 

화면에 딱 뜬다.

 

그럼 이제 뭘 해줘야 한다?

 

뿌려줘야 한다...

    {countriesList.map((country) => {
              return (
                <CountryCard
                  key={uuidv4()}
                  country={country}
                  selectedCardShow={selectedCardShow}
                />
              );
            })}

간단하게 countriesList를 map으로 돌려서 뿌려주면 되는데...!

 

CountryCard는 각 나라 정보를 화면에 카드 형태로 보여주는 컴포넌트다.

키는 uuid를 사용했고, country와 또 useState로 새롭게 만든 selectedCardShow라는 속성도 컴포넌트에 전달해준다/