****중요****Front에서 Back으로 데이터 요청(fetch, push시 사용되는 Fetch API, axios라이브러리에 대하여

관련 실습 코드: https://github.com/dhflekddy/React-and-ReactHookPractice/commits/main/fetchAndAxios    구체적 실습코드 여기에 모두 있으니 꼭보기, Readme도 꼭 보기

fetch사용시 데이터를 서버에 post방식으로 전송시 반드시 지켜야 할 것: https://velog.io/@ctp102/SptringBoot-fetch-post-gson%EC%9C%BC%EB%A1%9C-%EC%84%9C%EB%B2%84%EC%97%90-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A0%84%EC%86%A1-%ED%9B%84-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0

그 외에서 웹 애플리케이션 서버로 스프링 부트를 사용하고 있어 많은 것을 배울수 있는 반드시 이용해야 하는 블로그임)

 

fetch: JS에서 기본으로 제공되는 내장형 API

axios: 별도로 사용되는 라이브러리

preventDefault라는 것은 기본동작을 막는 다는것을 의미한다. 아래코드와 같이 fetch API를 이용하는 onSubmitHandler는 버튼을 눌렀을시 동작하는 함수이다. fetch API를 사용하면 기본적으로 버튼이 눌려졌을때 url의 query-parameter에 name과 그에 해당하는 value들을 기본적으로(default) GET요청을 보내버립니다(버튼이 눌려지면 그 버튼을 감싸고 있는 form태그에 등록된 함수에서 form태그 안에 있는 태그들의 속성인 name과 그 값들을 각각 url의 query- parameter에 붙여주는 것임!). 그리고 이 기본적인 동작을 막기위해 onSubmitHandler함수에 e.preventDefault()라는 함수를 첨가해 준것.

여기서 꼭 익숙히 해놓을 것이 query-parameter에 name에 해당하는 것들이 여기서는 input태그의 속성으로 들어가있는 바로 이 name이라는 것이다!!!(물론 경우에 따라서는 input이 아닌 다른 태그에 붙은 name속성일 수 있을것이다. 이와 같이 어떠한 태그의 속성은 그 역할이 매우 중요하다). 이와 같은 이유로 대부분의 경우 input태그를 꼭 form태그로 감싸고 form태그의 onSubmit속성값으로 어떤 함수를 주는 것이다!!

 

=====================================================================================

참고로 알앋둘것!

참고로 알아둘것. 기본적으로 어떤 요청인지 명시하지 않으면 GET요청(request)이다. 그리고 에러는 위와같이 GET요청은 BODY를 가질수 없다고 오류가 나오는 것을 확인할 수 있다.

=====================================================================================

아래와 같이 onSubmitHandler에서 preventDefault를 주석처리하면 기존에 내가 봐었던 어떤 버튼을 클릭하거나 a태그를 눌렀을때 주소창의 url이 변하는 것을 경험할 수 이따!!!^^

fetch를 사용하여 데이터를 post request를 할때에는 반드시 지켜야할 3가지가 있다. 이 코드는 그 3가지를 지키지 않아 오류가 발생한다. 그 3가지는 여기 소개되어있다.   https://velog.io/@ctp102/SptringBoot-fetch-post-gson%EC%9C%BC%EB%A1%9C-%EC%84%9C%EB%B2%84%EC%97%90-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A0%84%EC%86%A1-%ED%9B%84-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0

=====================================================================================

import { useEffect, useState } from "react";

import axios from 'axios';

const baseUrl='http://localhost:4000';

const App=()=>{

  const [todoList, setData]=useState([]);

  // const [text, setText]=useState('');

  // const fetchData=()=>{

  //   fetch(baseUrl+'/api/todo').then(res=>res.json()).then(data=>{setData(data)});

  // }

  // const fetchData=()=>{

  //   axios.get(baseUrl+'/api/todo').then((response)=>setData(response.data))

  // }

  //만약 위의 axios코드가 깔끔하지 않다면 async, await문법을 이용해 보자

  const fetchData=async()=>{

    const response=await axios.get(baseUrl+'/api/todo');

    setData(response.data);

  }

  // // 서버로부터 데이터를 가져오는(fetch)코드

  useEffect(()=>{

    fetchData();

  },[])

  //서버로 데이터를 보내주는 직접적인 역할을 하는 함수. 함수안에 있는 fetch API궁성 주목하여 보기

  const onSubmitHandler=async(e)=>{

    e.preventDefault();//생략시 GET 요청(request)으로 진행되며(default) 이에따라 주소창의 url이 바뀌는 것을 확인할 수 있다^^

    const text=e.target.text.value;

    const done=e.target.done.checked;

    // fetch(baseUrl+'/api/todo',{

    //   //fetch API를 사용하여 데이터를 post할때는 반드시 아래와 같이 method, headers, body를 추가해 주어야 한다.

    // method:'POST',//소문자도 가능

    // headers:{

    //   'Content-Type':'application/json'

    // },

    // body: JSON.stringify({

    //   text,

    //   done,

    // }),}).then(()=>fetchData());

    await axios.post(baseUrl+'/api/todo',{text, done})//axios의 장점은 이처럼 fetch에서 반드시 넣어주어야 했던 ㅡmethod, headers, 직렬화 부분을 모두 생략할 수 있다(이게 정말 편리한점)

    fetchData();

  };

  // const inputHnadler=(e)=>{

  //   setText(e.target.value);

  // }

 

fetch API를 axios라이브러리를 사용하여 바꾸는 것은 정말 간단하다. npm install axios로 라이브러리 받아준다. import axios from 'axios' .  fetch가 들어간 자리를 axios로 바꾸어 주기(만약 코드가 지저분해 진다면 async, await문법을 사용해 주면됨)

이렇게 데이터를 가져오고 post하는 코드를 하나의 custom hook으로 뺄 수 있습니다. 이렇게 하면 나만의 훅이 되지만 이런 유용한 custom hooks들을 한데 모아놓은 라이브러리가 있는데 이것이 react-query입니다. react-query를 사용하면 더 쉽게 데이터를 가지고 올수 있습니다.