react에서 api 사용하는법! (fetch)

다음에 도전할 과제가 api를 활용하는 과제인 김에 이참에 api사용방법을 알아보기로 하였다.

이번에는 fetch를 통해서 구현해볼 생각이다.

fetch()란?

자바스크립트 내장 객체 (API 호출하는 역할)
fetch() 함수는 찾아보니 window객체에 소속되어 있다고 해서 window.fetch()로 사용되기도 한다고 한다.

fetch() 사용 방법

fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

위 코드박스에 있는 방식으로 사용하는 것이 정석적인 방법인 듯 하다.

안에 있는 내용들을 해석해보자면

url:api를 사용할 때 불러오는 url인 듯 하다
option:불러올때 사용되는 듯 한데 아직은 어디에 어떤 방식으로 사용되는지 잘 모르겠다.
.then: .then이 붙어있는 부분이 작동되있거나 거부가 됐을 때 작동된다. 위 부분에서는 그냥 불러오면 사용되는 것 같다.
response:불러온 값들이 들어가는 부분인 것 같다.
.catch: 뒤에 붙어있는 error이 나왔을 때 바로 실행하는 것 같다.

아마 내용은 이정도가 다인 것 같다.

실제 실행

fetch(URL)
  .then((response) => response.json());

이렇게 사용하는 것 같다.

과제에서 포켓몬 api를 사용하는 만큼 한번 PokeAPI로 테스트 해 볼 것이다.

const poke = () => {
    fetch("https://pokeapi.co/api/v2/pokemon/ditto")
        .then((response) => response.json())
        .then((data) => {
            console.log(data);
        })
        .catch((error) => {
            console.error("Error:", error);
        });
};

위의 코드를 onClick={poke}로 실행해본 결과

라는 결과가 나왔다.

위와 같이 불러오는 것은 문제가 없는데 그렇다면 이 값을 어떻게 사용할 수 있을까?

가져온 데이터 활용

자세히 보면 크게 abilities,cries,forms,game_indices....등이 있고 그 안에 자세한 값들이 있다는 것을 알 수 있다.

그런데 출력할 내용 중에 내가 지금 필요한 것은 id와 name이기에

console.log(data);부분을 console.log(data.id,data.name);으로 바꿔서 출력해보면

이라는 우리가 원하는 값만 나오게 된다.

활용-2(페이지 출력)

아까 가져온 값에서 몇가지를 더 추가해서 출력해보았다

import React, { useState } from "react";

function App() {
    const [pokemons, setPokemons] = useState([]);

    const poke = async () => {
        const newPokemons = [];
        for (let a = 1; a < 152; a++) {
            try {
                const response = await fetch(
                    `https://pokeapi.co/api/v2/pokemon/&#36;{a}`
                );
                const speciesResponse = await fetch(
                    `https://pokeapi.co/api/v2/pokemon-species/&#36;{a}`
                );

                const data = await response.json();
                const speciesData = await speciesResponse.json();

                const koreanNameEntry = speciesData.names.find(
                    (name) => name.language.name === "ko"
                );
                const koreanName = koreanNameEntry
                    ? koreanNameEntry.name
                    : data.name;

                newPokemons.push({ id: data.id, name: koreanName });
            } catch (error) {
                console.error("Error:", error);
            }
        }
        setPokemons(newPokemons);
    };

    return (
        <div className="App">
            <button onClick={poke}>Fetch Pokemon</button>
            <ul>
                {pokemons.map((pokemon) => (
                    <li key={pokemon.id}>
                        {pokemon.id}: {pokemon.name}
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default App;

1.usestate로 바뀌는 값 저장하기

2.async와 await로 순차적으로 처리하기

3.정보와 species받아와서 json으로 바꾸기

4.정보에서 name만 빼고 species에서 language가 ko인 이름(한국어이름)가져오기

5.newPokemons에 넣기

6.newPokemons에 있던 값을 한번에 state에 집어넣고 출력하기

순으로 작동된다.

결과적으로는

이렇게 나온다.

아직 css가 없어서 일자로 나오지만 이래저래 하면 도감 느낌으로 할 수 있을 듯 하다.

POST,PUT,DELETE

생각하보니 제목이 api인데 나머지 중요한 3개도 안해서 소개하자면

POST

fetch("URL", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Test",
    body: "Testing!",
    userId: 1,
  }),
})
  .then((response) => response.json())

위 방식으로 사용하는데

url: 말 그대로 post용 url이다.
body: JSON.stringify({}) :중괄호 안에 들어가는 값이 post 할 값인 것 같다.

PUT

post랑 작동이 비슷한 느낌이어서 method가 "PUT"인 것 빼고는 달라지는것이 거의 없는 것 같다.

DELETE

어떤거 지울지만 고르는것이어서 get과 큰 차이가 없다.

도움받은 글