1 axios 설치하고 async , await 사용하기

• JS에서 data를 fetch하는 방법은 fetch를 사용하는 것이다.
• npm i axios 로 터미널에 입력하여 설치
  • 1. axios 를 import 한다
  • 2. componentDidMount()에서 axios로 API 호출
  • 3. axios.get() 함수의 인자에 URL을 전달해서 API를 호출한다.

• 하지만 axios는 네트워크를 사용하기 때문에, 느리다. 그래서 JS에게 axios.get() 을 포함하고 있는 함수의 실행이 끝날 때 까지 시간이 걸린다라고 알려줘야한다.

• getMovie() 함수 기다린 후 axios.get() 함수가 반환 데이터를 잡는다.
  • getMovie() function을 만들고 그 함수 안에 axios.get()이 실행되도록 한다. 이 function이 반환한 값을 movies에 저장한다.

• componentDidMount()가 실행되면, this.getMovies가 실행된다.

  • async 와 await 키워드가 필요하다.
  • getMovies()에 async를 붙이고 axios.get()에 await을 붙인다.
    • async 는 js에게 getMovies function이 비동기라고 알려준다.
      await은 js에게 axios.get() function의 실행완료를 기다렸다가 끝나면 진행하라고 알려준다.

  영화 앱의 실행 순서
  리액트 앱 launch -> render() funcion -> 최초의 state에는 isLoading, movies 가 존재 -> isLoading 은 true, movies는 array(length === 0) 이다. -> 최초의 실행화면은 Loading... 이 rendering된다.

App component Mounting -> componentDidMount() function Launch -> getMovies() funcion Launch -> 시간이 소요되는 axios.get()포함이 되어있다. -> getMovies() function에 async add , axios.get() funcion에 await add -> async , await은 짝이다.

2 - Movie data를 가져와서 state에 있는 render function에 보여주기

• 앞에서 async, await 키워드와 axios.get() function 을 통해서 API를 호출했다.
• axios.get() function으로 잡은 데이터가 movie 변수 안에 있으니 log(movies)로 확인해볼 수 있다.
  • movies.data.data.movie로 접근할 수 있는데, 구조분해 할당으로 좀 더 깔끔하게 할 수 있다.

const {
      data: {
        data: { movies },
      },

• ES6에서는 객체의 키와 대입할 변수의 이름이 같다면 코드를 축약할 수 있다.
  • 그래서 this.setState({ movies: movies}) 말고 this.setState({ movies }) 로 수정할 수 있다.
  • 그리고 isLoading의 값을 false로 수정해준다.
  • this.setState({ movies, isLoading: false })
  • state에 영화 데이터 저장 -> movies state가 변경 -> render() function Launch again

이렇게 영화 데이터를 가져왔고 , 로딩 상태까지 변경했다. 다만 영화 데이터는 출력하고 있지 않은데, 진행하려면 movie state을 화면에 그려야한다. 그레서 Movie Component를 만들어야한다.

Movie Component

• Movie Component는 state가 필요하지 않아서 클래스형이 아닌 함수형 컴포넌트로 만든다.
• Movie에 넘어와야하는 영화 데이터를 관리하기 위하여 `import PropTypes from "prop-types"로 import 해온다.
• 그리고 Movie.propType ={}안에 값들을 채워서 필요한 데이터들을 맞는 값만 받아올수있게 설정해준다.

API 정렬 기능 사용하기

• API 주소 뒤에 ?sort_by=rating을 붙여서 평점 내림차순으로 영화데이터를 가져올 수 있다.
• App Component에서 Movie Component로 id, title, year, summary, poster props를 넘겨주면 된다.
• Movie Component에 props를 추가했으면 map() function으로 출력한다.

App Component에서 Movie Component 그리기

• 구조분해할당으로 this.state에 있는 movie를 얻은 후 App Compoennt에서 We are ready 자리에 movies.map()을 사용한다
• 설정한 props를 모두 전달하기 위해서 App Component에서 import Movie from "./Movie"로 가져온다
• movies.map() function에 <Movie /> 를 반환하도록 한다.
• <Movie /> 안에 props를 전달하도록 코드를 작성한다.

• key props는 유일해야 하기 떄문에, API에서 넘겨주는 id를 사용한다.
  • 컴포넌트를 여러 개 출력할 때는 유일한 값을 사용해 key props를 추가한다.
  • key={movie.id}

    nomad coder movie API를 통해 영화데이터 가져옴 -> 영화데이터 가져올 때 axios.get() function use -> axios.get() function은 시간이 필요하기 떄문에 async , await use -> state에 movie data가 update되면 isLoading... 을 보여주던 화면을 Movie Component를 출력하게 만들어준다.