Planning the Movie Component

자 이제 우리는 component life cycle을 알게 됐다. 이제 movie component를 구성해 보자. 

import React from 'react';
// import PropTypes from 'prop-types';

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

export default App;

자 우선 application이 mount(알다시피 mount는 생겨나는 것, 태어나는 것, 살아 있는 것이다.) 되자마자 isLoading은 기본적으로 true이다. 또한 자바스크립트의 ternary operator(삼항 연산자)를 보면, this.state.isLoading이 true라면, "Loading..."을 보여주고, true가 아니라면 "we are ready"를 보여주도록 되어 있다. this.state.isLoading의 this.state부분은 비구조화 할당을 이용했다. 

 

다음 포스트에서 이어질 무비 API data를 fetch하기 위해서 위 코드 중간부분에는 componentDidMount 함수를 빈 상태로 넣어놨다. componentDidMount는 component가 mount되자 마자, 호출되는 함수란걸 기억하자. 

하지만 이렇게 짧게 포스팅을 끝내기엔 아쉬움이 남으니, componentDidMount 함수 안에 다음 코드를 넣어보자.

setTimeout(() => {
	this.setState({ isLoading: false });
}, 6000);
    	

 setTimeout함수는 딜레이 기능을 해주는 함수이다. setTimeout안의 setState는 6초 후에 일어날 것이다. 좋다 

새로고침하고 기다려보자, 정확히 6초후에 Loading... 이 We are ready로 바뀌게 된다. 위와 같은 느낌으로, 우리가 앞으로 할 일은 이론적으로 componentDIdMount에서 data를 fetch하는 것이다. 그리고 API로부터 data fetchong이 완료되면 "We are ready" 대신에 movie를 render하는 것(map을 만들어서 movie를 render할 것이다)이다.