서버통신하려면 ajax (axios)

서버에서 데이터 받을때

서버는 데이터를 달라고하면 주고 수정해달라고 하면 수정해주고 그냥 데이터 저장소이다.

데이터를 요청할 때는 그에맞는 규격에 맞춰서 요청을 해야한다.

 

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

2. 어떤 방법으로 요청할지 (대부분 GET or POST 두가지 쓴다.)

데이터를 가져올 때는 보통 GET 고르면 되고

데이터를 서버로 보낼 때는 POST 고르면 된다.

요청 메소드 종류

• GET : 리소스 조회
• POST:  요청 데이터 처리, 주로 등록에 사용
• PUT : 리소스를 대체(덮어쓰기), 해당 리소스가 없으면 생성
• PATCH : 리소스 부분 변경 (PUT이 전체 변경, PATCH는 일부 변경)
• DELETE : 리소스 삭제

 

예를들어 post 요청을 보내고 싶다면 아래 코드처럼 쓰면된다.

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

 

하지만 저렇게 요청을 보내면 최대 단점이 브라우저가 새로고침이 된다.

 

그래서 ajax 왜쓰는데?

 

ajax를 쓰면 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있다.

 

ajax로 GET/POST 요청시에는 방법이 3가지있다.

1. XMLHttpRequest라는 옛날 문법 쓰기

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

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

 

나는 3번이 가장 편하니 axios 사용법을 알아보자.

 

axios

 

axios 설치

설치법 아래의 코드를 터미널에 입력한다.

npm install axios

 

사용하는 파일 상단에 아래의 코드를 입력하고 사용하면 된다.

import axios from 'axios'

 

axios사용법

 

1. axios를 쓰려면 상단에서 import해오고

2. axios.get(URL) 이러면 그 URL로 GET요청이 된다.

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

import axios from 'axios'

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

4. .catch()는 요청을 실패했을때 실행할 코드를 적으면된다.

나는 console.error("실패")라고 자주 적음

 

post요청

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

이렇게 하면 {name : "kim"}이 전송이 된다.

완료 후에 특정코드 실행하고 싶으면 .then()뒤에 붙이면된다.

 

동시에 ajax요청 여러개 날리기

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

 

원래 서버와 문자자료만 주고받을 수 있다.

 

위의 설명처럼 object/array는 주고 받지 못한다.

"{"name" : "kim"}" 요딴식으로 문자로 만들어서 전송해야한다. 

이런걸이제 JSON이라고 한다. JSON은 문자취급한다.

 

axios에서는 JSON -> object/array 변환작업을 자동으로 해준다.

 

자주묻는 질문 : ajax로 가져온 데이터를 html에 꽂을 때 왜 에러남? 

 

1. ajax요청으로 데이터를 가져와서

2. state에 저장하라고 코드를 짜놨고

3. state를 html에 넣어서 보여달라고 <div> {state.어쩌구} </div> 이렇게 코드 짰다.

잘 될 것 같은데 이 상황에서 state가 텅 비어있다고 에러가 나는 경우가 많다.

 

이유는 ajax 요청보다 html 렌더링이 더 빨라서 그럴 수 있다. 

state안에 뭐가 들어있으면 보여달라고 if문 같은걸 추가하면된다.. 

 

 

ajax사용법

method  : 요청 보낼때 method 설정

body : 보내고 싶은 자료

body 자료가 객체, 배열일 경우에는 string 형식으로 요청,응답 받아야한다.
보낼때 JSON.stringify(넣고싶은객체, 배열)
받을때 JSON.parse(가져온 객체, 배열)

.then 성공하고 난뒤 코드

.catch 실패하고 난뒤 코드

에러 날때 try, catch를 활용해도된다. (따로 공부하세요)

<button
  onClick={() => {
    fetch("/api/post/delete", {
      method: "DELETE",
      body: result[i]._id,
    })
    .then(()=>{끝나고 실행하고 싶은 코드})
    .catch(()=>{에러걸리면 실행하고 싶은 코드})
  }}
>
  🗑️
</button>