22 - 영화 앱에 기능 추가하기 (3) - 마지막.

1. 리다이렉트 기능 만들기

리다이렉트 기능을 위해서는 route props 의 history 키를 활용한다.

history 키에는 push, go, goBack, goForward 와 같은 키가 있다.

이 키들은 URL을 변경해 주는 함수들이 들어있다.

 

- history 키 살펴보기

앱 실행후 개발자 도구 console탭에 history에 출력된 값을 펼쳐보자.

push, go, goBack, goForward 키가 보인다.

지정한 URL로 보내주는 push() 함수를 사용한다.

그전에 Detail 컴포넌트를 클래스형 컴포넌트로 변경한다.

그래야 componentDidMount() 생명주기 함수를 사용해

Detail 컴포넌트가 마운트 될 때 push() 함수를 실행한다.

 

- Detail 컴포넌트 클래스형 컴포넌트로 변경하기

Detail 컴포넌트를 함수형에서 클래스형 컴포넌트로 변경하고,

location, history 키를 구조 분해 할당한다.

Detail.js 를 보자.

import React from 'react';

class Detail extends React.Component {
  componentDidMount() {
    const { location, history } = this.props;
  }

  render() {
    return <span>hello</span>;
  }
}

export default Detail;

 

- push() 함수 사용하기

location.state 가 undefined 인 경우 history.push("/") 를 실행하도록 작성한다.

Detail.js 를 보자.

class Detail extends React.Component {
  componentDidMount() {  // Detail 컴포넌트가 마운트 되면
    const { location, history } = this.props;  // 구조 분해 할당으로 lacation, history를 얻고
    if (location.state === undefined) { // location.state가 없는 경우
      history.push("/");  // Home으로 이동시킨다.
    }
  }

 

- 리다이렉트 기능 확인해 보기

앱을 확인하고 직접 /movie-detail 입력해서 이동해본다.

다시 Home으로 돌아오면 성공.

 

- 영화 제목 출력하기

Movie 컴포넌트로 전달받은 영화 데이터는 location.state에 들어있다.

이제 hello가 아닌 location.state.title 을 출력한다.

Detail.js 를 보자.

render() {
  const { location } = this.props;  // 여기 추가
  return <span>{location.state.title}</span>; // hello 삭제하고 적어준다.
}

앱 실행해서 영화 카드 누르면 영화 제목이 뜬다.

 

- /movie-detail 로 바로 이동하기

다시 /movie-detail 로 바로 이동하면 오류가 뜬다. 

componentDidMount() 생명주기 함수에 작성한 리다이렉트 기능이 동작하지 않는다.

이유는 Detail 컴포넌트는 render() --> componentDidMount() 의 순서로 함수를 실행한다.

render() 함수 내에서 location.stete.title 을 사용하려 하는데,

location.state가 아까처럼 undefined 이기 때문이다.

render() 함수에도 componentDidMount() 생명주기 함수에 작성한 리다이렉트 코드를 추가한다.

 

- location.state 확인하기

location.state 가 없으면 render() 함수가 null을 반환하게 수정한다.

Detail.js 를 보자.

render() {
    const { location } = this.props;
    if (location.state) {
      return <span>{location.state.title}</span>;
    } else {
      return null;
    }
  }

location.state 가 없으면 render() 함수가 null을 반환하도록 만들어서 잘 실행된다.

이어서 componentDidMount() 생명주기 함수가 실행되면서 리다이렉트 기능이 동작.

영화 상세 페이지에 필요한 정보는 직접 입력해보자.

---

영화 앱 만들기 끝.

여기까지 종합

리다이렉트 기능 사용, push() 함수 사용.

state가 undefined 일 때 history.push("/") 사용해서 다시 메인으로 보내기.

location.state 가 없을때 render() 함수가 null 반환하게 하기.

 

 

 

이제 다시 처음부터 만들어본다.

최대한 안보고 만들고, 모르는 부분은 참고해서 만든다.

결과적으로 안보고 다 만들 수 있을 때까지 반복한다.

css 부분은 복붙하고 값들은 임의로 수정하자.