서버한테 데이터 요청을 한다
서버: 데이터를 요청하면 데이터를 보내주는 프로그램
예시)유튜브- 동영상 보내주세요 하면 오키 하고 보내줌. 그게 유튜브임
네이버 웹툰 - 웹툰 보내주세요 하면 오키 하고 보내줌. 그게 네이버 웹툰임.
서버 개발 시 짜는 코드 : 누가 A 요청하면 A 보내주세요 라고 짜면 됨.
1. 방법(get/post)
2. 어떤 자료?(url)
get/post요청하면 페이지가 새로고침이 되는데 ajax를 사용하면 새로 고침 없이도 get/post가 가능하다
ajax 쓰려면 옵션 3개 중 택1
1. XMLHttpRequest
2. fetch()
3. axios (이번에 사용해 볼 것)
axios 사용방법
1. npm install axios 터미널에 입력해서 설치 후
2. import axios from "axios"; 상단에 import
3. axios.get(URL)을 하면 그 URL로 GET요청이 됨.
4. 데이터 가져온 결과는 result.data 안에 들어있음.
5. 실패했을 때(인터넷이 안 되거나 URL이 이상하면) .catch() 안에 적으면 됨.
<button onClick={() => {
axios.get('hㅇㅊㄴttps://codingapple1.github.io/shop/data2.json')
.then((result)=>{
console.log(result.data) //.data를 추가하면 핵심 data만도 받아올 수 있음.
})
.catch(()=>{ //예외 처리. 인터넷이 안 되거나 요청 경로가 잘못 돼서 못 받아올 때 .catch 사용
console.log('ajax를 못 받아왔어ㅜ')
})
}}>버튼</button>화면에 보이는 이미지
.data 적기 전
.data 적은 후
경로 못 받아왔을 때
오늘의 숙제 : 버튼을 누르면 서버에서 상품데이터 3개 가져와서 메인페이지에 뿌려주도록 (힌트 : state 조작하기)
내가 한 숙제:
import axios from "axios";
import { useEffect, useState } from "react";
function App() {
let [dataReceived, setDataReceived] = useState(null);
useEffect(()=> {
axios.get('https://codingapple1.github.io/shop/data2.json')
.then((result)=>{
console.log(result.data)
setDataReceived(result.data); //.data를 추가하면 핵심 data만도 받아올 수 있음.
})
.catch(()=>{ //예외 처리. 인터넷이 안 되거나 요청 경로가 잘못 돼서 못 받아올 때 .catch 사용
console.log('ajax를 못 받아왔어ㅜ')
})
},[]);
return(
<div>
<DataReceived dataReceived={dataReceived}/>
</div>
)
}
function DataReceived(props){
return(
<div>
{props.dataReceived && (
<div>
<h4>{props.dataReceived.title}</h4>
<p>{props.dataReceived.price}</p>
</div>
)}
</div>
)
}
export default App;하... 화면에 안 나온다. 콘솔에 찍어보면 데이터는 가져오는데 말이다.
chatGPT가 "props.dataReceived가 존재할 때만 데이터를 표시하는 조건부 렌더링을 사용하고 있기 때문에, props.dataReceived가 존재하는지 확인해야 합니다."라고 해서 console에 찍어보니
라고 나온다. 이게 뭘까?
구글에는 답변이 얼마 없다.
GPT는 이렇게 답한다. 그렇다면 이거는 화면에 띄우고 말고에 영향이 없다는 것인데..
안 되겠다. 이렇게 더 끌다간 나의 흥미가 사라질 수 있겠다. 다음 강의로 넘어가자.
강사님의 풀이:
import axios from 'axios'
function App(){
let [shoes, setShoes] = useState(어쩌구);
return (
<button onClick={()=>{
axios.get('https://codingapple1.github.io/shop/data2.json').then((결과)=>{
let copy = [...shoes, ...결과.data]
//항상 데이터를 만질 때 거기서 바로 조작하는 게 아니라 복사본을 만들어 써야한다고 했다.
//기존에 있던 shoes와 axios로 불러온 두 가지 오브젝트가 들어있는 어레이를 합쳐줘야 함.
//위 처럼 ...으로 괄호를 벗겨주고 콤마로 이은 후 다시 대괄호를 입혀주는 방식도 있고
//.concat() 메서드를 사용하는 방식도 있음.
setShoes(copy)
})
.catch(()=>{
console.log('실패함')
})
}}>버튼</button>
)
}동시에 ajax 요청 여러 하는 법
//동시에 ajax 요청 여러 개 하려면 Promise.all이란 걸 쓴다.
Promise.all([ axios.get('/url1'), axios.get('url2')])
//위에 경로로 다 받아오면 그 다음에 아래 실행해주세요
.then(()=>{
})원래는 서버와 문자만 주고 받을 수 있음.
엇 근데 위에 array했는데!
큰 따옴표를 써 놓으면 문자열로 인식해서 array나 object도 주고받기 가능하다. 일명 JSON이라고 함.
데이터를 받아올 때 fetch도 사용 가능하지만
fetch('https://codingapple1.github.io/shop/data2.json')
.then(결과 => 결과.json()) //JSON -> array/object 변화과정 필요 (이게 변환해주는 코드임)
.then(data => {}fetch는 JSON -> array/object 변화과정이 필요하다.
