react 프로젝트 이슈들 -1

이번에 개인프로젝트로 간단한 영화 앱을 만들면서 생겻던 이슈를 정리하겠다..

 

일단 구성은 이렇다

 

App.js

Rank.js

Genre.js

detail.js

 

그리고 영화 정보가 들어있는 movie.json이 있다.

 

 

이렇게

 

App이 메인이고

 

각 컴포넌트를 메인에 라우트해서 클릭하면 이동할수 있게 해놨다.

Detail은 영화를 클릭하면 이동하게 구성했다.

여기서 Detail은 링크를걸어두지 않았다.

왜냐면 Rank와 Genre에서 따로 Link해두었기때문이다.

 

참고로 라우트 된 컴포넌트에서 또 라우트를 쓰면 중복이 되어 오류가 뜬다.

이렇게 해봤더니 작동이 됐다.

 

이제 랭킹 컴포넌트를 만들어보자.

 

랭킹컴포넌트에서 movie.json에 있는 .리스트를 불러와서

랭크에 있는 숫자를 sort를 이용해 정렬을 했다. 이제 이걸 map을 사용해서 return에 뿌려주기만 하면된다.

 

그리고 리스트에 클릭하면 Detail로 id값을 넘기는 state를 사용했다.

이걸이용해서 Detail페이지가 나오게 할거다.

이 state를 받아서 사용할 때는 받는 곳에서 useLocation을 import해야하는데 이건 다음에 설명.