영화 소개 프로젝트: 라우팅

배웠던 것을 바탕으로 리액트 라우터 연결해보기

라우팅만 연결하면 됩니다.

HeaderLink 설정하기

App.js 설정하기

우선은 라우터를 먼저 설정해 주도록 할게요.

이제 리스트에서 영화를 클릭하게 되면 영화 세부 페이지로 이동하도록 만들어야 합니다. Link를 이용해서요.

그러나 우리는 이미 UI를 완성했으니, 영화 제목을 클릭하면 history.push를 실행하는 것으로 진행을 해 보도록 하겠습니다.

인자를 담은 함수가 실행되어야 했기 때문에 화살표 함수의 형태로 작성합니다. 작동하는 메소드는 현재 영화 이름을 기반으로 해서 페이지를 이동시킵니다. history를 movieData component에서 사용할 수 있는 이유는 Route 태그에 감싸져 있기 때문입니다. (Route 태그는 history, location과 같은 태그들을 props로 사용할 수 있게 해 줍니다.)

영화 하나의 정보를 알려주는 컴포넌트 만들기

src 폴더에 movie-specific이라는 폴더를 만들어 보겠습니다.

이 컴포넌트에는 영화 한개의 정보만을 props로 넣어줄 것입니다. movie-list 컴포넌트는 리스트 전체를 보여주어야 했기 때문에 모든 컴포넌트가 필요 했었습니다. 하지만 specific 컴포넌트에서는 영화 한개의 정보만 보여주면 됩니다. url을 통해서 특정 영화의 정보를 보여주어야 하니까요.

그러면, 영화 한개의 정보를 추출해야 하는데, 어떻게 추출해야 할까요? 우선은 라우트 연결부터 시작하겠습니다.

영화 한개의 정보를 알려주는 state도 만들어 보도록 하겠습니다.

이제 지금 만들어놓은 state를 MovieSpecific 컴포넌트에 전달해 주도록 하겠습니다.

state를 할당할 때에는 여기에 값을 null로 할당을 했었습니다. 그렇게 되면 movieSpecific 컴포넌트에서 보여주어야 할 데이터는 없게 됩니다. 이제 한번 null로 초기할당이 되어있는 값을 영화 한개의 정보가 들어있도록 처리하는 로직을 만들어 보도록 하겠습니다. 라이프사이클을 적극 사용할 것입니다.

영화 하나의 정보를 가져오는 메소드 만들기

그러나 메소드를 만들기만 해서는 currentMovieData state가 변경되지 않습니다. 업데이트를 해 주어야 하겠죠?

알맞은 환경에서 메소드 실행시키기

이 경우에는 라이프사이클에 의존해서 업데이트 하는것이 훨씬 효율적인 방법입니다. 우선은 componentDidMount에서 state의 정보를 한번 업데이트 해 줍니다.

그러나 componentDidMount로는 부족합니다. 유저가 URL을 왔다갔다 하면서 새로운 영화 정보를 보려고 들어가더라도, componentDidMount는 더이상 실행되지 않습니다. pathname이 바뀔 때마다 새로이 메소드를 실행할 무언가가 필요합니다. 이것이 바로 componentDidUpdate입니다.

단, componentDidUpdate는 위험성이 한가지 존재합니다.

componentDidMount에서 함수를 호출해 버리게 되면, setState가 실행되면서 componentDidUpdate가 작동을하게 되고, 여기서 메소드를 특별한 로직 없이 실행을 시키게 될 경우에는 무한루프가 실행되면서 앱이 정상적으로 동작할 수가 없게 됩니다. (2주차때 배운 라이프사이클 과정에서 나옴) 하나의 컴포넌트는 새로운 props, setState의 호출 여부에 따라서 다시한번 update로직을 작동시키기 때문입니다.

그렇다면 어떻게 해야 할까요? 바로 이전 라우트와 현재 라우트의 비교입니다. componentDidUpdate에서는 놀랍게도 두개의 인자를 받는데, 하나는 업데이트 되기 이전 props이고 하나는 업데이트 되기 이전 state입니다.

여기에서 생각해 봐야 하는 점이 있는데, getSpecificMovieInfo는 유저가 라우트를 변경했을 때에 한번만 체크를 해주면 됩니다. 그렇다면 아래 사진과 같이 로직을 작성해야겠죠.