리액트에서 API 호출하기

API를 호출하려면 제일 먼저 주소가 필요하다. 임시 API 주소를 jsonplaceholder라는 웹에서 들고 왔는데 임시 API 주소를 사용해야 할 때 좋은 것 같다.

jsonplaceholder 에 들어가서 Resources 에 있는 /comments 를 사용했다.
이제 코드로 API를 호출해야 한다. API는 async - await을 통해 비동기로 호출했다.

const getData = async()=>{
    const res = await fetch(
      'https://jsonplaceholder.typicode.com/comments'
      ).then((res)=>res.json());
    console.log(res);
  };

js의 fetch 함수를 이용해 API 주소에 있는 데이터들을 json 형식으로 변환하여 콘솔에 출력하는 getData 함수다.

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

그리고 mount 될 때 콘솔에 데이터가 출력되도록 getData 함수를 useEffect 안에 넣었다. 참고로 useEffect 는 빈 배열을 전달함으로써 콜백함수가 수행된다.

const getData = async()=>{
    const res = await fetch(
      'https://jsonplaceholder.typicode.com/comments'
      ).then((res)=>res.json());
    
      const initData = res.slice(0,20).map((it)=>{
        return {
          author : it.email,
          content : it.body,
          emotion : Math.floor(Math.random() * 5)+1,
          created_date : new Date().getTime(),
          id : dataId.current++
        }
      })
      setData(initData);
  };

getData 함수에 initdata 를 추가해서 작성해봤다. 콘솔에 데이터가 500개가 찍혀서 너무 먼저 data를 slice 함수로 잘랐다. 0부터 19까지 자르고 해당 데이터들을 순회하면서 author, content, emotion, created_data, id에 맞게 값들을 대응시켰다.

-> setData 에 initData 를 적용시킨 후 화면