React Axios 배우기 (with Json-server)

Axios란?

Axios란 node.js와 브라우저를 위한 Promise기반 HTTP 클라이언트
http를 이용하여 서버와 통신하기 위해 사용하는 패키지

⭐ API 서버는 json-server를 사용합니다.

---

1. GET 📥

코드

const [todos, setTodos] = useState;

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

useEffect(()=>{
  fetchTodos();
  console.log(todos);
}, [])

URL

• 전체 정보, 상세 정보
  • path variable

    • Plural routes

      /posts

  • posts의 상세 정보

    • Plural routes / :id

      //posts의 :id
      /posts/1 

• 정보를 filter
  • query

    // 해당하는 모든 정보 필터
    /posts?title=react
    
    // and 필터
    /posts?title=react&id=3
    
    // 메소드 값으로 필터
    /todos?option.good=very-good

---

2. POST 📤

네트워크 탭

• 브라우저의 네트워크 탭의 로그 체크
  • headers
    • General : url, method, Status Code (201 정상)
    • Response Headers
    • Request Headers
  • payload
    • post 보낸 body 확인
  • response
    • post 요청에 따른 서버의 응답값

코드

const [todo, setTodo] = useState({ 
	title: "", 
})
...
const onSubmitHandler = (todo) => {
  axios.post("http://localhost:3001/todos", todo);
};
...
<form
	onSubmit = {(e)=>{
		e.preventDefault();
		onSubmitHandler(todo);
	}}
>
	<input
		type="text"
		onChange={(e)=>{
			const { value } = e.target; target에서 value 뽑기
			setTodo({
				...todo,
				title: value,
			})
		}}
	>
	<button>추가</button>
</form>

---

3. DELETE 💥

코드

const onClickDeleteButtonHandler = (todoId) => {
	axios.delete(`http://localhost:3001/todos/${todoId}`);
};
...
<button
	type="button"
	onClick={() => onClickDeleteButtonHandler(todo.id)};
>
삭제
</button>

---

4. PATCH ⚾

• 데이터를 수정하고자 서버에 요청을 보낼 때 사용하는 메소드
  • HTTP 환경에서의 대부분의 사람들이 약속한 문맥
    • 반드시 patch, put을 사용해야 하는 건 아님

코드

const [targetId, setTargetId] = useState(null);
const [editTodo, setEditTodo] = useState({
	title: "",
})
...
const onClickEditButtonHandler = (todoId) => {
	axios.patch(`http://localhost:3001/todo/${todoId}`)
};
...
<div>
	<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" // form의 영향에서 벗어남
		onClick={() => onClickEditButtonHandler(targetId, editTodo)}
	>
	수정하기
	</button>
</div>

---

5. 통신방법

1. axios(config)

   • config 설정을 axios()에 전달하여 요청

   axios({
     url: '/user/12345',
     method: 'put',
     data: {
       firstName: 'Fred',
       lastName: 'Flooooooo'
     }
   })

2. HTTP 메소드 별칭으로 요청

   • .get(), .delete(), .post(), .put()