nomad coder movie[1]

BackEnd_Ash.log·2020년 4월 3일
0

react-movie

목록 보기
1/6

이전에 저는 공부법에 대해서 작성한 적이 있습니다.

https://velog.io/@ash3767/%EB%8F%85%EC%84%9C%EA%B3%B5%EB%B6%80%EB%B2%95

여기서 탐색이라는 과정을 해볼까하는데 ,
https://academy.nomadcoders.co/courses/216871/lectures/12913618
위의 노마드 코더 분 강의중에 movie app 을 만들어 보는 강의가 있었습니다.

이분의 코드를 보면서 하나하나 공부를 해볼까 합니다. 그리고 활용을 해볼까해요 .

component 와 router

코드를 보면 src 밑에
components 와 routers 가 있습니다.
무엇일까 ??? router 를 처음 봤을때는 router , switch 인건가?? 뭐지..
흠.. ip 주소가 있을꺼고 gateway 와 서브넷 주소 등등 이런것들이 일치하는것만 통신을 한다는건가 ?? 라는생각을 했다.

땡!!!!!!!

틀렸습니다.
제가 이해한것이 정확한지는 모르겠지만
router 는 navigation 느낌이고
component 는 한 부품의 기능 들을 나열한 느낌이였습니다.

그리고 router 를 사용할려면 설치를 해야하는데요 .

router 설치

npm install react-router-dom --save

우선적으로 설치를 해줍니다.

설치가 됬으면 src 폴더 밑에 routers 라는 폴더를 만들어 줍니다.

App.js


 import React from "react";
import { HashRouter, Route } from "react-router-dom";
import Home from "./routes/Home";
import About from "./routes/About";
import Detail from "./routes/Detail";
import Navigation from "./components/Navigation";
import "./App.css";

function App() {
  return (
    <HashRouter>
      <Navigation />
      <Route path="/" exact={true} component={Home} />
      <Route path="/about" component={About} />
      <Route path="/movie/:id" component={Detail} />
    </HashRouter>
  );
}

export default App;

App.js 가 메인이라는 말을 어디서 들었다.
그래서 App.js 를 먼저 봤고 , 

import React from "react" // 라이브러리 불러옴
...
import Home from "./routes/Home"; // 각각의 페이지
import About from "./routes/About";
import Detail from "./routes/Detail";
import Navigation from "./components/Navigation";

는 리액트 라이브러리 불러오는것같고 ,
나머지 밑에 3개는 페에지가 3 개였는데 각각 해당하는것 같았습니다.

그리고 네이게이션..

네비게이션 경로로 들어가봤습니다.


import React from "react";
import { Link } from "react-router-dom";
import "./Navigation.css";

function Navigation() {
  return (
    <div className="nav">
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </div>
  );
}

export default Navigation;

이렇게 적혀있었는데
네비에 link 를 걸어줍니다.
참고자료 : https://www.daleseo.com/react-router-basic/

그리고 저렇게 작성되어있는 네비 를 App.js 에 불러옵니다.

다시 한번 App.js 를 봤습니다.

function App() {
  return (
    <HashRouter>
      <Navigation />
      <Route path="/" exact={true} component={Home} />
      <Route path="/about" component={About} />
      <Route path="/movie/:id" component={Detail} />
    </HashRouter>
  );
}

HashRouter 는 뭐지 ???;;

검색을 해봤습니다.

BrowserRouter

자 우리는 무엇을 공부하고 있다 ??
router 와 component 를 보고 있습니다.
그중에서도 router 를 보고있는데 router 중에서 HashRouter 를 볼려고 검색하다 보니깐 BrowserRouter 가 나와서 작성을 하고있습니다.

이것은 무엇인가 ??

참고 자료 : https://codingbroker.tistory.com/72

  • react-router-dom 의 라우터는 와 두가지가 있습니다.
  • BrowserRouter 는 HTML5 의 history API 를 활용하여 UI를 업데이트하고,
  • HashRouter 는 URL 의 hash를 활용한 라우터입니다.

보통 request 와 response로 이루어지는 동적인 페이지를 제작하므로 BrowserRouter 가 보편적으로 사용한다고 하네용.

Route

요청받은 pathname 에 해당하는 컴포넌트를 렌더링 합니다.

  <HashRouter>
    <Navigation />
    <Route path="/" exact={true} component={Home} />
    <Route path="/about" component={About} />
    <Route path="/movie/:id" component={Detail} />
  </HashRouter>

아하 그니깐 이렇게 되어있는데 HashRouter 는 URl 의 hash 를 활용한것이라서 , Route 렌더링 할 url 을 hash 니깐 찾아주네.
이해한것이.. 맞는지 모르겠지만 이해를 했습니당

링크를 생성

그래서 App.js 에서

import { HashRouter, Route } from "react-router-dom";

를 import 하고 사용을 했구나 ~

자 그럼 routers 라는 폴더안에 , Home.js 파일을 열어보겠습니다.

routers/home.js

  
import React from "react";
import axios from "axios";
import Movie from "../components/Movie";
import "./Home.css";

class Home 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 className="container">
        {isLoading ? (
          <div className="loader">
            <span className="loader__text">Loading...</span>
          </div>
        ) : (
          <div className="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}
                genres={movie.genres}
              />
            ))}
          </div>
        )}
      </section>
    );
  }
}

export default Home;

제일위에 import 한것부터 보겠습니다.

import React from "react";
import axios from "axios";
import Movie from "../components/Movie";
import "./Home.css"

axios 는 뭔가요 ??
또 검색을 했습니다.

Axios vs Fetch

자 우리는 App.js 를 보다가 BrowserRouter 를 보게되었고 ,
어떻게 Route 와 HashRouter 가 쓰이는지 알게되었습니다.
그리고 나서 home.js 에서 import 부분을 보다가 axios 에서 막혀서 검색을 했는데요 . 저위의 자료가 나왔습니다.

  • Axios
    사용하기 더 편하다
    fetch 에서 지원하지 않는 기능들을 지원해준다.
    Promise base
  • Fetch
    import 하지 않고 쓸 수 있다.
    React Native 의 경우 업데이트가 잦아서 , 라이브러리가 업데이트를 쫒아오지 못하는 경우가 생기는데 Fetch 의 경우 이런 걱정 필요없음.
    Promise base
    네트워크 에러가 발생했을 때 , 기다려야함

라고 적혀있다.
사용하는 이유도 입맛에 맞게 사용해도 되지만,
React-Native 의 경우엔 업데이트가 너무 빠르기 때문에 fetch 를 써야한다 정도 ??

암튼.. 둘다 api 를 받기 위함이다.
그럼 

  import axios from "axios";

이 import 는 api 내려받는데 axios 를 사용하겠다는겁니다.

axios 설치

npm i axios

라고 하면 설치되어짐.

React.Component

class Home extends React.Component

라는 녀석이 있었다.상속을 받는녀석인데.. 흠.. React.Component 에 상속으 받네요 .

우리가 render 함수를 사용하는데 , React 컴포넌트 class 정의하려면 반드시 상속을 받아야한다고 하네요 . React.Component 하위 class 에서 정의해야하는 메서드라고 하네요.

  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 });
  };

getMovies 라는 함수를 만들어 주고 , const 객체를 만든다.
data 라는 키에 movies 라는 values 에 api 를 담아주고 this.setState 로

  state = {
  	isLoading : true ,
  	movies : []
  }

를 변경해준다.

render()

    render() {
    const { isLoading, movies } = this.state;
    return (
      <section className="container">
        {isLoading ? (
          <div className="loader">
            <span className="loader__text">Loading...</span>
          </div>
        ) : (
          <div className="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}
                genres={movie.genres}
              />
            ))}
          </div>
        )}
      </section>
    );

삼항 연산자를 사용했습니다.
삼상 연산자를 true 인경우 앞에를 실행하고 false 일땐 뒤에를 실행합니다.

만약 isLoading 이라면

  <span className="loader__text">Loading...</span>

를 출력해주고 그게 아니라면, 즉 api 를 다 받아왔다면 

<div className="movies">
          {movies.map(movie => (
            <Movie
                   ...

를 뿌려 달라는 거에요 ㅎㅎ

profile
BackEnd_Ash.log
꾸준함이란 ... ?
다음 포스트

nomad coder movie[2]

0개의 댓글