Written by Parkdev
on January 21, 2024

Ajax의 이해와 사용

Ajax란?

서버에 데이터를 비동기로 요청할 수 있는 방식
총 3가지 방식이있다.
1. XMLHttpRequest: 옛날 문법
2. fetch(): 요즘 JS 문법
3. axios: 라이브러리 사용
  - 라이브러리를 사용해서 부르는것을 많이 사용한다.

Axios 사용해보기

Axios 설치

npm install axios

사용하려는 js파일안에 import

import axios from 'axios'

axios 사용!

GET 예시

// 이전에 배운 useEffect에 넣어서 사용해보자
useEffect(() => {
axios.get('API URL')
.then((result)=> {
  //data가 result.data에 담겨진다. 이를 사용해서 useState 등을 이용해 정리하고 사용하면 된다.
})
.catch(()=>{
    //데이터 요청이 실패했을때 예외처리
})
,[]}

POST 예시

axios.post('URL', {name : 'kim'})
//실행하면 서버로 { name : 'kim' } 자료 전성
//.then(), .catch() 가능

한번에 여러곳에서 데이터 불러오는 방법

Promise.all([axios.get('url1'), axios.get('/urll2')])
.then(()=>{ //두개링크 전부 성공했을때
    //데이터 처리
})

예제

기존 데이터셋에 에 데이터를 추가해서 출력해보자

// 기존 데이터
let data = [
    {
      id : 0,
      title : "심슨가족",
      content : "Born in France",
      price : 120000
    },
  
    {
      id : 1,
      title : "사랑한다고 말해줘",
      content : "Born in Seoul",
      price : 110000
    },
  
    {
      id : 2,
      title : "킬러들의 쇼핑몰",
      content : "Born in the States",
      price : 130000
    }
  ]
// useState
let [data] = useState(data)

// [url]GET 날라오는 데이터 
[
  {
    "id" : 3,
    "title" : "Flowey",
    "content" : "only 5 inches",
    "price" : 120000
  },
  {
    "id" : 4,
    "title" : "Baby shoes",
    "content" : "for less than 6",
    "price" : 120000
  },
  {
    "id" : 5,
    "title" : "Red Herring",
    "content" : "Born in France",
    "price" : 120000
  }
]

// 기존 state를 변경해야하므로 setData를 추가
let [data,setData] = useState(data)

useEffect(() => {
    axios.get('API URL')
    .then((result)=> {
        let copy = [...data, ...result.data];
        setData(copy);
    })
    .catch(()=>{
        alert('로드실패')
    })
},[])

참고) Fetch를 사용시

fetch('url')
.then( result => result.json() ) //axios는 jsonize 부분을 자동으로 처리해준다
.then( data => {
    //데이터 처리 시작
})

추가 응용 예제

버튼을 두번째 눌렀을때 다른 링크에서 데이터를 3개를 더가져와 뿌려보기
버튼을 3번째 눌렀을때 ‘값이 없습니다’ 알럿을 노출하거나, 버튼을 삭제해보기
버튼을 누르면 “로딩중입니다” 글자를 띄어보자

풀이

1번

//click count
let [clickCount, setclickCount] = useState(0);

if (clickCount == 0 || clickCount == 1) {
    let link = 'link/'+(clickCount+2)+'.json' 
}

2번

//click count
let [clickCount, setclickCount] = useState(0);

if (clickCount == 0 || clickCount == 1) {
    let link = 'link'+(clickCount+2)+'.json'
   // ... 데이터 노출
}else if (clickCount == 2) {
	alert('데이터없음')
}

전체 풀이

//loading
let [loading, setLoading] = useState(false);

//on click
<button className='mt-3 btn btn-success' onClick={() => {
    if (clickCount == 0 || clickCount == 1) {
    //로딩바 부르기
    setLoading(true);
    //데이터 부르기
    let link = 'https://codingapple1.github.io/shop/data'+(clickCount+2)+'.json' 
    axios.get(link)
      .then((result) => {
        let copy = [...shoes, ...result.data];
        setShoes(copy);
        //로딩바 숨기기
        setclickCount(clickCount + 1);
        setLoading(false);
      })
      .catch(() => {
        alert('로드실패')
        //로딩바 숨기기
        setclickCount(clickCount + 1);
        setLoading(false);
      });
    } else if (clickCount == 2) {
      alert('데이터없음')
    }
 }}>데이터 부르기</button>
               

{/* 로딩페이지 */}
{loading ? <Loading /> : null}

← → Top