[오늘의 일기 만들기] fetch와 axios를 사용하여 API 불러오기 (feat. useEffect)

엘리스에서 Promise, fetch, async/await, axios를 배웠는데 그 중 제일 이해가 잘 갔던 내용은 axios 였다.

문제를 풀면서도 그냥 넘어가기보다는 어느정도 이렇게 동작하는구나 하며 보고 지나갔는데, 일기장 만드는 것에서

fetch로 api를 사용하는 부분이 나왔다.

 

fetch로 가져오는 거면 당연하게도 axios로도 가져올 수 있겠지? 

배운 거 복습할 겸 작성해보자 ! 하고 작성해보았다.

바로 안떠올라서 지난번 풀었던 문제를 다시 보며 풀었다.

 

1. 거기에 추가로 useEffect Hook을 같이 사용했다. useEffect의 두번째 인자에 deps로 받는 부분에 빈 배열을 넣어주면 렌더링 시 한 번만 실행되기 때문에, API는 처음 한 번 불러오면 되니까 그렇게 했다.

 

2. try{} catch{}문도 간단하게 같이 작성해보았다 ㅎㅎ

 

3. 해당 주소의 api값은 공개된 fake api값이라고 한다 ㅎㅎ 신기방기

구글에 jsonplaceholder 검색 후 들어가면 확인할 수 있다.

 

 

---

1. fetch로 받아오기

  const [data, setData] = useState([]);
  const dataId = useRef(0);

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

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

 

참고사항

useEffect는 Promise 객체를 직접 받지 못한다.

useEffect 안에 작성하려면 그 안에 다시 함수를 정의해서 async/await을 적어주어야한다.

 

중간 res에 slice를 해주는 이유는, 해당 api를 가져오면 500개의 데이터가 있기 때문이다. 나는 호출하는 연습을 하고 있는거라

0번째부터 19번째까지 있는 데이터만 잘라썼다.

 

내가 만들고 있는 일기장에는 있지만 해당 api에는 없는 감정점수 부분도 있다.

그 부분은 JS의 내장함수 Math를 활용하여 1부터 5까지 랜덤으로 받게 하는 부분도 재밌었다.👀

 

2. axios 로 api 호출하기

그래서 axios를 사용하는 건 useEffect 안에 작성했다. 이런 식으로 작성이 되는구나를 알게 됐다 (!)

axios는 먼저 터미널에서 npm으로 install 해주고 사용해야한다.

npm install axios

import axios from "axios";

  const [data, setData] = useState([]);
  const dataId = useRef(0);

  useEffect(()=>{
    async function axiosGetData() {
      try{
        const response = await axios.get('https://jsonplaceholder.typicode.com/comments')
        const result = response.data
        
        const initData = result.slice(0,20).map((item)=>{
          return {
            author: item.email,
            content: item.body,
            emotion: Math.floor(Math.random()*5)+1,
            created_date: new Date().getTime(),
            id : dataId.current++
          }
        })
        setData(initData);
      }
      catch(e){
        throw new Error();
      }
    }
    axiosGetData();
  },[]);

try,catch 도 같이 쓰여 더 길어보이지만, 더 길지는 않다.

return 받는 부분 dataId는 위에 useRef로 정의한 변수다.

api로 호출 후 map으로 요소들을 정리하여 보여준다.

 

다음 글은 useRef에 대해 다시 정리해봐야겠다