[ReactJS] [Movie App] [2] : react-router(페이지 전환)

ReactJS 에서 페이지를 전환하는 방법

 

현재의 아래와 같은 코드를 좀 정리하고 싶다.

div 태그 ul 태그 등 많기에 여기서 ReactJS의 장점을 좀 활용하고자 한다. 

 

바로 Component를 사용할 수 있다는 것이다.

 

 

 

 

이렇게 map 안의 걸 떼어낸 경우에는 keyㄹ가 필요없다고 한다.(수정예정)

 

movie 가 Appi.js 로 부터 받을 내용들이다. title, summary, genres, medium_cover_image

 

 

Props 를 활용하기 위해 아래와 같이 Movie Component 인자에 적어주었다.

저것이 무슨 뜻이냐 하면 genres,summary 와 같은 정보들을

Movie component가 

Parent component 로 부터 받아온다는 것을 의미한다.

그런 다음 이제는 App.js 로 가서 Movie 컴포넌트를 랜더해 줘야 할 것이다.

 

어떠한 Property 다 보낸 상태

 

coverImg 로 바뀔 예정

컴포넌트 이기에 저렇게 작성이 가능하다.

 

Props 이기에 자유롭게 이름을 정해줘도 된다.

 

key 는 React JS 에서만 map 안에서 Componet를 랜더링할때만 사용한다. 

 

 

 

PropTypes 를 사용해 부모컴포넌트로 받아온 props 가 어떤 자료형이고 필수적인지 등을 체크해 줄 수 있다.

 

오타가 있다 arraryOf -> arrayOf

이제 본겨적으로 페이지를 전환 시키는 react-router를 활용해 보자.

npm i react-router-dom@5.3.0

6 이 나와서 5.3.0 으로 한다.

 

이제 스크린 단위로 생각해야 한다.

 

route 별로 

 

routes 라는 별도의 폴더를 생성해주었다. components 도 같이

 

home route를 두고 거기서 영화 전부를 보여주고

movie route를 두고 거기서는 영화 하나를 보여줄 것이다.

 

App 에서 작성한 내용들을 다 가지고 와

Home.js 라는 새로운 파일에 넣어줬다.

코드가 길어 담진 못했지만 새롭게 작성한 Home.js의 export default 파일명 도 잊지 말자.

 

import 를 할때 팁이 있는데 import를 하려는 키워드 마지막(useEffect 같으면 맨 끝 글자 t ) 를 지웠다가 다시 글자를 입력하고 Enter키를 치면 자동으로 불러와 지더라.

 

 

route, screen, page ( 다 비슷한 말이다, 마음대로 정해도 된다)

 

 

Home.js 는 이제 모든 영화들을 보여주는데

App.js 에는 변화가 생겼다.

App.js 에는 더이상 영화를 보여주지 않고 대신 router를 render 할 것이다.

 

router는 URL을 보고 있는 컴포넌트이다.

새로운 component를 App.js 에 추가해 줄 건데 이게 URL을 바라보게 될 것이다. 

URL 에 따라서 Home을 보여주거나 다른 걸 보여주거나 할 것이다.

 

 

 

 

 

 

 

 

 

 

https://nomadcoders.co/react-for-beginners/lectures/3290

All Courses – 노마드 코더 Nomad Coders