서버에 요청하기
우리는 서버로부터 어떤 데이터를
받아오거나, 보내도록 요청할 수 있다.
요청을 할 때는 정확하게 규격에 맞춰 두가지 요청을 해야한다.
1. 방법 ( GET / POST )
2. 어떤자료 ( URL )
방법 GET / POST
데이터를 가져올 때 GET
우리가 브라우저주소창에 URL로 검색하고 접속하는 행위가 사실은 모두 GET방식인것.
데이터를 서버로 보낼 때는 POST
<form action="요청할url" method="post"> 이렇게 요청을 날려주면 된다.
AJAX
하지만 GET/POST 방식의 요청은 브라우저를 새로고침한다.
새로고침하지않고, 정보만을 가져올 수 있게 하는 방식을
AJAX라고 한다.
AJAX를 사용하면 새로고침 없이도 쇼핑몰 상품을 더 가져올 수도 있고
새로고침 없이도 댓글을 서버로 전송할 수도 있다!
AJAX로 GET/POST요청하는 방법 3가지
- XMLHttpRequest라는 옛날 문법 쓰기
- fetch() 라는 최신 문법 쓰기
- axios 같은 외부 라이브러리 쓰기
axios 사용하기
설치
- terminal
npm install axios- 사용하려는 component파일 상단에 import해오기
import axios from 'axios'GET 요청하는 법
axios.get('url')
.then((결과)=>{
console.log(결과.data)
})
.catch(()=>{
console.log('실패함')
})
}}- 예제코드
shoes라는 state를 반복문으로 구성한 리스트가 이미 존재한다고 가정.
이때 url에서 제공하는 정보를 리스트에 추가해 출력해보자.
axios [...state1, ...state2]
<button onClick={()=>{
axios.get('https://codingapple1.github.io/shop/data2.json')
.then((res)=>{
let getData = res.data;
console.log(getData) //url에서 받아온 정보. json형태이므로 배열 타입임.
let copy = [...shoes, ...getData]; //shoes state속 정보와 함께 합쳐 copy라는 변수에 할당.
console.log(copy)
setShoes(copy) // shoes의 setter함수에 데이터 삽입해 추가
})
}}>더보기</button>##코드설명
axios로 받아온 정보를 getData라는 변수에 담고
shoes라는 state속 정보와 함께
[...shoes, ...getData] spread연산해 copy라는 변수에 담아 랍친다.
그 뒤에 shoes state의 setter함수인 setShoes에 copy내용을 삽입한다.
현재 shoes state를 반복으로 돌려 html구조를 렌더링하고있기에
해당 버튼을 누르면 html레이아웃이 추가된다. POST 요청하는 법
axios.post('내 데이터받아줄 URL', 내가보낼자료 )
//예시
axios.post('URL', {name : 'kim'})여러개의 요청을 한번에 처리하기 promise.all()
Promise.all( [axios.get('URL1'), axios.get('URL2')] )
.then(()=>{
모두 가져오는 거 성공하면 실행코드;
})fetch와 다른 점
사실 브라우저상에서 서버와 주고받는 건 only 문자자료만 가능하다.
객체/배열 이런거 못 주고 받음.
근데 이걸 가능하게 하려면?
그냥 "{"name" : "kim"}" 이런식으로 문자열처럼 속이면된다.
이런 방식을 JSON이라고 한다.
우리가 서버에서 전달받은 정보는 모두 json형태임.
방금 위에서 써본 axios 라이브러리는 알아서 json->객체/배열로 바꿔준다.
하지만 js 내장함수인 fetch로 서버에서 정보를 받아오면 그대로 json 형태로온다. 그럼 이걸 우리가 쓸 땐 다시 json->객체/배열형태로 한번 더 바꿔 처리해줘야하는 것.
fetch('URL')
.then(결과 => 결과.json())
.then((결과) => { console.log(결과) } ) //현변환을 위해 한번 더 처리 