-
React - Create MovieContainerProject using React/Cloning Netflix 2021. 5. 9. 08:08
Movie/MovieContainer.js
import { moviesApi } from "api"; import React from "react"; import MoviePresenter from "./MoviePresenter"; export default class extends React.Component { state = { loading: true, nowPlaying: null, upcoming: null, popular: null, error: null, }; async componentDidMount() { try { const { data: { results: nowPlaying }, } = await moviesApi.nowPlaying(); const { data: { results: upcoming }, } = await moviesApi.upcoming(); const { data: { results: popular }, } = await moviesApi.popular(); this.setState({ nowPlaying, upcoming, popular, }); } catch { this.setState({ error: "Can't find movie information.", }); } finally { this.setState({ loading: false, }); } } render() { const { nowPlaying, upcoming, popular, error, loading } = this.state; return ( <MoviePresenter nowPlaying={nowPlaying} upcoming={upcoming} popular={popular} error={error} loading={loading} /> ); } }state
state는 Component에서 사용할 변수들을 의미한다.
this.setState
this.setState로 state를 조작할 수 있다.
Movie/MoviePresenter.js
import Helmet from "react-helmet"; const MoviePresenter = ({ nowPlaying, upcoming, popular, error, loading }) => ( <> <Helmet> <title>Movies | Nomflix</title> </Helmet> {loading ? <h1>loading</h1> : <h2>hello</h2>} </> ); export default MoviePresenter;Helmet
설치
$ npm i react-helmet
개요
Helmet은 react에서 html의 <head> 파트를 조작할 수 있는 Component다.
참고 자료
- 노마드 코더의 React 멤버쉽 강의
- react-helmet
소스 코드
github.com/zpskek/Nomflix-v2/commit/eaeb6001e5c9fd132fdb3048586fcf394fd50430
'Project using React > Cloning Netflix' 카테고리의 다른 글
React - Create MoviePresenter (0) 2021.05.09 React - Create Loader.js (0) 2021.05.09 React Life cycle Methods (0) 2021.05.09 React create Header.js (0) 2021.05.09 React GlobalStyles.js (0) 2021.05.09