✨ React 정리 - 9) Ajax, Axios ✨

✔️ Ajax: 리액트에서 서버와 통신

ajax로 서버와 통신하면 새로고침 없이 GET / POST 요청 가능하다.
서버에 데이터를 요청할 때 정확한 규격에 맞춰서 요청해야 한다.
1. 어떤 데이터인지(URL 형식으로)
2. 어떤 방법으로 요청할지(GET or POST)

1. Ajax 요청방법

1. XMLHttpRequest
2. fetch()
   fetch는 json으로 데이터를 가져오게되면 array/object로 변환 과정이 필요하다.

fetch('url')
.then(결과 => 결과.json())
.then(결과 => console.log(결과))

3. axios 같은 라이브러리
   하단에 표시

---

✔️ Axios

1. 설치방법

터미널에서 npm install axios

axios import하기

import axios from 'axios'

사용할 요소에서 코드 삽입

<button onClick={() => {
  axios
    .get('url') // axios로 해당 url로 GET요청
    .then((result) => {
    	console.log(result.data)
	}) // ajax 요청을 성공할 경우 코드 실행, 파라미터(result)는 실제 받아온 data값
    .catch(() => {
      	console.log('실패') 
  	}) // ajax 요청을 실패할 경우 해당 코드 실행
}}>더보기</button>

2. 사용방법

axios.get('url) > axios로 해당 url로 GET 요청
axios.post('url') > axios로 해당 url로 POST 요청(데이터 전송할 때 자주 쓰임)
.then(() => {}) > 요청을 성공했을 때 해당 코드 실행
.catch(() => {}) > 요청을 실패했을 때 해당 코드 실행

예시

get요청

1. 버튼이 true일 때 보여주고 false일 때 숨기기
2. 버튼을 클릭할때 데이터를 받아오고 기존 state에 추가해서 상품 더보기
3. 버튼이 3번눌렸다면 더보기버튼을 숨기기

let [shoes, setShoes] = useState(data);
let [count, setCount] = useState(0);
let [btn, setBtn] = useState(true);

{btn == true ? (
  <button
    onClick={(e) => {
      count == 0
        ? axios
            .get(
              'url',
            )
            .then((result) => {
              let copyShoes = [...shoes, ...result.data];
              setShoes(copyShoes);
              setCount(count + 1);
              console.log(count);
            })
        : count == 1
        ? axios
            .get(
              'url',
            )
            .then((result) => {
              let copyShoes = [...shoes, ...result.data];
              setShoes(copyShoes);
              setCount(count + 1);
              console.log(count);
            })
        : setBtn(false);
    }}
  >
    더보기
  </button>
) : null}

동시에 get 요청

Promise.all([axios.get('/url1'), axios.get('/url2')])
.then(() => {
}) // 동시에 get 요청 성공했을 때 코드 실행

post요청

<button onClick={() => {
  axios.post('url', {name : 'kim'})
}

자주 겪게되는 오류

ajax로 가져온 데이터를 html에 바인딩할 때 오류나는 이유?

• ajax요청보다 html 랜더링이 더 빨라서 그럴 수 있다.
• state를 사용한다면 먼저 보여주고 요청받아온 데이터를 보여주는 것이 오류를 방지할 수 있다.