24. 07. 02 TIL

next.js로 코드 짜는 과제 시작!

 

일단 가이드를 따라하면서 했다.

 

먼저 api 폴더를 만들어 준 뒤에 컴포넌트를 만드는데

 

서버, 클라이언트 컴포넌트를 나눠줘야 한다.

 

나누는데 조금 헷갈리긴 했는데

 

일단 useEffect, useState를 써줬기 때문에 use client를 넣어줘야 했고,

 

  const [pokemons, setPokemons] = useState<Pokemon[]>([]);

  useEffect(() => {
    const getPokemons = async () => {
      const res = await fetch('http://localhost:3000/api/pokemons');
      const data = await res.json();
      setPokemons(data);
    };
    getPokemons();
  }, []);

  return (
    <div className="grid grid-cols-6 gap-4 mt-10">
      {pokemons.map((pokemon) => {
        return (
            <div> {pokemon.korean_name}</div>
          </div>
        );
      })}
    </div>
  );

이렇게! 써줬다. 처음엔 use Effect 내부 내용 일부를 서버 컴포넌트에 넣어줘야하나 싶어서 좀 시도를 해봤는데 잘 안 됐고... 그냥 클라이언트 컴포넌트에 저렇게 다 넣었다. 

 

 

그리고 클라이언트 컴포넌트는

const PokemonListPage = () => {
  return (
    <div className="container mx-auto text-center p-3">
      <div className="text-5xl">포켓몬 도감</div>
      <PokemonsComponents />
    </div>
  );
};

이렇게 더 깔끔하게 분리!!

 

보기 아주 편하다.

 

타입은 따로 파일을 만들어서 분리하고 import 해줬다.

 

사실 이번 과제는 작성해놓고 보니 간단한 편인 것 같아서 진도가 쭉쭉 나갔다!