[React] 바닐라 JS 게시판 리팩토링 (3) - axios

(1) Read, Create

https://1ncomparable.tistory.com/204

[React] 바닐라 JS 게시판 리팩토링 (1) - Read, Create

(2) Delete, Updated

https://1ncomparable.tistory.com/211

[React] 바닐라 JS 게시판 리팩토링 (2) - Delete, Update

 

 

 

오늘은 클라이언트에서 fetch로 보내는 요청들을 axios로 변환해볼것이다. 

axios는 브라우저와 node.js에서 사용할 수 있는 Promise 기반의 HTTP 클라이언트 라이브러리이다. 

각 내용들은 fetch로 작성했을때와 axios로 작성했을때의 내용을 함께 적어 비교해보겠다. 

우선 프로젝트의 내용을 변경하기 전에, fetch와 axios의 차이를 간단하게 정리해보았다. 

 

✅ fetch vs axios

• fetch
  • 빌트인 API. 별도 설치 X
  • .json() 메서드를 사용해야 함
• axios
  • 서드파티 라이브러리. 별도 설치 O
  • 자동으로 JSON 데이터 형식으로 변환됨 

 

우선 axios 사용을 위해 클라이언트 프로젝트에 axios를 설치해주었다.

npm install axios

 

그리고 axios를 사용할 파일 제일 상단에 import 해준다.

import axios from "axios";

 

axios의 기본 형태는 다음과 같다. 

// GET, DELETE
axios.method('url'[, config]);

// POST, PUT
axios.method('url'[, data[, config]]);

 

 

❤️ 게시글 조회 (GET)

fetch

const getData = () => {
    return fetch(url)
      .then((res) => res.json())
      .then((json) => {
        setData(json);
        nextId.current = json[0].id + 1;
      });
  };

 

axios

먼저 데이터를 어떻게 받아오는지를 확인하기 위해 콘솔에 res를 출력해보았다.

return axios.get(url).then((res) => console.log(res));

 

 

fetch에서 res.json()을 했을때와 같은 결과가 나온다. axios는 위에서 다시 살펴보았듯이 데이터를 자동으로 JSON 형식으로 변환해준다. 그래서 따로 변환하지 않아도 된다. 원하는 데이터는 data 속성의 값임으로, res.data를 출력하면 실제 게시판의 데이터들이 배열 형태로 나오게 된다. 따라서, res.data를 setData 함수를 사용해 data의 값으로 넣어준다. 

 

// axios
return axios.get(url).then((res) => {
  setData(res.data);
  nextId.current = res.data[0].id + 1;
});

 

async / await를 사용할경우에는 이렇게 작성할 수 있었다. 

// axios + async/await
try {
  const res = await axios.get(url);
  console.log(res);
} catch (err) {
  console.error(err);
}

await를 사용해 값을 바로 변수 res에 담았을때도 then을 사용했을때와 같은 결과가 출력된다. 

 

 

최종적으로는 이렇게 작성할 수 있다. try / catch를 사용해 에러 처리도 해주었다.

  const getData = async () => {
  
    // axios + async/await
    try {
      const res = await axios.get(url);
      setData(res.data);
      nextId.current = res.data[0].id + 1;
    } catch (err) {
      console.error(err);
    }
  };

 

 

 

🧡 게시글 등록 (POST)

fetch

const postData = (newData) => {
    return fetch(url, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(newData),
    }).then(() => getData());
  };

 

axios

POST 처럼 본문을 함께 보내야 하는 경우에는 두번째 인자로 보낼 데이터를 넣어주면 된다. 

// axios
return axios.post(url, newData).then(() => getData());

// axios + async/await
    try {
      await axios.post(url, newData);
      getData();
    } catch (err) {
      console.error(err);
    }

 

 

 

💛 게시글 삭제 (DELETE)

fetch

const deleteData = (id) => {
    return fetch(`${url}/${id}`, {
      method: "DELETE",
    }).then(() => getData());
  };

 

axios

// axios
return axios.delete(url + `/${id}`).then(() => getData());
    
// axios + async/await
    try {
      await axios.delete(url + `/${id}`);
      getData();
    } catch (err) {
      console.error(err);
    }

 

 

 

💚 게시글 수정 (PUT)

fetch

const putData = (id, title, updatedAt) => {
    const updatedData = {
      id,
      title,
      updatedAt,
    };

    return fetch(url + `/${id}`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(updatedData),
    }).then(() => getData());
  };

 

axios

// axios
return axios.put(url + `/${id}`, updatedData).then(() => getData());

// axios + async/await
    try {
      await axios.put(url + `/${id}`, updatedData);
      getData();
    } catch (err) {
      console.error(err);
    }