React에서 API호출

js 내장 객체 async, awiat, fetch이용한다.

1. API 호출

const getDate = async () => {
    const res = await fetch(`https://jsonplaceholder.typicode.com/comments`).then((res) => res.json());
    });
  };

• async객체를 이용해 promise를 반환하는 함수를 만든다.
• await를 이용해 API를 호출하는데, fetch와 then을 이용해 API데이터가 불러 와 질때까지 다른 함수들이 진행되지 못하도록 한다.

2. API 데이터 가공하기

const initDate = res.slice(0, 20).map((it) => {
      return {
        author: it.eamil,
        content: it.body,
        emotion: Math.floor(Math.random() * 5) + 1,
   		// 호출한 API에 감정점수를 대체할 만한 것이 없어 1~5사이의 랜덤한 수가 나타나게 했음
        created_date: new Date().getTime(),
        //현재 시간을 milliseconds로 변환
        id: dataId.current++,
        //id값은 증감하도록 해서 겹치는 수가 나오지 않도록 한다.
      }

• 현재 불러온 API데이터는 50개의 객체 요소를 가진 배열이다.
• 너무 많기 때문에 적당히 splice를 이용해 자른다.
• map()함수를 이용해 각 요소를 순회하면서 데이터들을 우리가 원하는 데이터로 가공시킨다.

3. 가공된 데이터를 화면에 나타내기

setData(initDate);

setData함수를 이용해 data의 값을 변화시킨다.

제일 중요한 것!

API 데이터는 랜더링 하는 순간에 데이터를 불러오고 가공하여 화면에 나타나도록 처리하기 위해서는 useEffecet를 이용해 mount순간에 동작하도록 해야 한다.

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

함수 호출!

---

무료 API
https://jsonplaceholder.typicode.com/