[리액트] 영화 API 연동해보기_axios

파이썬을 이용해서 만든 토이프로젝트(영화 리뷰사이트)를 개인적으로 리액트로 만들어보기로 해봤다.

위 사진이 파이썬(파이참)을 이용해서 만든 토이프로젝트이다. 대부분 토이프로젝트에 함께 참여했던 팀원들이 만든거지만, 똑같이는 못만들어도 전체적인 느낌은 비슷하게 만들어보려고 한다.

 

우선 메인페이지에 영화정보를 표시해주는 기능을 먼저하려고함. 파이썬에서는 ajax를 이용해서 get으로 읽어왔는데, react에서는 axios라는 것을 먼저 설치해야한다.

프로젝트로 cd 이동 후 axios를 설치.

 

그리고 import를 해준다.

9번째줄이 API주소이고, axios.get(url)으로 읽어들이고 있다. 잘 읽어들이는지 콘솔로 출력해보면

 

콘솔출력 결과

results한에 20개의 영화정보배열이 들어가있는 것이 확인되었다.

 

여기서 일단 backdrop_path의 값만 배열로 받아와서 화면에 출력해보겠다.

 

다음은 출력결과

일단 출력하는데는 성공했다. 구글링하면서 출력하는데까지 간신히 하기는 했는데 제대로 한건지 찜찜한 기분