[ WIL ] 내일배움캠프 8주차

어려웠던 점

---

날짜 클릭 시 오른쪽에 있는 shopping list에 날짜 업데이트 하기

 

주로 코드들이 선택권 4가지가 있다면 선택된 버튼의 내용과 같으면 그것을 레더링 되게 했는데 나는 날짜를 클릭하면 업데이트가 되게 해야 했다. useState와 setState를 나름 이해했다고 생각했는데 완벽히 이해한 게 아니었던 것 같다. useState에 <ShopplingList /> 같은 것을 레더링 해도 되는지부터 잘 몰랐다. 하지만 가능했다.

 

 

해결 방법

---

1. 처음에 useState에서 <ShoppingList date={오늘날짜} />를 설정을 해주었다.

2. 날짜가 클릭되었을 때 ShoppingListTag라는 함수에 '오늘날짜'를 넘겨주었다.

3. ShoppingListTag함수에서 '오늘날짜' 구조를 수정해 준 뒤에 return으로 <ShoppingList date={오늘날짜/>해주었다.

 

 

Facts

---

• Firebase연결 시 버전에 따라 사용 방법이 조금 달라진다.

 

 

Feelings

---

• 리액트 리덕스를 firebase에 연결했을 때 상태 관리하는 방법이 어려웠다.

 

 

Findings

---

아래와 같이 addItem을 구현해 주었다.

  const addItem = async (newShoppingItem) => {
    const docRef = await addDoc(collection(db, dateToString), {
      date: dateToString,
      item: '고기',
      isChecked: false,
      price: 3000,
    });
    setItemList([
      ...itemList,
      {
        date: dateToString,
        item: '고기',
        isChecked: false,
        price: 3000,
      },
    ]);
  };

 

 

Future

---

• 앞으로 지우기, 수정, DB에 있는 목록들 출력을 구현해야 한다.
• 버튼 클릭 시 입력창이 보이게 구현해야 한다.