React | Axios (비동기 통신)

🔎 Axios
node.js와 브라우저를 위한 Promise 기반 http 클라이언트

👉 http를 이용해서 서버와 통신하기 위해 사용하는 패키지

---

설치하기

yarn add axios
npm install axios

둘 중 하나를 선택해서 터미널에 입력 후, 설치한다

import axios from "axios"

설치한 패키지를 컴포넌트 상단에 import한다

---

json-server 설정

테스트용 API로 사용할 db.json파일을 생성한다

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

생성한 파일에 데이터를 입력한다

npm install json-server

json 서버를 터미널에 설치해준다

json-server --watch db.json --port 4000

터미널에 위 코드를 입력해서 localhost:4000에 데이터를 저장한다

\{^_^}/ hi!

위 이모티콘이 나왔다면 정상적으로 완료!

---

GET 메소드

get은 서버의 데이터를 조회할 때 사용

axios.get(url[, config])

url : 서버의 url
config : 공식문서에서 더 자세히 확인

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

  const fetchTodos = async () => {
    const { data } = await axios.get("http://localhost:3001/todos");
    setTodos(data);
  };
  
  useEffect(() => {
    fetchTodos();
  }, []);

상태값을 저장할 todos state를 생성하고, 데이터를 받아올 fetchTodos 함수를 선언해서 get방식으로 가져온다
이렇게 가져온 데이터를 setTodos 함수를 사용해 todos를 변경시킨다

useEffect를 사용해서 fetchTodos 함수가 mount 됐을 때 마다 렌더링하게 한다

🔎 async
await를 사용하기 위한 선언문. 항상 function 앞에 위치한다
🔎 await
비동기 처리가 완료 될 때까지 코드 실행을 일시 중지하고 wait. 비동기 함수의 왼쪽에 위치한다

---

POST 메소드

post는 서버에 데이터를 추가할 때 사용

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

const [inputValue, setInputValue] = useState({
    title: '',
  })

추가한 데이터를 관리하는 inputValue state를 생성한다

  const onSubmitHandler = async() => {
    await axios.post("http://localhost:3001/todos", inputValue);
		// setTodos([...todos, inputValue]) 이런 원리지만,
        fetchTodos() // 데이터를 조회하는 함수를 써주는게 더 좋음
  };

데이터를 추가하는 버튼을 작동시킬 함수를 선언하고 데이터 서버에 inputValue라는 새로운 데이터를 추가한다

// html 부분(return문 내부)
<form onSubmit={(e) => {
          //submit 했을 때, 브라우저의 새로고침을 방지하는 함수
          e.preventDefault()
          // 버튼 클릭 시, input에 들어있는 값(state)을 이용하여 DB에 저장(post요청)
          onSubmitHandler()
        }}>
          <input type="text"
            value={inputValue.title}
            onChange={(e) => {
              setInputValue({
                title: e.target.value
              })
            }} />
          <button>추가</button>
        </form>
      <div>
        {todos?.map((item) => (
          <div key={item.id}>{item.title}</div>
        ))}
      </div>

input의 value는 추가 데이터를 관리할 inputValue state의 title로 받아오고, setInputValue 함수를 사용해서 입력된 데이터를 title에 나타내준다

👉 todos에 데이터가 쌓인다
이렇게 추가한 데이터를 map 함수를 사용해서 출력해준다

---

DELETE 메소드

delete는 저장되어 있는 데이터를 삭제하는 요청을 보낼 때 사용

axios.delete(url[, config])

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

데이터를 삭제할 버튼을 작동시킬 함수를 생성하고, delete 메소드를 실행시킨다
삭제한 id를 제외하고 todos를 출력하기 위해 filter 함수를 사용해서 setTodos를 실행한다

// html 부분
{todos?.map((item) => {
          return (
            <div key={item.id}>
              {item.id} : {item.title}
              &nbsp;<button onClick={() => onDelBtnClickHandler(item.id)}>삭제</button>
            </div>
          )
        })}

데이터를 출력하는 map함수 내부에 삭제 버튼을 만들고, 삭제 함수를 연결시킨다
todos의 id를 매개변수로 받아서 함수를 동작하게 한다

---

PATCH 메소드

patch는 데이터를 수정하는 요청을 보낼 때 사용