[TIL] d+21

📈 프로그래스바 달아보기

완료 속성 추가하기

다음과 같이 그냥 배열이었던 리스트의 형태를 좀 더 세분화하기 위해 요소 하나하나 딕셔너리 형태로 만들어 완료 속성을 추가한다.

❗ 스토어의 데이터 형태를 수정하게 되면, 해당 데이터를 가져다 쓰던 코드도 수정해주어야 한다!

기존엔 목록을 가져오기 위해 단순히 배열의 텍스트로 된 요소를 가져왔는데, 이젠 세분화된 항목을 가져와야 한다.
{list.text}로 수정해주면 다시 정상적으로 불러와진다.

액션 만들기

이 과정에 익숙해지자...!

완료된 항목 색상 변경하기

필요한 값을 스타일 컴포넌트에 props로 내려주면 해당 값을 이용해 조건에 따라 스타일을 변경할 수 있다.

프로그래스 바 만들기

따로 배열을 만들어 완료 수를 카운트한다.

❗ 목록이 추가되지 않는다!

input을 제대로 입력해도 텅 빈 박스만 출력된다.
=> 완료 체크를 위해 store에 있던 기존 데이터에 complete 값을 추가해주느라 형태가 바뀌었기 때문이다. 위에도 작성했듯 해당 데이터를 끌어다 사용하는 코드들을 형태에 맞게 수정해주어야 한다.
리듀서를 이렇게 수정해주었다!

강의에선 App.js의 addBucketList를 수정!

다시 제대로 추가가 된다!🍀

🔥 FireStore 연동하기

패키지 설치 : yarn add firebase

🌐 Docs

docs 참고해서 연동 후 db가 제대로 들어오는지 확인!

FireStore에서 데이터 가져오기

😵 promise...? async...? await...?

...😵😵😵😵😵

제대로 가져와진다!
❗ doc.data()의 괄호 주의 ㅎㅎ...

FireStore 데이터 다뤄보기

• 추가
  

• 수정
  

• 삭제
  
  데이터 하나가 삭제되었음 !