아아ㅏㅏ아ㅏ아ㅏ아아ㅏㅏㅇ
고고
이제 API에서 data를 가지고 왔지! console로 데이터를 한번 보자!
이렇게 작성하고!
콘솔창을 보면!
여기서 다 필요 없고 data만 보자!
data안에 data를 보면 많은 movies들이 있지!
우리는 이 movies를 원해!!
그래서 moives.data.data.movies!
보다는! ES6가 생겼으므로!!
이렇게 줄이는거지!!!! 진짜 짱이돠..
그럼 결과는 !?
두둥! 멋져부러잉
영화 리스트만 담겼어!!
그럼 다음 할 일은 뭘까?!
오케오케 movies를 state안에 넣어야지!
안어려움 고고!
movies:moives 처음엔 어려울 수 있는데 걱정노노!
처음 movies는 속성 movies고!
2번째 moives는 변수 movies야!
하나는 setState의 movies고 다른 하나는 axios에서 온 moives라는 말!
둘은 달라!
하나는 state에 있고 다른 하나는 axios에서 왔어!
근데 여기서 더 줄일 수 있어! JS가 이해하는건 똑같거든! 멍청하지 않아!
movies로 변경하고! Loading도 바꿔주자!
우리는 지금 setState를 수정하고 있어!
오직 하나의 setState에서 state에 있는 두개의 상태를 변경했어!
잘 작동했나 확인 해보자!
오.. 불러와졌어! 짱짱짱
일단 불러오는건 끝냈고!
지금까지 하면서 We are ready가 너무 거슬리지 않아?
오케 수정하자!ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
우리가 할 일은 moives를 render 할거야!
우선 movies.js 파일을 새로 만들고!
우리는 언제나 import react from "react";
또 import PropsTypes from "prop-types";
좋아! 이 경우에는 movies component가 state를 필요로 하지 않아
그래서 만약 component가 state를 필요로 하지 않을 경우에 class component가 될 필요는 없어
(함수형 컴포넌트로 했다면, Hook을 통해서 state 해결 가능! 나중에 꼭 해보기..)
그래서 우리는 함수형 컴포넌트로 돌아갈거야!
왜냐? state가 필요 없기 때문이지!
중요한건 우리가 얻어 올 props를 찾는거야!
우리는 여러 props들을 얻을 수 있어
ID는 숫자!
그래서 우리는 id: PropTypes.number.isRequired !
연도! year: PropTypes.year.isRequired
다음으로 제목 title: PropTypes.string.isRequired
요약도~ summary: PropTypes.string.isRequired
마지막으로 poster까지 ㄱㄱ poster: PropTypes.image.isRequired
더 추가 하고 싶은게 있으면 원하는대로 해!
이제 Movie component로 가서 props들을 넣어줄거야
이렇게 넣어주고! 항상 마지막은 export default 기억하기!!
이제 이것들을 render 해야겠지??
두가지 방법이 있는데(내가 아는..)
첫번째는 그냥 바로 We are ready 자리에 movies.map() 을 넣어버리는 것
(여기가 어떻게 movies.map()이 되는건진 찾아봐!
developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
)
두번째는 renderMovies라는 다른 function을 만드는거야
무엇을 선택하던 자유야!
나는 첫번째로 해볼게!
기억해야 할 건 state로부터 movies를 가져와야 한다는거야!!
movies.map의 map은 우리에게 movie를 줄거야 근데 엄청 크잔아?
그래서 이렇게 작성해보면 !
두둥! 결과!!
그 다음 콘솔을 보면
내가 추출한 객체들이 20개 다 들어왔다!!
굳굳굳굳구둑두굳굳
그리고 콘솔에 보면 각 child는 유일한 key값이 있어야 한다고 오류가 나와
그럼 key prop을 넣자! key 값은 유일해야 돼!
그럼 아까 추출한 ID를 주면 되겠지!
key={movie.id} 추가!
끝!!
우리는 API로부터 data를 가져오고 있고 보여주고 있어!
또 state를 사용해서 isLoading도 보여주고 있어!!
지금 우리가 만든게 데이터가 올 때 까지 기다리고 데이터가 오면 데이터를 보여준다니까?
대박이야대박 드디어 백엔드인가 레게노레게노!!(헛소리에요...)
짱이다짱이야
이번 포스트는 여기까지!! 모르는거 있으면 댓글 달아줘ㅓㅓ~~
참조: nomadcoders.co