[React] Axios 와 CSS

일반적으로 javascript 로 API 데이터를 가져오기 위해서 fetch 와 axios 중 하나를 사용합니다.

둘 다 장단점이 존재하여 우월을 가리기 힘들지만 이번 포스팅에서는 axios 를 사용하여 네트워크 통신을 하도록 하겠습니다.

API 로는 YTS 에서 만든 영화 API 를 사용하도록 하겠습니다.

https://yts.lt/api/v2/list_movies.json

Axios

axios 를 사용하기 위해서는 설치와 import 가 필요합니다.

> npm install axios

// src/App.js

import axios from "axios";

// 생략

 

react 에서 API 데이터를 가져오는 부분은 componentDidMount() 메소드에서 구현을 합니다.

state 에 movies 배열을 하나 만든 후 getMovies() 메소드로 axios 로 데이터를 가져오겠습니다.

하지만 데이터를 가져오는데 시간이 필요하기 때문에 async , await 를 이용해주었습니다.

import React from 'react';
import axios from 'axios';

class App extends React.Component {
  state = {
    movies: []
  };

  getMovies = async () => {
    const movies = await axios.get("https://yts.lt/api/v2/list_movies.json");
  }

  componentDidMount() {
    this.getMovies();
  }

  render() {
    return <div></div>
  }
}

export default App;

 

movies 에서 원하는 영화 목록에 접근하기 위해서는 아래 과정을 거쳐 접근할 수 있습니다.

20개의 영화 목록에 접근할 수 있죠.

getMovies = async () => {
  const movies = await axios.get("https://yts.lt/api/v2/list_movies.json");
  console.log(movies.data.data.movies);
}

// (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

 

하지만 이러한 방법보다는 ES6 의 Destructuring 을 사용하여 더 쉽게 나타낼 수 있습니다.

getMovies = async () => {
  const {
    data: {
      data: { movies }
    }
  } = await axios.get("https://yts.lt/api/v2/list_movies.json");
  console.log(movies);
}

// (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

 

이제 받아온 데이터를 state 에 넣어주도록 하겠습니다.

class App extends React.Component {
  state = {
    movies: []
  };

  getMovies = async () => {
    const {
      data: {
        data: { movies }
      }
    } = await axios.get("https://yts.lt/api/v2/list_movies.json");
    this.setState({ movies: movies });
  }
  // 생략
}

 

이 역시 Destructuring 을 사용하면 더 간단히 나타낼 수 있습니다.

this.setState({ movies });

 

이제 이를 화면에 render 해보도록 하겠습니다.

각각의 movie 데이터를 보여줄 Movie component 를 하나 더 정의하기 전에 우선 App.js 에서 사용하고 후에 정의하도록 하겠습니다.

state 의 데이터를 받아온 후에 각 movie object 를 Movie component 에 넘겨주었습니다.

render() {
  const { movies } = this.state;
  return <div>
    {movies.map(movie => {
      return <Movie
        key={movie.id}
        id={movie.id}
        year={movie.year}
        title={movie.title}
        summary={movie.summary}
        poster={movie.medium_cover_image}
      />
    })}
  </div>
}

 

현재까지 App.js 는 다음과 같습니다.

import React from 'react';
import axios from 'axios';
import Movie from './Movie';

class App extends React.Component {
  state = {
    movies: []
  };

  getMovies = async () => {
    const {
      data: {
        data: { movies }
      }
    } = await axios.get("https://yts.lt/api/v2/list_movies.json?sort_by=rating");
    this.setState({ movies });
  }

  componentDidMount() {
    this.getMovies();
  }

  render() {
    const { movies } = this.state;
    return <div>
      {movies.map(movie => {
        return <Movie
          key={movie.id}
          year={movie.year}
          title={movie.title}
          summary={movie.summary}
          poster={movie.medium_cover_image}
        />
      })}
    </div>
  }
}

export default App;

 

이제 Movie.js 를 만들어보겠습니다.

Parent component 인 App 에서 props 를 받아오고 일단은 title 만 화면에 나타냈습니다.

propTypes 를 이용해 넘어오는 값들의 타입을 확인해주었습니다.

import React from "react";
import PropTypes from "prop-types";

function Movie({ year, title, summary, poster }) {
    return <h3>{title}</h3>;
}

Movie.propTypes = {
    year: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired,
    summary: PropTypes.string.isRequired,
    poster: PropTypes.string.isRequired
};

export default Movie;

 

CSS

현재까지 브라우저에 보여지는 화면은 html 태그들을 이용해 크기만 조절하였지 어떠한 css 도 적용되어 있지 않습니다.

react 에서 css 를 적용하는 방법에 대해서 알아보도록 하겠습니다.

우선 App.js 와 Movie.js 를 좀 더 구조화합시다.

구조화하는 방법은 html 과 똑같지만 한 가지 차이점이 존재합니다.

기존에 태그에 대한 이름을 정의하기 위해서 class 를 사용하였지만 이는 js 의 class 와 중복됩니다.

따라서 태그의 이름을 명시하는 경우, class 대신className 으로 사용합니다.

// src/App.js

return (
  <section className="container">
    <div className="movies">
      {
        movies.map(movie => {
          return <Movie
            key={movie.id}
            year={movie.year}
            title={movie.title}
            summary={movie.summary}
            poster={movie.medium_cover_image}
          />
        })
      }
    </div>
  </section>
)

// src/Movie.js

return (
  <div className="movie">
    <img src={poster} alt={title} title={title} />
    <div className="movie__data">
      <h3 className="moivie__title">{title}</h3>
      <h5 className="moivie__year">{year}</h5>
      <p className="moivie__summary">{summary}</p>
    </div>
  </div >
);

 

각각에 대한 css 파일을 만들고 js 파일에서 import 해주도록 합시다.

// src/App.js
import "./App.js"

// src/Movie.js
import "./Movie.js"

 

App.js 와 Movie.js 의 세부적인 코드는 css 에 대한 내용이므로 생략하도록 하겠습니다.