만들자

이번 시간에는 메인 페이지가 많이 휑해서
음악페이지에 어울리는 것으로 집어넣어볼까 한다.

구상

바로 음악 추천 View.

나는 APPLE Music을 사용하는데,
음악 검색 목록에 들어가면

대충 이런식으로 생겼다.

위와 비슷한 형식으로 만들어 볼 생각이다.

---

API

Itunes 음악 추천 API를 사용할 것이고 해당 API는
여기서 무료로 즐겨볼 수 있다.

API를 받아오려면 데이터를 받아오는 코드가 필요하죠?

예전의 제 코드를 한번 봅시다.

const getAnime = async () => {
    const json = await (await fetch(
      `https://kitsu.io/api/edge/anime/${id}`
    )).json();

    setAnime(json.data.attributes);
    setLoading(false);
    console.log(json);
  }

  useEffect(() => {
    getAnime();
  }, []);

애니메이션 사이트를 만들 때 사용했던 코드인데,

https://kitsu.io/api/edge/anime/${id}

await fetch(`https://kitsu.io/api/edge/anime/${id}`)

위 주소에 대한 네트워크 요청을 생성후, fetch 함수를 통해 Promise를 반환.

await (상위 코드).json();

받은 응답의 본문을 JSON형식으로 파싱해줬다.

---

장단점

fetch 직접 사용

위 방법은 직접 'fetch'를 사용하는 방법이었다.

해당 방법을 사용하면 직관성이 뛰어나고, 작은 프로젝트에 적합하다.
하지만 로딩 상태 관리가 수동이라 직접 관리가 필요하고, 자동화 기능이 부족하다.

즉 간단한 프로젝트에는 어울리지만 복잡한 상태 및 로직을 자동으로 관리하기 힘들다.

useQuery 사용

반면 이번에 사용해볼 useQuery는

1. 데이터 관리가 간편하다.
   데이터를 자동으로 캐싱하고 다양한 기능을 제공해준다.
2. 로딩 상태 관리를 자동으로 해준다.
   데이터 로딩 상태를 자동으로 관리해주어 별도의 로딩 상태 관리가 필요 없다.
3. 옵션 설정이 가능하다.
   여러 옵션을 사용해 캐시 제어, 재시도 로직 등을 쉽게 구성이 가능하다.

이번 프로젝트에 크게 어울리지는 않지만,
이후 참여할 프로젝트에서 useQuery를 사용하게 되어 미리 공부겸 사용해보기로 했다.

---

코드 작성

이후에 작성할 코드에 맞춰

상위 component 에서 prop으로 API 주소 뒤에 붙을 ID를 준다고 생각하고 코드를 짰다.

export default function MusicView({ Item }: CategoryProps) {

  const { data, isLoading, error } = useQuery<MusicData, Error>(
    ['musicData', Item.name as QueryKey],
    () =>
      fetch(`https://itunes.apple.com/search?term=${encodeURIComponent(Item.name)}`).then((res) => res.json())
  );


  if(isLoading){
    return <div>Loading...</div>;
  }

  if(error){
    return <div>Error: {error.message}</div>
  }

  
  return(
    <div>
      {data?.results.map((result) => (
        <div key={result.trackId}>{result.trackName}</div>
      ))}
    </div>
  )
}

다음 글에서는 해당 코드를 사용해 인터페이스에 구현해보도록 하자.
아마 Home.tsx에서 해당 컴포넌트를 잘 불러와주면 되겠지?