TIL - 20230306

 

 

 

  const [bookmarkListAll, setBookmarkListAll] = useState([]);
  
// 전체 북마크 내역 불러오기
  const getBookmarkList = async () => {
    const q = query(collection(db, "bookmarks"));
    const querySnapshot = await getDocs(q);
    let dataArray = [];
    querySnapshot.forEach((doc) => {
      dataArray.push(doc.data());
    });
    setBookmarkListAll(dataArray);
  };

  // 예 적금 필터
  const filterSaving = bookmarkListAll?.filter(
    (saving) => saving?.productTypes === 2
  );
  // console.log(filterSaving);
  const filterDeposit = bookmarkListAll?.filter(
    (deposit) => deposit?.productTypes === 1
  );
  // console.log(filterDeposit);

  // 예 적금 누적
  const bestSaving = filterSaving
    ?.map((saving) => [saving?.fin_prdt_nm, saving?.kor_co_nm])
    ?.reduce((acc, cur) => {
      acc[cur] = (acc[cur] || 0) + 1;
      return acc;
    }, {});
  // console.log("bestDeposit", bestDeposit);
  const bestDeposit = filterDeposit
    ?.map((deposit) => [deposit?.fin_prdt_nm, deposit?.kor_co_nm])
    ?.reduce((acc, cur) => {
      acc[cur] = (acc[cur] || 0) + 1;
      return acc;
    }, {});
  // console.log("bestSaving", bestSaving);

  // 예 적금 북마크 순
  const changeSaving = Object.entries(bestSaving);
  // console.log(changeSaving);
  const sortChangeSaving = changeSaving?.sort((a, b) => b[1] - a[1]);
  // console.log(sortChangeSaving);
  const changeDeposit = Object.entries(bestDeposit);
  // console.log(changeDeposit);
  const sortChangeDeposit = changeDeposit?.sort((a, b) => b[1] - a[1]);
  // console.log(sortChangeDeposit);

  useEffect(() => {
    getBookmarkList();
  }, []);
  
  ...
  
   return (
                <BtProductName>
                  {sortChangeSaving[0][0]?.split(",")[0]}
                </BtProductName>
                
  ...

...

{sortChangeSaving[0][0]?.split(",")[0]}

->

{sortChangeSaving?.[0]?.[0]?.split(",")?.[0]}

 

&& 연산자도 옵셔널체이닝도 먹히지 않아 어떻게 해야할까 고민하던 중 튜터님께 방문.

...

옵셔널체이닝을 이렇게 더 걸 수 있는지 몰랐다.

코드가 지저분해져 지양해야겠지만 지금은 시간이 없음.

 

더 나은 해결책으로는 sortChangeSaving 에 필요한 함수들을 전부 state 화 시켜 useEffect 훅을 하나 더 만들어 의존성 배열 안에 넣어주는 등의 방법이 있다고 함.