🌐비동기 통신 방법 - axios (2024. 6. 11.)

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) 
학습주제 : React

학습내용 : axios - GET, POST , DELETE, PATCH (조회, 추가, 삭제, 수정)

학습일 : 2024. 6. 11.

<목차>
1. axios 개념 및 설치/설정
2. axios - GET (조회)
3. axios - POST (작성)
4. axios - DELETE (삭제)
5. axios - PATCH (수정)
6. axios vs. fetch

---

배운 내용 요약

1. axios 개념 및 설치/설정

1) axios란? 

- 공식문서: node.js와 브라우저를 위한 Promise 기반 http 클라이언트

- 쉬운 설명: http를 이용해서 서버와 통신하기 위해 사용하는 패키지

 

2-1) axios 설치

yarn add axios

 

2-2) axios 설정 - json-server 설정

- 프로젝트 root 경로에 db.json 파일을 생성한 후 다음 json 코드(아래 예시 코드를 위한 코드)를 삽입

{
  "todos": [
    {
      "id": "1",
      "title": "react"
    }
  ]
}

---

2.  axios - GET (조회)

axios.get(url[, config])

(예시 코드)

• useState로 todos state 만들기, 초기값은 null
• useEffect로 fetch 불러오되 1번만 불러오기, try - catch 활용

import axios from "axios";
import { useEffect, useState } from "react";

const [todos, setTodos] = useState(null);

useEffect(() => {
    const fetchPost = async () => {
      try {
        const { data } = await axios.get("http://localhost:4000/todos");
        setTodos(data);
        console.log(todos);
      } catch (error) {
        console.error("Error =>", error);
      }
    };

    fetchPost();
  }, []);

---

3.  axios - POST (작성)

axios.post(url[, data[, config]])

(예시 코드)

• <form> 만들기 - preventDefault, onSubmit*(onSubmitHandler)
• <input> 만들기 - type, onChange, useState
• <button> 만들기 - type
• 이벤트 함수 onSubmitHandler 만들기
  - axios.post, async-await, response의 객체 구조분해할당(예: {data} ), setter 함수(예: setTodos)
• submit 결과 보여주기 - todos.map

//새롭게 추가되는 useState
const [todo, setTodo] = useState({ title: "" });

//<form>태그의 이벤트 함수
const onSubmitHandler = async (todo) => {
    const { data } = await axios.post("http://localhost:4000/todos", todo);
    setTodos([...todos, todo]);
  };
  
   return (
    <div>
      <h3>axios 연습</h3>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          onSubmitHandler(todo);
        }}
      >
        <input
          type="text"
          onChange={(e) => setTodo({ ...todo, title: e.target.value })}
        />
        <button type="submit">추가하기</button>
      </form>
      {todos?.map((todo) => {
        return (
          <div key={todo.id}>
            <span>{todo.title}</span>{" "}
          </div>
        );
      })}
    </div>
  );

⭐옵셔널 체이닝 연산자 (Optional Chaining, ?.) - 예: todos?.map

- 간략 설명: 만약 참조가 nullish(null 또는 undefined)이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값은 undefined롤 단락됨

- MDN 공식문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining

 

 

---

4.  axios - DELETE (삭제)

axios.delete(url[, config])

(예시 코드)

• <button> 만들기 - onClick*(onDeleteHandler)
• 이벤트 함수 onDeleteHandler 만들기 - axios.delete, async-await, setter 함수(예: setTodos), filter 

// 삭제 버튼의 이벤트 함수
const onDeleteHandler = async (id) => {
    await axios.delete("http://localhost:4000/todos/" + id);
    setTodos(todos.filter((todo) => todo.id !== id));
  };
  
    return (
    <div>
      <h3>axios 연습</h3>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          onSubmitHandler(todo);
        }}
      >
        <input
          type="text"
          onChange={(e) => setTodo({ ...todo, title: e.target.value })}
        />
        <button type="submit">추가하기</button>
      </form>
      {todos?.map((todo) => {
        return (
          <div key={todo.id}>
            <span>{todo.title}</span>{" "}
            
            {* 새로 추가한 부분 *}
            <button
              onClick={() => {
                onDeleteHandler(todo.id);
              }}
            >
              삭제
            </button>
          </div>
        );
      })}
    </div>
  );

---

5. axios - PATCH (수정) (복잡도: 상😤)

axios.patch(url[, data[, config]])

 

(예시 코드)

• <input> 만들기
  - 내용: 수정하고 싶은 todo의 Id 
  - type, onChange*(setter 함수 - 예: setTargetId)
• <input> 만들기
  - 내용: 수정할 내용
  - type, onChange*(setter 함수 - 예: setEditTodo)
• <button> 만들기 - type*(submit 아님!), onClick*(onEditHandler)
• 이벤트 함수 onEditHandler 만들기 - axios.patch, async-await, 수정된 새로운 변수*(예: newTodos), setter 함수(예: setTodos), 

// 새롭게 추가되는 useState
  const [targetId, setTargetId] = useState("");
  const [editTodo, setEditTodo] = useState({ title: "" });
  
// 수정 버튼의 이벤트 함수
const onEditHandler = async (targetId, editTodo) => {
    await axios.patch("http://localhost:4000/todos/" + targetId, editTodo);
    const newTodos = todos.map((todo) => {
      if (todo.id === targetId) {
        return { ...todo, title: editTodo.title };
      }
      return todo;
    });
    setTodos(newTodos);
  };
  
   return (
    <div>
      <h3>axios 연습</h3>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          onSubmitHandler(todo);
        }}
      >
        <input
          type="text"
          placeholder="수정하고 싶은 Todo의 ID"
          onChange={(e) => {
            setTargetId(e.target.value);
          }}
        />
        <input
          type="text"
          placeholder="수정할 내용"
          onChange={(e) => {
            setEditTodo({ ...editTodo, title: e.target.value });
          }}
        />
        <button
          type="button"
          onClick={() => {
            onEditHandler(targetId, editTodo);
          }}
        >
          수정하기
        </button>
        
        {* 이 다음은 POST 예시 코드의 return문과 동일 *}

---

6. axios vs. fetch

(무슨 차이점이 있는지는 조금 더 배운 뒤에 적어보도록 하자)