[React] 서버와 통신을 위한 ajax

서버란?

유저가 데이터를 요청하면 데이터를 보내주는 프로그램.

서버에 데이터 요청시에는 정확한 규격에 맞춰서 요청해야 함.

1. 어떤 데이터인지(URL 형식으로)

2. 어떤 방법으로 요청할지(GET or POST)

 

데이터를 서버에서 가져올 때는 GET,

데이터를 서버로 보낼 때는 POST.

 

GET/POST

GET 요청하는 가장 쉬운 방법은 브라우저 주소창임.

URL 적으면 거기로 GET 요청을 해줌.

 

POST 요청하는 방법은

<form action='요청할 URL' method='post'> 태그를 이용하면 됨.

그러면 폼 전송시 POST 요청을 해줌.

 

GET,POST 요청의 단점은 브라우저가 새로고침된다는 것.

 

AJAX

서버에 GET,POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 브라우저 기능.

 

AJAX 로 GET/POST 요청하는 방법 3개:
1. XMLHttpRequest 라는 옛날 문법 쓰기

2. fetch()라는 최신 문법 쓰기

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

 

axios를 이용한 AJAX 요청

터미널 열어서 axios 설치하고

상단에서 import 해오고

axios.get(요청할URL) 기재하면 그 URL 로 GET 요청 됨.

데이터 가져온 결과는 result.data 안에 들어있음 (파라미터 작명은 아무거나 해도 되는데 주로 result라고 씀)

URL이 이상하거나 인터넷이 안되는 등 GET에 실패할 경우를 위한 코드도 적어둬야 함.

해당 코드는 .catch() 안에 적으면 됨.

npm install axios

import axios from 'axios'

function App(){
  return (
    <button onClick={()=>{
      axios.get('요청할 URL').then((result)=>{
        console.log(result.data)
      })
      .catch(()=>{
        console.log('실패함')
      })
    }}>버튼</button>
  )
}

---

출처: 코딩애플

https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!