[Front end] React #9 웹 서비스 만들기 Loading states

이번 포스팅은 Loading states에 대해 이야기해보자. 필요한 데이터가 항상 바로 존재하지 않을 수 있다. 데이터 없이 컴포넌트가 로딩을 하고, API를 요청하고 응답이 오면 컴포넌트 state를 업데이트한다. API콜을 타임아웃 기능으로 유사하게 구현해보자. state를 비워두고 movies function을 만들자.

state.movies가 존재하지 않아 에러가 나타난다. 이럴 때 Loading states가 필요하다. 영화가 state에 없을 때마다 로딩이 나타나고, 영화 리스트를 보이도록 하는 게 목표이다. 이제 영화 리스트를 불러오는 function을 만들자.

_renderMovies 함수를 정의하고 const movies 변수에 담는다. 그래서 데이터가 없을 때는 로딩을 띄우고 있으면 영화 정보를 보이도록 위와 같이 작업하면 된다. this.state.movies? this._renderMovies() : 'Loading'
_renderMovies 함수에 언더스코어가 있는 이유는 리액트에서 제공하는 함수가 많기 때문에 구분하기 위해서이다.