react 비동기통신

비동기통신 : 브라우저의 새로고침없이 데이터를 불러오는 행위.
대표적인 예로는 아이디 중복체크가 있음.
화면은 그대로 놔둔채로 서버에 값을 요청하여 특정기능을 수행하게 해줌.

서버랑 통신? 그게 뭔데요

서버에
특정 url로
특정요청(get post등)을 보내게되면
서버는 미리 정해둔 약속에 따라(api)
특정값을 클라이언트단에 보내준다(ex : 버튼클릭시 이미지가 뿅하고 나온다거나)
ajax. axios라는 외부라이브러리를 사용하면 좀더 짧게 코드를 쓸수있음

그래서 ajax를 왜쓰는데요

새로고침없이 데이터를 불러오려면 써야함.
아이디 체크하는데 브라우저 새로고침되면 말짱 도루묵.
이런 경우에 필요함.

axios는 뭐죠?

node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트(출처 : 나무위키)
그냥 외부 라이브러리.
비동기 통신을 원활하게 해줌.
비동기 통신 코드를 좀 더 짧게 쓸 수 있음.

설치법

1. 터미널 열어 설치

npm install axios

2. import 하기

import axios from "axios";

3. 코딩
   예시 : get요청으로 아래 url로 데이터요청.
   요청 성공 시 then 실행.결과라는 변수에 서버에서 가져온 데이터 담음.
   실패하면 catch실행.

axios.get('https://codingapple1.github.io/shop/data2.json').then((결과)=>{
        console.log(결과.data)
      })
      .catch(()=>{
        console.log('실패함')
      })

숙제

버튼을 누르면 서버에서 상품데이터 3개를 가져와서
메인페이지에 상품카드 3개를 더 생성
버튼누르면 상품 state 조작. 데이터를 잘 가져왔다면 setState로 새로 만들어주기.
기존코드활용.

내가 쓴 코드

data.js라는 곳에서 가져온 데이터가 shoes state에 저장되어있음.
버튼을 누르면 axios로 비동기통신! data를 가져옴.
가져온 데이터와 기존 shoes state의 배열을 spread연산자로 합침.
setShoes로 shoes state 배열 재생성. 이후 재렌더링됨. 끝.

import data from "./data.js";
import axios from "axios";

  let [shoes, setShoes] = useState(data);
      <Button
        onClick={() => {
          axios
            .get("https://codingapple1.github.io/shop/data2.json")
            .then((result) => {
              console.log(result.data);
              //shoes state에 가져온 데이터를 넣어주기
              let copy = [...shoes, ...result.data];
              setShoes(copy);
              console.log(copy);
            })
            .catch(() => {
              alert("데이터 가져오기 실패");
            });
        }}
      >
        버튼
      </Button>

근데 버튼 누르면 누를수록 계속 3개씩 추가가 됨. 이거 막는것도 고려하면 좋을듯.