Ajax 사용법

---

fetch() 함수

<button onClick={()=>{
  fetch('/URL', { method : 'POST', body : '안녕' })
}}></button>

이 전에는 <form> 태그를 사용해서 서버로 값을 전달했었는데,

이 fetch()라는 함수를 사용하게 되면

GET, POST뿐만이 아니라 PUT, DELETE요청도 추가로 할 수 있다.

PUT은 보통 값을 수정할 때 보내는 용도이고

DELETE는 값을 삭제할 때 보낸다.

=> 근데 가끔 에러가 나는 경우가 종종 있다, POST로도 다 해결할 수 있으니 POST 사용을 권한다.

 

그리고 두 번째 차이점은

<form> 태그 방식은 서버로 보낼 때 브라우저가 새로고침이 되는데, 

fetch() 방식은 새로고침이 없이 보낼 수 있다는 점.

 

이러한 fetch() 함수를 사용하는 방식을 Ajax라고 칭한다.

---

예외처리

fetch('/URL')
.then((r)=>{
  if(r.status == 200) {
    return r.json()
  } else {
    //서버가 에러코드전송시 실행할코드
  }
})
.then((result)=>{ 
  //성공시 실행할코드
}).catch((error)=>{
  //인터넷문제 등으로 실패시 실행할코드
  console.log(error)
})

이 밖에도, Ajax는 예외처리 기능을 포함하는데,

서버에서 클라이언트에게 status( )를 포함한 상태값에 메시지를 심어줄 수 있는데 이를

확인하는 기능을 사용할 수 있다.

 

그전에 코드를 살펴보면

. then()이라는 함수가 있는데, 서버가 어떠한 응답을 한경우 실행되는 함수이다.

=> 파라미터를 통해 메시지를 전달받을 수 있고, 원하는 코드를 실행할 수 있다.

 

그리고. catch는 서버에서 try-catch 문법 사용 시 에러가 난 경우 실행되는 함수이다.

---

Axios vs fetch

fetch말고도 axios라는 라이브러리를 사용하면 편하게 서버와 데이터를 주고받을 수 있는데,

Next.js 13 이상부터는 fetch에 특별한 기능이 있다고 한다.

server component에서 fetch를 사용할 일이 있다면, 그대로 사용하고

client component에서는 axios를 사용하는 것도 방법이다.

---

항상 리액트에서는 axios를 주로 사용했었는데, 왜 사용을 안 하는지 의구심이 들었는데,

다 이유가 있다는 것을 알게 되었던 강의.

구체적으로 fetch()의 기능을 직접 찾아봐야겠다는 결론이다~