리액트:: 클론 코딩 영화 평점 웹서비스(1): state, render() 함수, async와 await etc.

도서관에서 노마드 코더의 클론코딩을 대여하여 영화 평점 웹서비스 만들기를 시작했다.

초반에는 리액트 개념에 대해 꼼꼼하게 설명해주기 때문에 시간이 좀 걸렸다.

그래도 API로 영화 데이터를 가져와서 페이지에 보여주는데까지 구현했다.

그리고 다시 코드를 보며 새로 알게 된 것들을 정리해보자 한다.

 

 

 

 

 

 

 

state

state = { };

- 객체 형태의 데이터로 동적 데이터를 다룰 때 사용한다

- 클래스형 컴포넌트에서 사용할 수 있다

- 리액트는 state를 직접 변경하는 코드를 허용하지 않는다

- state값을 변경하기 위해서 setState() 함수를 이용한다.

 

예시)

class App extends React.Component {
    state = {
        isLoading: true,
        movies: [],
    };
}

 

* 동적 데이터

- 변경될 가능성이 있는 데이터

- 객체를 예로 들면 객체의 구성 요소 중 일부가 있다가 없을 수도 있고, 구성 요소가 하나였다가 둘이 될 수도 있는 것

 

 

 

 

render() 함수

- 클래스형 컴포넌트가 JSX를 반환하기 위해 사용

- 리액트는 클래스형 컴포넌트의 render() 함수를 자동으로 실행시켜준다.

 

예시)

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

 

 

 

 

async와 await

 API에서 데이터를 받아오는 axios.get()을 실행하려면 시간이 필요하고, 그 사실을 자바스크립트에게 알려야만 데이터를 잡을 수 있으므로 async, await를 사용한다.

 

예시)

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

 

 

 

 

깃허브 코드:

https://github.com/seoh2k/movie_app_2022/commit/12029d693a731bcc07ffc68f48a9f2ffaa30753e

영화 리스트 API를 이용하여 영화 목록 구현 중 · seoh2k/movie_app_2022@12029d6

 

 

 

 

영화 평점 웹서비스: 

https://seoh2k.github.io/movie_app_2022/

React App

 

 

 

출처:

노마드 코더 니꼴라스와 만드는 진짜 리액트 앱 클론코딩 영화 평점 웹서비스 - 노마드 코더 니꼴라스, 김형태 지음