Detail Container 2

2. url경로에 어떤 숫자가 있는지..? (/movie/1 <=  & /show/1 <= 여기에 어떤 숫자가 있는지 알아야함)

• DetailContainer.js

import React from "react";
import DetailPresenter from "./DetailPresenter";
import { moviesApi, tvApi } from "../../api";

export default class extends React.Component {
  constructor(props) {
    super(props);
    const {
      location: { pathname }
    } = props;
    this.state = {
      result: null,
      error: null,
      loading: true,
      isMovie: pathname.includes("/movie/")
    };
  } // 클래스가 생성되어진것

  async componentDidMount() {
    const {
      match: {
        params: { id }
      },
      history: { push }
    } = this.props;
    const { isMovie } = this.state;
    const parsedId = parseInt(id);
    if (isNaN(parsedId)) {
      return push("/");
    }
    let result = null;
    try {
      if (isMovie) {
        const request = await moviesApi.movieDetail(parsedId);
        result = request.data;
      } else {
        const request = await tvApi.showDetail(parsedId);
        result = request.data;
      }
      console.log(result);
    } catch (error) {
      this.setState({ error: "Can't find anything." });
    } finally {
      this.setState({ loading: false, result });
    }
  }

  render() {
    // console.log(this.props); => match.params 정보를 얻을수잇다.
    const { result, error, loading } = this.state;
    console.log(this.state);
    return <DetailPresenter result={result} error={error} loading={loading} />;
  }
}

• constructor안에 state를 집어넣는 이유:
  • state를 설정하기 위해 props에 접근해야하기 때문에 생성자에 넣음. TV 쇼의 세부 정보를 가져와야하지만 동일한 구성 요소를 사용하고 있기 때문에 isMovie를 설정해줌
• constructor에 super()가 들어가는 이유:
• https://medium.com/@umioh1109/react-es6-class-constructor%EC%97%90%EC%84%9C%EC%9D%98-super-9d53ba0611d9

[번역] React ES6 — Class constructor에서의 super()