Open-API / Public-API

[Public-APIs 깃허브] : open API를 제공하는 사이트를 모아놓은 링크

Auth

• apiKey: 키(로그인) 필요

HTTPS

• yes: HTTPS로 데이터 요청해야한다.

CORS: Cross Origin Resource Sharing

• yes : 다른 origin에서 데이터를 가져올 수 있다. 데이터 조회 가능!
• no : 모바일이나 백엔드 등 브라우저가 아닌 환경에서 요청하면 가능 / 브라우저에서 데이터 조회 요청 불가능(브라우저가 차단한 것, 브라우저가 아닌 환경에서 요청하면 된다. 모바일에서는 가능)

사용방법

rest-API를 연습할 수 있는 postman에서 미리 API를 사용해볼 수 있다.
[postman]
: 크롬 웹에서 실행하는 것을 권장! (데스크탑 앱은 글자가 깨지거나 버그가 있을 수 있다.)

useEffect를 사용하자!

useEffect를 쓰지 않고 밖에서 setState를 하게되면 화면이 렌더 되자마자 값이 바뀌어서 또 렌더되는 것이 반복된다.
useEffect를 사용하면 최초 한번은 다시 렌더되겠지만 그 이후에는 다시 실행되지 않는다.

useEffect 안에 함수를 만들어서 호출하자!

useEffect에는 async를 붙일 수 없기 때문에, 안에 함수를 하나 만들고 useEffect 안에서 그 함수를 호출해서 사용해야 한다.

import axios from "axios";
import { useEffect, useState } from "react";

export default function OpenApiWithUseEffectPage() {
  const [dogUrl, setDogUrl] = useState(""); // 이미지 주소 초기값

  //   setDogUrl(result.data.message); 
  // 이렇게 useEffect에 넣지 않고 쓰면 실행되자마자 setState 요청이 가고 리렌더 되고 또 요청이 가고 리렌더되고 ~

  useEffect(() => { // 페이지에 접속하자마자 axios가 실행되도록 useEffect를 사용한다.
    // async는 여기는 안 붙는다. 그래서 아무 함수나 만들어주고 거기에 async 붙여서 함수 호출
    const aaa = async () => {
      const result = await axios.get("https://dog.ceo/api/breeds/image/random");
      setDogUrl(result.data.message); // 한번만 실행된다. 이렇게 해도 리렌더가 한번 더 실행되긴 한다.
    };
    aaa();
  }, []);

  return (
    <div>
      <img src={dogUrl} />
    </div>
  );
}

한두개는 axios 방식으로도 괜찮겠지만,
rest 형태의 프로젝트를 하게 된다면 GraphQL을 할 때 Apollo Client를 사용했던 것처럼 쓸 수 있게 해주는 react query를 설치해서 활용하는 것이 좋다.

[React Query]
rest-api를 graphQL에서 useQuery(), useMutation() 하듯이 거의 동일하게 쓸 수 있게 해준다.