React: 영화 웹 서비스 클론 코딩

 

 

리액트로 영화 웹 서비스를 클론코딩을 해보려고한다.

 

App.js

 

이 js에서  REST API를 작성한다.

 

index 페이지는  Home.js로 

영화 상세페이지는  /movie/{id} 이다.

 

 

Home.js

 

첫 화면을 담당하는 Home.js 코드다.

 

우선, Home() 함수에 들어갈 loading, movies의  useState()를 작성

 

그후, getMovies 함수로 JSON 파일을 받아온다.

이는, 로딩이 걸리는 작업이니   asyn await 로 비동기처리를 하였다.

 

useEffect로  getMovies()를 딱 한번만 re-rendering 하게 만들어준다.

 

return 으로 그리고 싶은 HTML코드를 입력하자.

 

 

 

불러온 영화들을 처리하는 로직이다.

 

불러온 영화들의 JSON 데이터를 파라미터로 받아,  필요한 정보를 각각 추출하여 표현하였다.

 

여기서  React-Router의 Link를 사용하였다.   

 

리액트가  SPL 이기때문에 Link를 쓰기를 적극 권장하는 이유다.

 

 

Detail.js

 

영화의 상세페이지 js이다.

 

상세페이지를 가져오는 행위도  비동기 처리를 해주었고 useEffect로 한번만 일어나게끔 적용한다.

 

 

 

실행 화면