오늘의 React

1️⃣ AJAX란?

👉 Asynchronous JavaScript and XML(공유 가능한 방식으로 데이터를 정의하고 지정할 수 있다. )의 약자로, 말 그대로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다. 

👉 서버에 데이터를 요청한다.

👉 서버: 데이터를 요청하면 데이터를 보내주는 프로그램

- Ex)유튜버 서버: 동영상 요청하면 진짜 보내주는 프로그램

- Ex) 웹툰 요청하면 진짜 보내주는 프로그램

👉 서버개발시 짜는 코드

- 누가 comic.naver.com으로 요청하면 웹툰 보내주세요

👉 서버에 데이터를 요청할 때 일정한 규격을 작성하자

👉 방법 (GET/POST)

- 받으면 get

- 보내면 post

👉 예를 들어 네이버웹툰서버한테 (comic.naver.com)으로 GET요청 하면된다.

👉 네이버 블로그에 글을 발행하고 싶으면 (blog.naver.com)으로 POST 요청

👉 브라우저에서 주소를 입력하는 곳이 GET요청 하는 곳이다.

👉 그러나 GET/POST 요청시 새로고침이 된다. 그게 싫으면 AJAX를 사용하면 새로고침 없이 데이터 주고 받기 가능

 

동기와 비동기

 

2️⃣ Ajax 옵션 

👉 XMLHttpRequest, fetch(), Axios가 있는데 이 중에서 Axios를 가장 많이 쓴다. 

2️⃣ - 1️⃣ Axios 사용법

👉 npm install axios

👉 import axios from "axios"

👉 ajax 이용한 Get요청의 형식은 axios.get("url").then((result) => { result.가져올것 })

👉 리액트에서는 거의 서버와 ajax 이용해서 통신합니다.

👉 Ajax 요청 실패할 경우?

- 인터넷이 안되거나, 서버가 꺼졌거나, url 요청이 잘못됐을 때가 많다.

- 실패할 경우 특정 코드를 실행하고 싶다.

 

👉 예시

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

👉 서버로 데이터 전송하는 POST 요청

axios.post("/www.naver.com", {name : "Lee"})

👉 동시에 ajax 요청 여러개하려면

Promise.all([ axios.get("/url1"), axios.get("/url2")])
.then(() => {
})