동백 // 노마드 코더 React JS: Movie App part

출처 : https://nomadcoders.co/

노마드 코더 Nomad Coders

 

---

 

 

Movie App part

핵심 : Movie App을 만들며 배운것들을 총 복습해본다.

 

구현할 기능들 : 영화들의 기본적인 정보들과 링크를 삽입하여서 그 영화에 대해서 더 많은 것을 찾아볼 수 있도록 다른 곳과 연결시켜줌

 

 

 

. then이라는 문법보다 더 많이 사용하고 있는 문법이 있는데 바로 async-await이라는 문법이다.

then으로는 아래와 같이 작성되고

  useEffect(() => {
    fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year")
    // api로부터 response인자를 통해 데이터를 받고 response에서 json을 추출한 값을 return해준다.
    .then((response) => response.json())
    // 그다음 json을 setMovies(modify)에 넣어주고, setLoading에 false값을 return한다.
    .then((json)=> {
      setMovies(json.data.movies);
      setLoading(false);
    });
  }, []);

 

async-await은 아래와 같이 작성된다.

  const getMovies = async() => {
    const response = await fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year`
    )
    const json = await response.json();
    setMovies(json.data.movies);
    setLoading(false);  
  }
  useEffect(() => {
    getMovies()
  }, []);

 

. 비동기 처리란

자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다.

. 왜 비동기 처리가 필요하나면

화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 줄지도 모르는데 마냥 다른 코드를 실행 안 하고 기다릴 순 없기 때문입니다.

 

출처 : https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

 

 

. Promise란?

프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다.

. 왜 Promise가 필요하나면

프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용되며, 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 마냥 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜨는 것 같은 문제점을 해결하기 위한 방법중 하나입니다.

 

출처 : https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

 

 

. async와 await이란?

async는 promise의 코드를 깔끔하게 줄여주기 때문에 가독성을 높혀주는 효과가 있다. 사용법은 function 앞에 async만 붙여주면 되고 비동기로 처리되는 부분 앞에 await만 붙여주면 된다. 그리고 한가지 알아둬야 할 점은 await 뒤에 오는 부분은 반드시 promise를 반환해주어야 하고, async가 붙은 function도 promise를 반환해야 한다는 점이다. 

 

출처 : https://devlog-wjdrbs96.tistory.com/163

 

 

 

 

<div>{movies.map(movie => 
      <div key={movie.id}>
        {movie.title}
      </div>

 

{/* map으로 나눠진 각 인덱스에 고유한 key값을 반드시 줘야 함!!!*/}

 

 

 

. React에서 페이지를 전환하는 방법

1 props를 이용한다.

App.js

  return (
    <div>
      {loading ? <h1>Loading... Just wait a minute</h1> 
      : <div>{movies.map(movie => 
        (<Movie key={movie.id}
            coverImage={movie.medium_cover_image}
            title={movie.title}
            summary={movie.summary}
            genres={movie.genres}        
            />
      ))}
      </div>}
      
    </div>
  );
};

 

 

Movie.js

function Movie({coverImage, title, summary, genres}){
    return (
    <div>
        <img src={coverImage} alt={title} />
        <h2>{title}</h2>
        <p>{summary}</p>
        <ul>
            This movies genre is
            {genres.map(genre => <li key={genre}>{genre}</li>)}
        </ul>
    </div>
    )
}

 

 

2. React Router을 통해서 페이지를 전환한다.

 

Home.js // Home route는 기본적으로 우리의 App 컴포넌트 전체를 가지고 있게 될 것이다.

// --------- import ---------
import { useEffect, useState } from "react";
import Movie from "./components/Movie";

function Home() {
// --------- state ---------
const [loading, setLoading] = useState(true);
const [movies, setMovies] = useState([]);
const getMovies = async() => {
  const response = await fetch(
    `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year`
  )
  const json = await response.json();
  setMovies(json.data.movies);
  setLoading(false);  
}
useEffect(() => {
  getMovies()
}, []);

// --------- function ---------


// --------- rendering ---------
return (
  <div>
    {loading ? <h1>Loading... Just wait a minute</h1> 
    : <div>{movies.map(movie => 
      (<Movie key={movie.id}
          coverImage={movie.medium_cover_image}
          title={movie.title}
          summary={movie.summary}
          genres={movie.genres}        
          />
    ))}
    </div>}
    
  </div>
);
}

export default Home;

 

App.js // App.js는 더 이상 영화들을 보여주는 것이 아니라 router를 render한다. 

router은 URL을 보고있는 컴포넌트이고 router은 그 URL에 따라 URL에 맞는 특정 컴포넌트를 보여줄 것이다.

ex) Movie/123 이면 Home 컴포넌트를 Movie/124이면 Detail 컴포넌트를 보여줄 것이다.

function App() {
  return null;
};

export default App;

 

 

https://github.com/yardyard/nomadcoderReactJS/tree/master/reactMovie/practice0

 

 

 

 

 

---

 

 

핵심 요약

1. 비동기 처리란
자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다.

 

2. 왜 비동기 처리가 필요하나면
화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 줄지도 모르는데 마냥 다른 코드를 실행 안 하고 기다릴 순 없기 때문입니다.

 

3. Promise란?
프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다.

 

4. 왜 Promise가 필요하나면
프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용되며, 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 마냥 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜨는 것 같은 문제점을 해결하기 위한 방법중 하나입니다.

 

5. async와 await이란?
async는 promise의 코드를 깔끔하게 줄여주기 때문에 가독성을 높혀주는 효과가 있다. 사용법은 function 앞에 async만 붙여주면 되고 비동기로 처리되는 부분 앞에 await만 붙여주면 된다. 그리고 한가지 알아둬야 할 점은 await 뒤에 오는 부분은 반드시 promise를 반환해주어야 하고, async가 붙은 function도 promise를 반환해야 한다는 점이다. 

 

6. map으로 나눠진 각 인덱스에 고유한 key값을 반드시 줘야 함!!!

 

7. router은 URL을 보고있는 컴포넌트이고 router은 그 URL에 따라 URL에 맞는 특정 컴포넌트를 보여줄 것이다.