ReactJS - Loading States | NomadCoders | 프로그래밍 공부

* 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 

모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.*

우리가 필요한 데이터가 항상 존재하지는 않을 것이다.

데이터 없이 컴포넌트가 로딩을 하고,

데이터를 위해 API를 불러서,

API가 데이터를 주면,

컴포넌트 state를 업데이트 할 것이다.

자, 이제 API콜을 타임아웃 기능으로 유사하게 구현해보자.

이를 위해, 영화리스트를 function 내부로 이동한다.

이제 state 내부는 텅 비어있다.

이제 함수는 영화가 나타나기를 5초를 기다릴 것이다.

이 에러를 확인해보면, 

state.movie가 존재하지 않음으로 인해 property 'map'이 정의되지 않았다고 나온다.

여기서 map을 돌리려고 하는데, states.movie가 없으므로 에러가 난 것이다.

따라서 여기서 map 대신, loading states가 필요하다.

간단하게 Loading... 이라고 작성해보자.

새로고침하고 확인해보면, loading이라고 뜬다.

이제 영화가 state에 없을 때마다 로딩을 띄우거나, 영화리스트를 보이도록 하자.

새로운 function _renderMovies를 만든다.

const movies

...

return movies

여기서 우리는 movies라는 variable에 데이터를 저장했다.

데이터가 없을 때 '로딩'을 띄우고, 있으면 영화정보를 보이도록 설정한다.

this.state.movies ? 로 데이터가 있는지 일단 물어본다.

데이터가 있으면, render movies, 없으면 'Loading...'이라고 출력.

여기서 _renderMovies 함수에 _(언더스코어)를 쓴 이유는,

리액트에는 자체 함수기능이 많기 때문에, 

리액트 자체 기능과 나의 기능에 차이를 두기 위해서이다.

=() -> 이 부분은 최신 자바스크립트의 문법이다.

자, 새로고침하고 브라우저를 보면,

5초동안 Loading...이 뜨고,

그 이후에 영화 정보가 출력된다.

이게 loading state를 만드는 방법이다.

우선 찾고 있는 데이터가 있는지 체크를 하고, 자바스크립트에게 물어본다.

'참'이면 영화 정보를 출력하고, '거짓'이면 로딩 중이라는 텍스트를 띄운다.

render movies라는 기능을 실행할 때, 위와 같은 variables들을 출력할 것이다.

해당 variables에는 맵핑을 통해서 제목이랑 포스터가 보이게끔 되어있다.

위와 같은 과정을 거치지 않고 바로 state를 접근하려고 한다면,

에러가 뜰 것이다.

에러가 나는 이유는 state에 movies가 없기 때문이다.