let으로 할당 제거(Destructuring assignment)

• Destructuring assignment이란 es6에 추가된 새로운 표현식이다.
• ({ data: result } = await moviesApi.movieDetail(parsedId))
  • ()한 이유(할당 제거): 니코왈:"const {data : result} = await .....를 수행하면 그런 다음 try {} 안에 'result'const를 생성했기 때문에 finally {}에서 'result'변수에 액세스하여 상태를 설정할 수 없습니다. {}"
  • 내가 이해한 내용: finally{} 에서 result 변수에 접근 하기위해서 할당 제거를 사용했다

 

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) {
        ({ data: result } = await moviesApi.movieDetail(parsedId));
      } else {
        ({ data: result } = await tvApi.showDetail(parsedId));
      }
    } 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(result);
    return <DetailPresenter result={result} error={error} loading={loading} />;
  }
}