react로 loading states 만들기!

웹페이지를 켰을 때, '로딩중...'과 같은 상태를 구현했다. 우선 state란 현재 상태를 의미하는데, state가 다를 때 마다 render가 발생하게 만들어주는 것이다. 예를 들어 끝까지 스크롤했을 때, 20개의 영화가 더 추가되는 기능 등을 만들어 줄 수 있다.

우선 app.js에서 5sec timer를 만들어, movies 라는 array에 5초 후 movie라는 array가 mapping되도록 만들어준다.

 

 

state가 바뀔때는 setState를 사용해 줘야 한다.

 

 

이 후, movie list를 출력해주는 함수를 위와 같이 만들어 주었다. 이 후, app class내에 render 함수 내에 다음과 같이 입력해준다.

 

 

만약, movies에 movie라는 array가 들어왔다면? -> _renderMovies 출력해주고, 아니라면 loading을 출력해준다.

 

 

이렇게, 처음에는 loading이라는 글자가 뜨다가 ...

 

 

5초 후 영화 화면이 출력된다!!

내 손으로 하나씩 구현해보면서 보람을 느끼는 중 ㅎㅎ