[ReactJS] ReactJS로 영화 웹 서비스 만들기 (20 完) - Redirect

이제 링크를 통해 정보를 라우터로 보냈다.
하지만 문제가 있다.
영화를 클릭하지 않고 movie-detail을 들어오면 state가 없는 상태(undefined)가 된다.
이 문제를 해결해 보자.

먼저 함수형 컴포넌트였던 Detail 컴포넌트를 클래스 컴포넌트로 바꿔준다.

(전) function component                                                                     <후> class component

그 다음, location.state가 undefined일 경우 리다이렉트를 시켜준다. 

 

이게 가능한 이유는 component의 다른 prop인 history 덕분이다.
history에는 go, goBack, goForward 등 많은게 있고 이것들이 url을 변경해줄 수 있다.

이제 /movie-detail 을 입력해도 홈으로 리다이렉트 될 것이며 /movie-detail은 클릭으로만 이동할 수 있게 되었다.

이제 "디테일" 이란 문자열 영화 제목을 넣어보자.

 

잘 나온다. 하지만 문제가 또있다. 새로고침시 에러가 난다.

왜냐하면 component 생명주기에 따라 render()가 먼저 실행되고 componentDidMount()가 실행되기 때문이다.
render()의 location은 this.props 인데 this.props는 undefined이므로 location.stat.title이 없다고 나오는 것이다.
따라서 간단하게 체크해줄 필요가 있다.

 

이제 오류날 일이 없다.

마지막으로 url에 movie-detail이 아니라 id를 표시하려면

 

App.js의 path를 "movie/:id" 로 고친다. :id는 변수가 된다.

 

Home.js의 prop으로 id를 전달해 준 다음,

 

Movie.js에서 id를 받고 pathname을 위와같이 바꿔준다. 여기서 ${id}를 사용하려면 백틱(`)으로 묶어야 한다.

출력해보면 url에 id가 붙은것을 확인할 수 있다.

 

끝.