#4.2 Styling the Movies

#4.2 Styling the Movies

🍺 이번 시간에는 코드를 좀 예쁘게 바꿔볼 것이다.

🍺 HTML 작업하기

import React from "react";

import axios from "axios";

import Movie from "./Movie";

class App extends React.Component{

  state = {

    isLoading: true,

    movies: []

  };

  getMovies = async () => {

    const {data: {data: {movies}}} = await axios.get("https://yts-proxy.now.sh/list_movies.json?sort_by=rating");

    this.setState({movies, isLoading: false});

  }

  componentDidMount(){

    this.getMovies();

  }

  render(){

    const {isLoading, movies} = this.state;

    return (

    <section class="container">

      {isLoading ? (

      <div class="loader">

        <span class="loader__text_">Loading...</span>

      </div>

      )

      : (

        <div class="movies">

          {movies.map((movie) => (

             <Movie

             key={movie.id}

             id={movie.id}

             year={movie.year}

             title={movie.title}

             summary={movie.summary}

             poster={movie.medium_cover_image}

           />

          ))}

        </div>

      )}

    </section>

  );

  }

}

export default App;

✅App.js

 

import React from "react";

import PropTypes from "prop-types";

function Movie({id, year, title, summary, poster}){

    return (

        <div class="movie">

            <img src={poster} alt={title} title={title} />

            <div class="movie__data">

                <h3 class="movie__title">{title}</h3>

                <h5 class="movie__year">{year}</h5>

                <p class="movie__summary">{summary}</p>

            </div>

        </div>

    )

};

Movie.propTypes = {

    id : PropTypes.number.isRequired,

    year: PropTypes.number.isRequired,

    title: PropTypes.string.isRequired,

    summary: PropTypes.string.isRequired,

    poster: PropTypes.string.isRequired

};

export default Movie;

✅Movie.js

 

이렇게 하면 잘 동작한다.

 

 

이렇게 잘 보인다.!!

 

🍺 CSS 작업하기

create-react-app 때문에 css통합이 매우 쉽다.

App.css와 Movie.css 파일을 만들고, App.js에서는 App.css를 import 하고, Movie.css에서는 Movie.css를 import 해온다. 그리고 작성한다.

 

import "./App.css";

▲ App.js

 

import "./Movie.css";

▲ Movie.js

 

이 수업은 css 수업이 아니기 때문에, css 작업을 같이 하지는 않는다.

(스타일 컴포넌트에 대한 강의는 리액트 스타일? Styled Components 를 왜 배우는가! 에서 들을 수 있다.)