redirect

movie-detail을 클릭없이 주소를 입력할 때 홈으로 보내버리는 것이 강의의 목표이다.

 

네비게이션 바에서 Link컴포넌트에 props를 보내는 방식을 사용했다.

(참고로 영화제목에 링크태그를 걸었다)

예를 들어 Link를 클릭해서 영화 detail페이지로 넘어가게 할 경우 인수로 state값을 보낸다.

(여기서 state는 우리가 아는 state가 아닌 것 같다)

 

그러면 state값의 undefined 유무에 따라서 값이 있을 경우 페이지를 로드해주고,

state값이 없을경우 Home으로 리다이렉트 시키는 것이다.

 

 

리다이렉트 시킬때는 propsops로 history를 받아 온 뒤, history.push("/") 함수를 써서 홈으로 보내버렸다.

(정확히 무슨 원리인지는 모르겠지만 한가지 확실한건

history에는 현재, 이전페이지, 다음페이지 정보같은 것들이 들어있다.)

componentDidMount를 쓰기위해서 클래스형으로 넘어간 것 같은데, 그렇게 할 필요는 없을 것 같다.

 

참고로 강의에서 컴포넌트 구조는 이렇다.

App에 네비게이션바와 라우트가 있다. 라우트에는 Home(영화목록)과 About이 있다.

홈(영화목록)에서 각 영화제목에 걸어둔 Link컴포넌트가 있는 것이다. 링크를 누르면 Home의 하위컴포넌트인

movie-detail을 불러오게 된다.

(movie-detail 라우트는 App에 작성되어있다. exact가 홈에 속성으로 정의되어 있으므로, 영화목록은 사라지고, detail라우트의 내용만 보여지게 된다)