다시 시작하는 리액트 - 리액트 실무 기초 5-4 Quiz

 

5-4. Quiz - 버킷리스트 생성시 Spinner 띄우기.

 

- Firestore에 데이터 추가하면 스피너를 띄워보기.

 

추가하기 버튼을 누르면 → 로딩 스피너를 띄우고 → 추가가 끝나면 → 페이지를 보여줍시다!

힌트: is_loaded를 false로 바꿔주면 스피너가 뜨겠죠?
is_loaded를 바꿔주는 액션을 만들고, [추가하기]를 누르면 액션을 디스패치 해봅시다.
그리고 addBucketFB()에서 추가가 끝나면 다시 is_loaded를 false로 바꿔줍시다.🙂

 

앞서 만들었던 스피너를 조금 다르게 이용해보겠음.

버킷리스트를 생성하는 버튼을 클릭시 스피너가 떴다가 사라지게끔 해줄 거임.

 

그렇게 하기 위해서 action value와 action creator를 하나 더 만들어줄 거임. => Loaded / isLoaded

 

 

reducer에서 LOADED는

객체 안에서 기존의 state들을 가져와 풀어주고 is_loaded를 action.payload로 바꿔주도록 코드를 작성함.  

 

 

앞서 우리는 is_loaded가 false일 때 Spinner가 보이도록 설정해뒀음.

그걸 이용해서 버킷리스트를 생성하는 버튼을 눌렀을 때 Spinner가 보였다 사라지도록 하려면

버킷리스트를 생성하는 action creator가 실행되고 Firestore에 데이터를 추가해준 후에 isLoaded(false) 코드 추가.

 

 

이렇게 하면 버킷리스트 추가 버튼을 누른 후에 데이터가 Firestore로 넘어가고 화면이 Spinner로 바뀜.

그런데 여기서 마무리를 지으면 is_loaded가 계속 false로 남아 있기 때문에 Spinner가 사라지지 않음.

그래서 우리는 addBucketFB의 마지막에 있는 dispatch(createWidget(bucket))을 이용해볼 거임.

 

action creator를 따로 추가하지 않고,

버킷리스트 생성 버튼을 클릭시 마지막에 실행되는 createWidget action creator에 내용을 추가해줄 거임.

밑으로 내려가 reducer에서 CREATE에 객체 내에서 is_loaded : true로 변경해주는 코드를 추가.

이렇게 하면 버킷리스트 추가 버튼을 클릭시 잠깐 Spinner가 화면에 떴다가 사라지게 됨.