[React] axios

📚 axios 관련 좋은 글들 모음
🔗 axios-http.com
🔗 Inpa Dev

지금까지 바닐라 JS건, 리액트건 모두 서버가 없는 환경에서 작업을 하다 보니 새로고침을 하면 자동으로 값이 날아가기 일쑤였다.

하지만 받은 값을 저장할 수 있다면 얼마나 좋을까?

이번 포스팅에서는 서버와 소통을 하기 위한 징검다리를 놓아 줄, Axios 라이브러리에 대해 알아보자!

💡 Axios 란?

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있습니다). 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용합니다.

axios 공식 홈페이지에서는 위와 같은 설명을 볼 수 있다.
Promise 기반 HTTP 클라이언트 라는 문구가 포인트라고 생각된다.

사용자로 부터 값을 받아서 서버로 보내서 저장 시킨 후, 그 값을 리스트화 해서 화면에 뿌려주고
원하는 값을 추가, 수정, 삭제까지...! 이 모든 걸 CRUD라고 한다.

🤔 그럼 CRUD는 뭘까?

대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말이다 - https://ko.wikipedia.org/wiki/CRUD

흔히 우리가 블로그나 카페에서 하는 동작들이라고 생각하면 된다.

글을 쓰고(Create) 쓴 글들을 읽고(Read) 오타를 발견하면 수정을 하고(Update) 이상한 게시글은 제거하고(Delete)... 이런 동작들 말이다.

맨 처음에도 말했지만, Axios는 라이브러리이기 때문에 우리가 서버와 함께 무언가를 할때 좀 더 편리하고 직관적인 메서드들을 제공한다. CRUD에 맞춰서 어떤 메서드들이 있는지 한번 알아보자.

💡 Create - axios.post()

axios.post()는 추가를 해주는 함수이다.
()안에는 서버와의 경로, 추가할 내용을 순서대로 담아주면 된다.

예시 코드

const onSubmitHandler = async () => {
    axios.post('http://localhost:4001/todos', inputValue);
    // setTodos([...todos, inputValue]); // 실시간 반영을 위해 업데이트
    fetchTodos(); // 다시 DB를 읽어오게끔 하는게 좀 더 좋다!
  }

💡 Read - axios.get()

axios.get()은 조회를 하는 함수이다.
()안에는 서버와의 경로를 담아주면 된다.

하지만 조회라는건 서버에 있는 데이터를 가져다가 보여기주는 것이기 때문에 axios.get() 메서드를 사용하기 전, await를 꼭 사용해 줘야한다.

참고로 await는 화면에 조회를 하기 전에 우선 서버로부터 데이터를 받을때까지 기다려! 하는 용도이다.

예시 코드

const fetchTodos = async () => {
    const {data} = await axios.get('http://localhost:4001/todos'); // 끝날때 까지 기다려준다. (pending이 뜨는 이유)
    setTodos(data);
  }

💡 Update - axios.patch()

axios.patch()는 수정을 하는 함수이다.
()안에는 서버 경로, 수정할 것을 순서대로 담아주면 된다.

여기서는 '어떤 것'을 기준으로 수정을 할지를 정해야 하기 때문에 보통 경로를 백틱으로 묶어서 경로 끝에 ${}를 이용해 '어떤 것'을 넣는다.

그리고 map함수를 이용해서 해당 값만 수정할 수 있도록 하면 된다.

예시 코드

const onUpdateButtonClickHandler = async () => {
    axios.patch(`http://localhost:4001/todos/${targetId}`, {
      title : contents
    })
    setTodos(
      todos.map((item)=>{
      if (item.id == targetId){
        return {...item, title : contents}
      } else {
        return item;
      }
    }))
  }

💡 Delete - axios.delete()

axios.delete()는 삭제를 하는 함수이다.
()안에는 서버 경로, 삭제할 것을 순서대로 담아주면 된다.

delete도 '어떤 것'을 기준으로 수정을 할지를 정해야 하기 때문에 경로에 백틱을 넣고 끝에 ${}를 이용해 '어떤 것'을 넣어 준다.

그리고 filter함수를 사용해서 일치하지 않는 나머지만 보여지게 하면 된다.

예시코드

const onDeleteClickHandler = async (id) => {
    axios.delete(`http://localhost:4001/todos/${id}`);
    setTodos(todos.filter((item)=> {
      return item.id !== id;
    }))
  }