일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- IOT
- JavaScript
- image
- react
- TypeScript
- 러닝타입스크립트
- useParams
- axios
- swipe
- 공부
- Component
- nvidia
- 정렬
- useEffect
- DOM
- raspberrypi
- Redux
- Ajax
- 자율주행
- opencv
- CSS
- localStorage
- props
- HTML
- route
- Router
- State
- 딥러닝
- ContextAPI
- react-query
- Today
- Total
개발일지
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 문 작성하면 해결할 수 있다.
'React' 카테고리의 다른 글
Redux (0) | 2023.03.07 |
---|---|
Context API (0) | 2023.03.07 |
Lifecycle 과 useEffect (0) | 2023.02.26 |
React Router (navigate, nested routes, outlet), useParams (0) | 2023.02.25 |
React Router (0) | 2023.02.17 |