{"componentChunkName":"component---src-templates-blog-js","path":"/blog/react/react_20200413/","result":{"data":{"markdownRemark":{"html":"

React Project 2 - Movie App

\n

React를 이용하여 API에서 받아온 영화 데이터를 보여주고,

\n

React Router를 이용하여 다른 페이지로 이동할 수 있는 웹사이트를 만들어 보았다.

\n

Github Pages로 로컬에서 개발한 React Code를 Deploy하는 작업도 수행하였다.

\n

결과 화면은 다음과 같다.

\n

\"react1\"

\n
\n

개발환경 세팅

\n
\n

create-react-app [project_name]

\n

cd [project_name]

\n

yarn start

\n
\n

필요한 컴포넌트

\n
\n
    \n
  1. Home : 모든 영화 리스트를 보여주는 컴포넌트
    2. \n
  2. Movie : 각 영화 정보를 관리하는 컴포넌트
    3. \n
  3. Detail : 영화 아이템 클릭 시 상세 정보를 보여주는 컴포넌트
    4. \n
  4. About : About 페이지를 관리하는 컴포넌트
    5. \n
  5. Navigation : 여러 페이지로 이동하도록 하는 상단 Navigation 컴포넌트
    6. \n
\n
\n

컴포넌트 전체 구조

\n
\n

\"react2\"

\n
\n

React Router 사용 (App.js)

\n
\n

url을 확인하며, 명령에 따라 다른 컴포넌트를 불러온다.

\n
    \n
  1. npm install react-router-dom
    2. \n
  2. import {HashRouter, Route} from 'react-router-dom';
    3. \n
  3. HashRouter : # 다음으로 link가 있다.
    4. \n
  4. BrowserRouter : # 가 없지만 Github Pages에 deploy하기 까다롭다.
    5. \n
\n

반드시 Router 안에 Link 또는 Routes를 구현해야 한다.

\n
<HashRouter>\n    <Route path=\"/\" exact={true} component={Home} />\n    {/* exact={true} : url이 path와 정확히 일치할 때만 component를 렌더링함 */}\n    <Route path=\"/about\" component={About} />\n    <Route path=\"/movie/:id\" component={Detail} />\n    {/* path로 이동하면 component를 수행한다. \n      <Route>의 props =>\n      path : 이동할 스크린, component : 수행할 작업 */}\n</HashRouter>
\n
\n

<Link> vs <a> (Navigation.js)

\n
\n

<a href=\"/\"> : <a>를 사용하면 클릭 시 매번 페이지를 새로고침한다. => <Link>를 사용하여 해결

\n
<Link\n    to={{\n        pathname: \"/about\",\n        state: {\n            fromNavigation: true\n        }\n        // About 페이지로 object를 전송\n    }}\n>\n    About\n</Link>
\n

⇒ pathname 페이지로 state object를 전송한다.

\n
\n

Movie API의 JSON data Fetching (Home.js)

\n
\n\n

(axios는 HTTP 클라이언트 라이브러리로써, 비동기 방식으로 HTTP 데이터 요청을 실행한다.)

\n
    \n
  1. Axios 설치 : npm install axios
    2. \n
  2. import axios from 'axios';
    3. \n
  3. 컴포넌트가 생성될 때 (DOM에 Mount될 때) 호출되는 componentDidMount()함수에서 axios.get()을 수행한다.
    4. \n
  4. 이 때, axios.get()을 통해 data를 받아오는 데에 시간이 걸리므로 비동기로 처리해야 한다. (async await 이용)
    5. \n
\n
\n

비동기 처리 : async await (Home.js)

\n
\n\n
// 방법 1\ngetMovies = async () => {\n\t\tconst movies = await axios.get(\"https://yts-proxy.now.sh/list_movies.json\");\n\t\t/* axios.get() : Network에서 데이터를 받아옴\n\t\t    => movies 객체에 저장 */\n\n\t\tconsole.log(movies.data.data.movies);\n\t\tthis.setState({movies.data.data.movies, isLoading:false})\n}
\n
// 방법 2 => ES6을 이용하여 간결하게 표현.\ngetMovies = async () => {\n    const {\n        data: {\n            data: { movies }\n        }\n    } = await axios.get(\"https://yts-proxy.now.sh/list_movies.json\");\n\n    console.log(movies);\n\n    this.setState({ movies, isLoading: false });\n    /* => {movies: movies}로 표현하지 않고 단축해서 사용하는 것도 가능함. JavaScript가 movies를 자동적으로 axios의 movies로 인식한다. \n\t\t    axios.get()으로 데이터가 fetch되면, state의 isLoading을 false로 변경한다. */\n};
\n
\n

Class Component vs Function Component (Movie.js)

\n
\n

state를 필요로 하지 않는 Component, 즉 객체의 상태 변경이 필요 없으며 부모로부터 받은 props를 그대로 사용하는 Component는 Class Component로 작성할 필요가 없다 ⇒ Function Component로 작성한다.

\n
\n

PropTypes (Movie.js)

\n
\n

객체의 type과 필요 여부를 미리 설정하고, 설정한 값과 다른 값이 들어올 경우 에러를 표시하기 위해 PropTypes를 이용한다.

\n
    \n
  1. import PropTypes from 'prop-types';
    2. \n
  2. \n

    ex)

    \n
    [컴포넌트].propTypes = {\n    id: PropTypes.number.isRequired,\n\t\t...\n}
    \n
    3. \n
\n
\n

Each child in a list should have a unique \"key\" prop.

\n
\n

map()을 통해 List를 객체로 표현할 때 반드시 key값을 지정해 주어야 한다.

\n

⇒ map의 각 요소들은 unique한 key값을 가지고 있어야 한다.

\n

(map에서 기본적으로 제공하는 index 사용 가능.)

\n

ex)

\n
genres.map((genre, index) => (\n    <li key={index} className=\"genres_genre\">\n        {genre}\n    </li>\n));
\n
\n

React의 location, history를 이용한 Redirection

\n
\n
    \n
  1. Parent Component에서 Link to의 state property를 이용하여, Link를 클릭해 Child Component 이동할 때 Object를 전송한다.
    2. \n
  2. Child Component에서는, 컴포넌트가 생성될 때 호출되는 componentDidMount()에서 state에 값이 들어왔는지 확인한다. (location.state)
    3. \n
  3. \n

    state에 아무 값도 들어오지 않은 경우 /로 돌아가도록 설정한다. => Redirect

    \n

    즉, Link를 클릭하여 이동했을 경우에만 state값이 전송되며 해당 페이지로 이동할 수 있다.

    \n
    componentDidMount() {\n        const {location, history} = this.props;\n        if(location.state === undefined) {\n            history.push(\"/\");\n        }\n    }
    \n
    4. \n
\n
\n

Github Pages에 Deploy하기

\n
\n
    \n
  1. Github Repository에 React Code를 Push한다.
    2. \n
  2. git remote -v
    3. \n
  3. npm i gh-pages : 웹사이트를 github page 도메인에 띄워주기 위한 gh-pages 라이브러리를 설치한다.
    4. \n
  4. \n

    package.json 파일의 하단에 다음과 같이 추가

    \n

    \"homepage\": \"https://[username].github.io/[projectname]\"

    \n

    \"scripts\": {} 안에 다음과 같이 추가

    \n

    \"deploy\": \"gh-pages \"

    \n
    5. \n
  5. npm run build ⇒ Project에 build 폴더가 생성된 것을 확인 (이 build 폴더를 gh pages에 업로드하는 것이다.)
    6. \n
  6. \n

    이전에 작성한 script 내용을 다음과 같이 변경

    \n

    \"deploy\": \"gh-pages -d build\",

    \n

    \"predeploy\": \"npm run build\"

    \n

    ⇒ npm이 predeploy를 호출한 다음 deploy를 호출하도록 설정.

    \n
    7. \n
  7. npm run deploy ⇒ 완료!
    8. \n
\n

Reference Link

\n
\n

React Redux의 필요성..

\n
\n\n
\n

전체 Code

\n
\n

App.js

\n
import React from \"react\";\nimport Home from \"./routes/Home\";\nimport About from \"./routes/About\";\nimport Detail from \"./routes/Detail\";\nimport Navigation from \"./components/Navigation\";\nimport { HashRouter, Route } from \"react-router-dom\";\n\n// npm install react-router-dom\n\nfunction App() {\n    return (\n        <HashRouter>\n            <Navigation />\n            <Route path=\"/\" exact={true} component={Home} />\n            <Route path=\"/about\" component={About} />\n            <Route path=\"/movie/:id\" component={Detail} />\n        </HashRouter>\n    );\n}\n\nexport default App;
\n

Navigation.js

\n
import React from \"react\";\nimport { Link } from \"react-router-dom\";\n\nfunction Navigation() {\n    return (\n        <div>\n            <Link to=\"/\">Home</Link>\n            <Link to=\"/about\">About</Link>\n        </div>\n    );\n}\nexport default Navigation;
\n

Home.js

\n
import React, { Component } from \"react\";\nimport Movie from \"../components/Movie\";\nimport axios from \"axios\";\n\n// npm install axios\n\nclass Home extends Component {\n    state = {\n        isLoading: true,\n        movies: []\n    };\n    getMovies = async () => {\n        const {\n            data: {\n                data: { movies }\n            }\n        } = await axios.get(\n            \"https://yts-proxy.now.sh/list_movies.json?sort_by=rating\"\n        );\n\n        console.log(movies);\n\n        this.setState({ movies: movies, isLoading: false });\n    };\n    componentDidMount() {\n        this.getMovies();\n    }\n    render() {\n        const { isLoading, movies } = this.state;\n        const movieList = movies.map(movie => (\n            <Movie\n                key={movie.id}\n                id={movie.id}\n                title={movie.title}\n                year={movie.year}\n                genres={movie.genres}\n                summary={movie.summary}\n                poster={movie.medium_cover_image}\n                rating={movie.rating}\n            />\n        ));\n        return (\n            <section className=\"container\">\n                {isLoading ? (\n                    <div className=\"loading\">Loading...</div>\n                ) : (\n                    <div className=\"movies\">{movieList}</div>\n                )}\n            </section>\n        );\n    }\n}\nexport default Home;
\n

Movie.js

\n
import React from \"react\";\nimport { Link } from \"react-router-dom\";\nimport PropTypes from \"prop-types\";\n\nfunction Movie({ id, title, year, genres, summary, poster, rating }) {\n    return (\n        <Link\n            to={{\n                pathname: `/movie/:${id}`,\n                state: {\n                    title,\n                    year,\n                    genres,\n                    summary,\n                    poster,\n                    rating\n                }\n            }}\n        >\n            <div className=\"movie_container\">\n                <img src={poster} alt={title} title={title} />\n                <h1 className=\"movie_title\">{title}</h1>\n                <h3 className=\"movie_year\">{year}</h3>\n                <div className=\"movie_rating\">Rating : {rating}/10.0</div>\n                <ul className=\"movie_genres\">\n                    {genres.map((genre, index) => (\n                        <li key={index} className=\"genres_genre\">\n                            {genre}\n                        </li>\n                    ))}\n                </ul>\n            </div>\n        </Link>\n    );\n}\nMovie.propTypes = {\n    id: PropTypes.number.isRequired,\n    title: PropTypes.string.isRequired,\n    year: PropTypes.number.isRequired,\n    genre: PropTypes.arrayOf(PropTypes.string),\n    rating: PropTypes.number,\n    summary: PropTypes.string,\n    poster: PropTypes.string.isRequired\n};\n\nexport default Movie;
\n

Detail.js

\n
import React from \"react\";\n\nclass Detail extends React.Component {\n    componentDidMount() {\n        const { location, history } = this.props;\n        if (location.state === undefined) {\n            history.push(\"/\");\n            // Redirection\n        }\n    }\n    render() {\n        const { location } = this.props;\n        if (location.state) {\n            return (\n                <div>\n                    <h1 className=\"movie_title\">{location.state.title}</h1>\n                    <img\n                        src={location.state.poster}\n                        alt={location.state.title}\n                        title={location.state.title}\n                    />\n                    <h3 className=\"movie_year\">{location.state.year}</h3>\n                    <ul className=\"movie_genres\">\n                        {location.state.genres.map((genre, index) => (\n                            <li key={index} className=\"genres_genre\">\n                                {genre}\n                            </li>\n                        ))}\n                    </ul>\n                    <div className=\"movie_rating\">\n                        Rating : {location.state.rating}/10.0\n                    </div>\n                    <div className=\"movie_summary\">\n                        {location.state.summary}\n                    </div>\n                </div>\n            );\n        } else {\n            return null;\n        }\n    }\n}\nexport default Detail;
\n

About.js ⇒ 자유롭게 작성.

\n

React Fundamentals 2019 - Nomad Coder 참고

","id":"fb8b1bd2-7b11-5867-80c9-659e4cce06f6","frontmatter":{"title":"[React] React Project 2 - Movie App ","date":"2020-04-13T00:00:00.000Z","description":null},"fields":{"slug":"/blog/react/react_20200413/"}}},"pageContext":{"slug":"/blog/react/react_20200413/"}}}