React 13-1 React-qurery (없이 api 호출)

 - api는 간다 하게 생각하면 프론트와 백 서버의 소통 방식이라고 생각하면 된다. 그렇다면 React에서는 어떻게 api로 소통할까? 우선 React-qurery라는 좋은 라이브러리가 있지만 없다는 전제로 구성을 해보자!!

 

React-qurery 없이 api 호출하기

1. 우선 호출 시 date를 받을 변수를 선언해야 한다. (우선 TS가 없다는 전제로 해보자!!) (공부한 곳에서 코인 정보가 있는 open api를 사용해서 그것을 예로 들었다!!)

const [coins, setCoins] = useState([]);

 

2. 그 다음은 api 호출하고 json형태로 바꿔준다. (useEffect, fetch() 사용!!)

useEffect(() => {
  (async () => {
    const response = await (await fetch('api url')).json();
    // 위와 동일
    // const response = await fetch('api url');
    // const json = await response.json();
  })();
  setCoins(response);
}, []);

 

date를 json형태로 잘 받아 와지는 것을 확인할 수 있다.

 

 

---

동적 api 호출 방법

 - 그렇다면 api가 유동적으로 바뀌는 값이 있다면 어떻게 해야 할까?

사실 별거 없다!!!! 동적인 부분에 ${} 사용해 변수명을 넣고 useEffect에 변수명이 변경될 때마다 호출할 수 있게 하면 된다.

 

예)

// React-router-dom에 있는 useParams hook으로 변경되는 url 가져오기
const { coinId } = useParams([]);

// api 호출 data 담을 변수
const [info, setInfo] = useState([]);

// 동적 api 호출
useEffect(() => {
    (async () => {
        const infoData = await 
            (await fetch(`api url/${coinId}`))
        .json();
	})();
    setInfo(infoData);
}, [coinId]);