[React] 영화 앱 만들기 (0)

1) 로딩현상 구현하기

import React from 'react';

class App extends React.Component {
  state = {
    isLoading: true,
  };
  render() {
  	const { isLoading } = this.state;
    return <div>{isLoading ? 'Loading...' : 'We are ready'}</div>
  }
}
export default App;

• isLoading state에 따라 '로딩중이다'를 나타내기
• 구조분해할당과 삼항연산자를 이용하여 Loading page를 구현하고자 한다
• 구조분해할당으로 render()밑에 const {isLoading} = this.state;를 선언하면 항상 this.state를 입력하지 않아도 된다

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 ? 'Loading...' : 'We are ready'}</div>
  }
}

export default App;

• reander()함수가 실행되면 호출되는 생명주기 함수는 componentDidMount() 이므로 사용
• setTimeout() 함수는 첫번째 인자로 전달한 함수를 두번째 인자로 전달한 값(초) 후에 실행해 준다

그렇다면 이제 영화 데이터 로딩이 완료 된다면 'we are ready'라 쓰여진 부분에 영화 데이터들이 들어가면 될 것이다.