혼자 axios연습을 하기 위해서
유용한 사이트를 알게되었다
jsonplaceholder 라는 웹사이트인데
해당 사이트에서 Resources에 posts를 눌러보면
100개정도의 데이터를 뽑아올 수 있게 되어있다
우리가 서버에서 데이터를 가져올 경우 생각해야하는 것은 단 2개만 생각하면된다
어떤 메서드를 통해서 가져올지? 그리고 가져오는 서버의 주소를 알면된다
https://jsonplaceholder.typicode.com/posts
이 주소가 가짜 api데이터를 제공하는 주소이니까 이 주소를 url에 넣어서
서버와 통신을 해야한다 무엇으로? axios로!
이제 이 데이터를 axios로 받아보자
가져올 생각이니까 get방식을 이용해보자
일단 useState로 빈배열을 하나 만들건데
posts,setPosts라는 빈배열을 하나 만들어주고
useEffect를 이용해서 데이터를 가져온다음
그 데이터를 setPosts에 담아서 그 값을
아래에서 map을 돌려서 타이틀만 li태그로 감아서 출력해볼 생각이다
import React, {useState, useEffect} from "react";
import axios from "axios";
const App = () => {
const [posts,setPosts]=useState([]);
useEffect(() => {
axios({
method:'GET',
url:'https://jsonplaceholder.typicode.com/posts'
}).then(response => setPosts(response.data))
})
return(
<ul>
{posts.map(post => (
<li key={post.id}>
{post.title}
</li>
))}
</ul>
)
}
export default App;
이렇게 axios로 뽑아서 출력을 했다 데이터가 다 받아지면
then을 이용해서 응답받은 데이터를 넣어줬다
그리고 응답받은 데이터 뭉탱이가 post에 담겨있고
그 데이터중에 내가 필요한 타이틀만 뽑을 것이기 때문에
.title 이라고 적어줘서 뭉탱이에서 타이틀만 뽑아서 출력했다
출력해보면
이런식으로 잘 출력된다
이번에는 사진을 뽑아서 출력해보자
우리가 데이터를 가져올 때는 키값을 맞춰줘야한다
서버에서는 홍길동이라는 키값으로 데이터를 제공하는데 우리는 임꺽정이라는 이름으로 찾아오면
데이터를 받을 수 없다
은행에가서 내 이름을 알려줘야 내 통장잔고를 확인하고 돈을 주게 되어있는데
가서 엉뚱한 이름을 말하면 당연히 돈을 받을 수가 없다
그러므로 사진을 받아올려고하면 해당 사이트에서 제공하는 사진의 키 네임을 알아야한다
이 사이트에서는 키 네임으로 "thumbnailUrl" 로 제공하고 있으니까
똑같은 네임으로 가져와야한다
편의를 위해 기존의 url 뒤에 /posts에서 -> /photos 로 바꿔주고
이미지를 받아오는 것이기 때문에 div로 묶어놓고 img를 받아와야하니까
<img src={post.thumbnailUrl}/> 이런식으로 div형태로 뽑아오면된다
물론 이 태그도 맵으로 뽑아야 하니까 li태그 안에 넣어줘야하는 것을 명심하자
이제 출력해서 결과를 보자
아름다운 박스들이 5000개가출력되었다 !
진짜 신기하다
이번에는 axios 코드를 조금 더 깔끔하게 작성해보자
axios.get('https://jsonplaceholder.typicode.com/photos')
.then(response => setPosts(response.data))이렇게 작성해주면 더 간결하게 사용가능하다 비동기통신! axios!
