드디어 백엔드 api가 만들어졌다
이제 dummydata로 화면을 깔아주지 않아도 되고 백엔드 분들이 만들어준 api를 fetch를 이용해서 GET으로 조회하게 만들면 된다!
노마드코더에서 배웠던 API GET 요청 방법은?
노마드 코더 Next.js 수업에서는 movie api를 갖고와서 fetch로 get요청하는 방법을 배웠었다.
그땐 API KEY가 따로 필요해서 ${}를 이용해서 fetch를 불러왔었다.
export default function Home () {
const [movies, setMovies] = useState([])
useEffect(()=> {
(async () => {
const data = await (
await fetch(`https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`
)
).json()
console.log(data)
})()
}, [])
return ~- 일단 fetch를 불러올 함수 안에다가 useState를 만들어서 써준다.
- useEffect를 선언하고 async와 await를 이용해서 fetch(url)를 넣어준다.
- json 형식으로 받아오기 위해서 .json()을 붙여주는 걸 잊지 말기
console.log(data)를 하면 이렇게 잘 받아오는걸 확인할 수 있다.
이제 이 객체 안에 results를 불러오기 위해서 data 대신 {results}를 변수로 써준 후
콘솔 대신 setMovies(results)을 써준다.
그리고 리턴부분에 movies를 map 메서드로 쭉 펼쳐주면 된다!
results의 original_title만 받아와보자
이쁘게 잘 받아와진다!
이거 그대로 따라해볼까..?? (했다가 몇 시간 고생)
일단 내 코드는 위에와 비슷하게 data를 콘솔로 찍어보는 방법으로 먼저 작성했다.
그랬을때 브라우저에는 이렇게 { data: {내용... } } 이런 식으로 받아와지는걸 볼 수 있다.
이제 data를 {results}로 바꿔주면 되겠지?? 하고 바꿨더니..
undefined가 뜨는 것이 아닌가..? 왜 undefined만 뜨지..?
- {results}를 썼을 때 계속 나는 에러 - map이 왜 함수가 아니라는 건지 한참 생각했다..
알고보니.. !!
results는 { results : {내용... } } 이렇게 movie api의 객체 키가 results여서 객체 안의 results를 받아 온 것 이였다!!
우리가 쓰는 api 내용에는 { data: {내용... } } 이라고 써있으니
당연히 {data}로 써야 그 내용이 받아와진다!
(이것도 모르는 쌩초보라.. 고생 좀 했다..)
이제 setQuestion으로 data를 받아와서 map 메소드로 내용을 깔아주자!
- question.map으로 쭉 데이터를 깔아주자
이렇게 하면 화면에 잘 나오는 거를 확인할 수 있다!
