13 - 영화 앱 만들기 워밍업

- 준비

 

App 컴포넌트를 다 비워준다.

import React from 'react';

class App extends React.Component {
  render() {
    return </div>;
  }
}

export default App;

 

 

- 영화 데이터 로딩 상태 표시

 

isLoading state 를 추가하자.

isLoading state는 컴포넌트가 마운트되면 true 여야 한다.

import React from 'react';

class App extends React.Component {

  state = {
    isLoading: true,
  };
  
  render() {
    return </div>;
  }
}

export default App;

 

 

- 로딩 중, 로딩 완료 화면에 출력해주기

 

구조 분해 할당과 삼항 연산자를 사용한다.

  render() {
    const { isLoading } = this.state;
    return <div>{isLoading ? 'Loading...' : 'We are ready'}</div>;
  }
}


- 삼항 연산자

{조건 ? true일때 : false일때}

예제)
{로딩중인가 ? '로딩중이다' : '준비됐다'}

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

지금 코드에 state = {isLoading: treu} 이므로 삼항연산자의 true 쪽이 실행된것.

 

 

- 로딩 현상 구현하기

 

App 컴포넌트 (render() 함수가 실행되면) 호출되는 생명주기 함수는

componentDidMount() 함수다.

이 함수에 setTimeout() 함수를 적용해서 영화 데이터가 로딩되는 현상을 구현해보자.

 

setTimeout() 함수는 첫번째 인자로 전달한 함수를

두번째 인자로 전달한 값(밀리초) 후에 실행해준다.

6초 후에 isLoading state를 false로 바꿔보자.

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

  componentDidMount() {
    setTimeout(() => {
      this.setState({ isLoading: false});
    }, 6000);
  }
  
  render() {
    const { isLoading } = this.state;
    return <div>{isLoading ? 'Loading...' : 'We are ready'}</div>;
  }
}

앱을 실행해보자.

Loading... 에서 We are ready 로 바뀐다.

이것을 보면 componentDidMount() 함수에 영화 앱을 로딩하면 된다.

 

 

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

 

fetch() 함수를 알면 되지만 여기선 하지않는다.

Axios라는 도구를 사용할 것인데 뒤에서 설명함.

 

 

  componentDidMount() {
    // 영화 데이터 로딩
    setTimeout(() => {
      this.setState({ isLoading: false});
    }, 6000);
  }

코드블럭과 같은 위치에 주석을 넣는다.

영화 데이터 로딩이 완료되면 삼항 연산자의 false 부분에서 출력함.

로딩된 영화 데이터는 state에 저장한다.

 

 

- 로딩된 영화 데이터 저장하기 위한 movies state 를 만든다.

 

자료형은 배열로 만듬.

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

해당 위치에 movies: [], 를 작성한다.

 

---

다음 파트에서 영화 앱 만들기 시작.