본문 바로가기

공부한 내용/React JS

[React JS] Loading states

Loading states란?


너가 필요한 데이터가 항상 바로 즉시 존재하지 않을 것이다.


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


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


api가 데이터를 주면,


너의 컴포넌트 state를 업데이트한다.


api콜을 타임아웃 기능으로 유사하게 구현해보자


일단 소스를 전반적으로 바꾸었다.


state 부분을 빈공간으로 만들고


기존에 있는 데이터를 did mount에 옮기고


새로운 function을 만들어줬다.



현재 작업한 것이 무엇이냐면

movies라는 variable에 데이터를 저장했다.

그래서 데이터가 없을 떄 '로딩'을 띄우고,있으면 영화정보가 보이도록 하였다


그리고 우리는 데이터가 있는지 물어본다




데이터가 있으면, render movies!




만약 데이터가 없으면 '로딩 중'이라고 출력한다


여기서 왜 언더스코어를 쓰는냐 (언더바)


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


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


나의 기능은 언더바로 시작하도록.


=  () => 이게 무슨뜻인지 아느냐?


이건 최신 자바스크립트라고 한다. 이 부분은 나중에 풀스택강의에서 자세히 설명해준다고 한다.....