axios 를 사용하여 서버에 데이터 요청하기

1. 서버에 데이터를 요청하는 것 GET
   (주소창에 URL을 입력하는 것이 바로 GET 요청 하는 것)
2. 서버에 데이터를 전달하는 것 POST

서버에 데이터 요청하는 방법은 여러가지가 있지만 ajax를 사용하면 새로고침 없이 GET/POST 요청이 가능합니다.

axios

서버와는 본래 문자만 주고 받을 수 있습니다. 그래서 객체와 배열같은 데이터는 따로 문자 형태로 바꿔주는 "" 따옴표를 붙여주어야 합니다. 이것을 json 파일이라고 합니다.

json파일을 원래 데이터 형태로 변환해줄 때에는 json()메서드를 사용해야하는데, axios는 이것을 알아서 해줍니다.

설치

npm install axios

import

import axios from ‘axios'

GET

axios.get(url,[,config])

POST

axios.post("url", {data객체},[,config])

Delete

axios.delete(url,[,config])

---

버튼을 누르면 데이터 GET 요청 하도록 하기

<button onClick={() => {
	axios.get('GET 요청 할 URL') // GET 요청
  	.then((res) => {
      console.log(res.data)
    }) // 출력
}}>버튼</button>

axios.get으로 데이터 GET 요청을 보내고,
.then 메서드로 출력합니다.

ajax 요청 실패할 경우 실행할 코드 작성하기

<button onClick={() => {
	axios.get('GET 요청 할 URL')
  	.then((res) => {
      console.log(res.data)
    })
  	.catch(() => {
      console.log('실패할 경우 실행할 코드') // 실패할 경우 실행할 코드
    })
}}>버튼</button>

서버와 연결에 실패할 경우 보내줄 데이터는 .catch()에 담습니다.

---

응용 문제 풀기

버튼 누를 때 마다 데이터 추가하기

강의에서 제공해준 데이터는 한 페이지당 세개의 데이터가 있었고, url 주소는 숫자만 1,2,3 이런식으로 올라갔습니다.

let [count, setCounut] = useState(1);

// 중간 코드 생략

<button onClick={()=>{
      setCounut(count+1);
      axios.get("https://codingapple1.github.io/shop/data"+ count +".json")
      .then((res)=>{
        let copy = [...shoes, ...res.data]
        setShoes(copy)
      })
      .catch(()=>
      console.log('실패하였습니다.'))
    }}>버튼</button>

count 상태를 변경해주는 useState를 사용하여 버튼을 누를 때 마다 count를 +1 해주고, count 값을 url에 담았습니다. 그 후 화면에 출력 아이템을 담은 shoes배열에 요청한 데이터를 더해주었습니다.

버튼 count가 3이 되면 상품이 없다고 알리기

제공된 데이터는 3페이지 뿐이어서 버튼을 2번까지만 누르도록 해야했습니다.

let [button, setButton] = useState(true); // 버튼 보이기

{
button === true ? <Button count={count} setButton={setButton} shoes={shoes} setShoes={setShoes} setCount={setCount}  />: null
}  // 버튼이 true 이면 Button 컴포넌트 보여주기, false면 null

// Button 컴포넌트 
function Button(props) {
  return(
    <button onClick={()=>{
      if(props.count === 3) {
        props.setButton(false)
        alert('더 이상 데이터가 없습니다.');
      }
      props.setCount(props.count+1);
    axios.get("https://codingapple1.github.io/shop/data"+ props.count +".json")
    .then((res)=>{
      let copy = [...props.shoes, ...res.data]
      props.setShoes(copy)
    })
    .catch(()=>
    console.log('실패하였습니다.'))
  }}>버튼</button>
  )
}

button에 대한 상태를 변경해 줄 수 있도록 useState를 사용하였고 기본값을 true로 해주었습니다.
button 컴포넌트를 따로 만들고 button 이 true이면 보여지고, false이면 null 값이 주어지게 하였습니다.
button 클릭 카운트가 3이 되면 더 이상 데이터가 없다는 알림창과 button 의 값을 false로 바뀌도록 하였습니다.