영화 앱 만들기 워밍업

처음에는 영화 데이터가 없지만, 영화 앱 데이터를 로딩하면 그때는 영화 앱 데이터가 나올 텐데 이런 상태를 구분해주는 isLoading state라는 변수가 있습니다.

 

영화 데이터 로딩 상태 표시해 주기

isLoading state는 컴포넌트가 마운트되면 true여야 하니까 다음과 같이 코드를 작성해야 합니다.

import React from "react";

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

  render() {
    return <div />;
  }
}

export default App;

 

 

isloading state에 따라 '로딩 중이다', '로딩이 다 됐다'와 같은 문장을 화면에 출력합니다.

구조 분해 할당과 삼항 연산자를 활용해서 로딩 상태를 알려주는 문장을 출력합니다.

import React from "react";

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

  render() {
    const { isLoading } = this.state;

    return <div>{isLoading ? "로딩중..." : "우리는 준비 됐어"}</div>;
  }
}

export default App;

 

구조 분해 할당으로 this.state에 있는 isLoading을 우선 얻으면 항상 this.state를 입력하지 않아도 됩니다.

isLoading을 삼항 연산자에 활용했습니다.

 

영화 앱을 실행해보면 영화 데이터를 로딩하고 있음을 알려주고 있습니다.

App 컴포넌트가 그려지면(render()  함수가 실행되면) 호출되는 생명주기 함수는 componentDidMount() 함수입니다.

 

로딩 현상 구현하기

setTimeOut() 함수는 첫 번째 인자로 전달한 함수를 두 번째 인자로 전달한 값(밀리초) 후에 실행해줍니다.

6초 후에 isLoading state를 false로 바꿔봅시다.

import React from "react";

class App extends React.Component {
  state = {
    isLoading: true,
  };
  componentDidMount() {
    setTimeout(() => {
      this.setState({ isLoading: false });
    }, 6000);
  }

  render() {
    const { isLoading } = this.state;

    return <div>{isLoading ? "로딩중..." : "우리는 준비 됐어"}</div>;
  }
}

export default App;

6초 후에 로딩중...이라는 문장이 우리는 준비 됐어라는 문장으로 바뀝니다.

 

영화 데이터를 어디에 저장할까?

로딩된 영화 데이터를 저장할 수 있도록 movie state를 만듭니다. 자료형은 당연히 배열이고, 여기에 객체 원소가 들어옵니다.

import React from "react";

class App extends React.Component {
  state = {
    isLoading: true,
    movies: [],
  };
  componentDidMount() {
    // 영화 데이터 로딩!
    setTimeout(() => {
      this.setState({ isLoading: false });
    }, 6000);
  }

  render() {
    const { isLoading } = this.state;

    return <div>{isLoading ? "로딩중..." : "우리는 준비 됐어"}</div>;
  }
}

export default App;