Ajax 요청

 

서버란?

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

 

 

서버에 데이터 요청할 때는 정확한 규칙에 맞춰 요청해야하는데 

 

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

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

 

두 가지 잘 지켜서 데이터 보내야한다. 

 

데이터를 가져올 때는 GET 요청하고, 데이터를 서버로 보낼 땐 POST 요청을 한다. 

어떤 데이터를 가져오고 싶은지 URL 잘 작성해주면 된다. 

 

 

 

 

 

 

 

 

 

 

GET / POST 요청하는 법

 

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

주소창에 URL 적으면 그 URL로 GET 요청을 보내준다. 

 

 

POST 요청할 땐

<form action="요청할 URL" method="post">

태그 이용하면 된다. 

 

그러면 폼이 전송되었을 때 POST 요청 보내준다. 

 

그런데 GET, POST 요청하면 단점이 브라우저가 새로고침 된다. 

 

 

 

 

 

 

 

 

 

AJAX 란?

 

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

 

AJAX 사용하면 새로고침 없이도 상품을 더 가져올 수 있고 새로고침 없이 댓글을 서버로 전송하고 이런 기능들을 구현할 수 있다. 

 

 

AJAX 로 GET / POST 요청하려면 3개 방법 중 하나를 사용하면 된다. 

 

1. XMLHttpRequest 라는 옛날 문법

2. fetch() 라는 최신 문법

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

 

 3번 이용해보자 

 

 

 

 

 

AJAX 요청하는 법

 

버튼 누르면 서버로 ajax 요청하기 

 

import axios from 'axios'

function App(){
  return (
    <button onClick={()=>{
      axios.get('URL').then((data)=>{
        console.log(data.data)
      })
      .catch(()=>{
        console.log('실패함')
      })
    }}>더보기</button>
  )
}

 

1. axios 사용하려면 상단에 import 하고

2. axios.get(URL) 쓰면 URL 로 GET 요청된다. 

3. 가져온 데이터는 data.data 안에 들어있다. 

4. 인터넷 연결이 안되거나 잘못된 URL 을 입력했을 때 (실패했을 때) 는 .catch() 안에 작성해주면 된다. 

 

 

 

 

 

 

 

 

 

 

 

POST 요청하는 법

 

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

위와 같이 작성하면 해당 URL 서버로 다음 자료가 전송된다. 

 

완료시 특정 코드를 실행하고 싶으면, .then() 뒤에 붙여주면 된다. 

 

 

 

 

 

 

동시에 AJAX 요청 여러개 보낼 때

 

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

 

위와 같이 작성하면 URL1 과 URL2 에 GET 요청을 동시에 보내준다. 

 

둘 다 완료시 특정 코드 실행하고 싶으면 .then() 붙여주면 된다. 

 

 

 

 

 

 

 

 

서버는 문자 자료만 주고 받을 수 있다. 

 

object 나 array 자료형은 주고받지 못한다. 

 

하지만 object / array 자료형에 따옴표 쳐서 문자 자료처럼 사용하면 된다. 

 

 

"{"name": "kim"}"

 

위와같이 작성한 것을 JSON 이라고 한다. 

JSON 은 문자 취급 받기 때문에 서버와 자유롭게 주고받을 수 있다.

 

실제로 출력해보면 JSON 이 나와야 하지만 array / object 자료형이 잘 출력되는 것을 볼 수 있다.

axios 라이브러리는 JSON 을 자동으로 변환해준다. 

 

fetch('URL').then(결과 => 결과.json()).then((결과) => { console.log(결과) } )

fetch 함수를 사용할 때는 위와같이 json 으로 변환해주는 작업이 필요하다. 

 

 

 

 

 

ajax 로 가져온 데이터 html 데이터바인딩 할 때 에러날 경우

 

1. ajax 요청으로 데이터 가져오고

2. state 에 저장하고

3. state 를 html 에 넣어 보여달라고 코드 짬 

 

이 상황에서 state 가 비어있다고 에러 뜰 수 있는데

 

ajax 요청은 html 렌더링보다 느려서 그럴 수 있다. 

 

state 안에 뭐가 들어있으면 보여달라고 if 문 작성하면 해결할 수 있다.