[리액트] ajax(get/post), fetch

ajax 사용하기
AJAX로 GET/POST 요청

서버에 GET, POST 요청을 할 때 새로고침 없이 

데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능

 

사용 전 준비 >>
button 생성

  <Routes>
        {/* 메인페이지 */}
        <Route
          path="/"
          element={
            <>
              <div className="main-bg"></div>
              <div className="container">
                <div className="row">
                  {/* 맵 함수 사용 */}
                  {shoes.map((a, i) => {
                    // 컴포넌트 사용
                    return <Card shoes={shoes[i]} i={i}></Card>;
                  })}
                </div>
              </div>
              {/* ajax 버튼 생성 */}
              <button>버튼</button>
            </>
          }
        />
        {/* 디테일 페이지 */}
        {/* <Route path="/detail" element={<Detail shoes={shoes} />} /> */}
        <Route path="/detail/:id" element={<Detail shoes={shoes} />} />
        {/* nested routes  */}
        <Route path="/about" element={<About />}>
          <Route path="member" element={<div>멤버 세부 페이지</div>} />
          <Route path="location" element={<div>회사위치</div>} />
        </Route>
      </Routes>

버튼생성 후 onClick 부여

    <button onClick={() => {}}>버튼</button>

버튼을 누르면

서버에다가 데이터 요청

= ajax 요청

---

AJAX로 GET/POST 요청 방법

 axios 같은 외부 라이브러리 쓰기 

npm install axios

터미널 열어서 설치

axios 갖다 써보기

import axios from 'axios'

임포트 상단에 해줌.

- App.js 상단에 해줬다.

버튼에 axios 갖다 쓰기

   <button
                onClick={() => {
                  axios.get("");
                }}
              >

아까 생성한 버튼에 get 써주고 url 로 요청

- 어떤 데이터를 요청할 지 url 로 기입

.then - 데이터 출력
소괄호 써주고 콜백함수 써주기

         <button
                onClick={() => {
                  axios
                    .get("https://codingapple1.github.io/shop/data2.json")
                    .then(() => { });
                }}
              >
                버튼
              </button>

진짜로 가져온 데이터를 출력해보고싶은 경우

.then 사용

-  안에 콜백함수 넣어주고 { } 안에 실행하고 싶은 코드 적어줌.

         <button
                onClick={() => {
                  axios
                    .get("https://codingapple1.github.io/shop/data2.json")
                    .then((data) => {data});
                }}
              >
                버튼
              </button>

 파라미터 data 를 추가

- 중괄호 안에 있는 data가 실제 서버에서 갖고온 데이터

         <button
                onClick={() => {
                  axios
                    .get("https://codingapple1.github.io/shop/data2.json")
                    .then((data) => {
                    	console.log(data)
                    });
                }}
              >
                버튼
              </button>

파라미터 data를 콘솔창에 출력

콘솔창에 데이터들이 도착하는 거 확인 가능

- 배열같은 거 나온다.

         <button
                onClick={() => {
                  axios
                    .get("https://codingapple1.github.io/shop/data2.json")
                    .then((data) => {
                    	console.log(data.data)
                    });
                }}
              >
                버튼
              </button>

서버가 보낸 핵심 데이터를 출력하고 싶은 경우

.data 사용

.catch - 요청 실패 시 

     <button
                onClick={() => {
                  axios
                    .get("https://codingapple1.github.io/shop/data2.json")
                    .then((결과) => {
                      console.log(결과.data);
                    })
                    .catch(() => {
                      console.log("실패함");
                    });
                }}
              >
                버튼
              </button>

요청 실패했을 때 

특정코드 실행할 수 있도록 .catch 사용

- 얘 또한 .then 처럼 콜백함수 기입

---

서버에서 데이터 가져와서 상품 html 3개 생성

       {/* ajax 버튼 생성 */}
              <button
                onClick={() => {
                  axios
                    .get("https://codingapple1.github.io/shop/data2.json")
                    .then((결과) => {
                       html 보여주게 하기                     
                    })
                    .catch(() => {
                      console.log("실패함");
                    });
                }}
              >
                버튼
              </button>

버튼을 누르면 서버에서

1) 데이터 갖고 와서

2) html 을 생성해서 보여주게끔 하기.

= 스위치 조작.

{/* 맵 함수 사용 */}
                  {shoes.map((a, i) => {
                    // 컴포넌트 사용
                    return <Card shoes={shoes[i]} i={i} key={i}></Card>;
                  })}

shoes 라는 state 개수에 맞게 

카드 컴포넌트 짜달라고 한 것

참고할 글

[리액트] - 데이터 바인딩 / 컴포넌트화 / props 활용 / map() 활용 (tistory.com)

[리액트] - 데이터 바인딩 / 컴포넌트화 / props 활용 / map() 활용

가져온 데이터를 shoes라는 데이터에다가 추가해달라고 작성하기

        <button
                onClick={() => {
                  axios
                    .get("https://codingapple1.github.io/shop/data2.json")
                    .then((결과) => {
                      console.log(결과.data);
                      console.log(shoes);
                    })
                    .catch(() => {
                      console.log("실패함");
                    });
                }}
              >
                버튼
              </button>

새로 받아온 데이터와

shoes라는 데이터 확인

console.log(결과.data);
console.log(shoes);

그러면 array 배열 2개를 확인할 수 있다.

---

오브젝트 합치기

 array 배열 2개 합쳐야 함.

새로 받아온 데이터 + shoes라는 데이터

1) 복사본 먼저 생성

 let copy = [...shoes];

괄호를 벗겨서 집어넣음.

2) 두 가지 데이터 써주기.

   let copy = [...shoes, ...결과.data];

 

알멩이 (오브젝트) 만 남게된다.

{},{},{}

3) 대괄호 벗긴 array를 shoes 라는 state 에 집어넣기

let copy = [...shoes, ...결과.data];
         setShoes(copy);

---

POST요청 하는 법

axios.post('URL', {name : 'kim'})

똑같이 url 입력

뒤에 데이터 보낼 수 있음.

---

동시에 AJAX 요청 여러개 날리려면
- promise.all()

 

Promise.all( [axios.get('URL1'), axios.get('URL2')] )

url 1 로 요청을 하고

url 2 로도 요청