<React> 서버와 통신하기-ajax

서버가 터졌다는 말은 자주 들어봤는데...
그래서 그 서버가 뭔대??🤔
유저가 데이터 달라고 요청을 하면 데이터를 보내주는 프로그램
근데 그냥 내놔! 하면 주는게 아니니까 규격에 맞춰 요청을 해야한다
1. 어떤 데이터인지(URL형식으로)
2. 어떤 방법으로 요청할지(GET 또는 POST)
이번 포스팅은 axios라이브러리를 사용해서 서버와 통신하는 방법을 배워봅시다

제목에 적힌 ajax는 뭔대요?

서버에 GET,POST 요청할 때 새로고침 없이 데이터를 주고 받을 수 있게 도와주는 브라우저 기능
예로) 새로고침없이 댓글을 서버로 전송,새로고침없이 쇼핑몰 상품을 더 가져옴

ajax로 get/post요청을 하는 방법은 여러가지가 있다
1.XHLHttpRequest :옛날문법
2.fetch() :최신문법
3.axios :외부라이브러리

오늘은 외부라이브러리 axios를 사용해 보겠다

• GET
  1.npm install axios 터미널에서 설치
  2.axios를 상단에 import
  3.axios.get(url)로 get요청을 보낸다
  4.then으로 가져온 데이터결과는 .data안에 들어있다
  5.실패할 경우 실행할 코드를 catch()안에 넣는다

axios

import axios from "axios"

function App(){
  let [data, setData] = useState([]);
  const fetchData = () => {
    axios
   .get("URL")
   .then((result) => setData(result.data))
   .catch(() => '로딩실패');
  };
}

async-await

import axios form "axios"

function App(){
  let [data, setData] = useState([]);
  const fetchData = async() => {
    const res=await axios
   .get("URL");
   setData(res.data)
  };
}

• POST

axios.post("URL",{name:"kim"}

위 처럼 실행하면 {name:"kim"}자료가 전송된다
완료시 특정 코드를 실행하고 싶으면 뒤에 .then을 붙인다

• 동시에 ajax요청을 여러개 날리기

promise.all([axios.get("URL1"),axios.get("URL2")])

URL1,URL2로 GET요청을 동시에 준다
완료 후 특정 코드를 실행하고 싶으면 뒤에 .then을 붙인다

써보고 느낀점은 fetch()를 사용하면 json으로 변환작업을 해줘야하는데 axios라이브러리를 사용하게 되면 json->object/array변환작업을 자동으로 해줘서 편리한거 같다~👍

useEffect에서 fetch를 비동기처리하는 방법

const fetchData = async () => {
    await fetch(`url주소`)
      .then((res) => res.json())
      .then((data) => {
        setServerData(data);
      });
  };
  useEffect(() => {
    fetchData();
  }, []);