[LAB-2] Firestore에 저장된 정보를 초기화면에서 불러오지 못하는 문제

질문 작성자

김수민

문제 상황

경로 - src/components/MapInfo/kindergartenList.js

먼저, 즐겨찾기 아이콘을 누르면 아이콘이 채워짐과 동시에 Firestore에 저장되도록 하였습니다.

하지만 초기화면이나 리렌더링 시 즐겨찾기를 눌렀던 데이터를(Firestore에 저장된 데이터) 불러와 즐겨찾기 아이콘 색이 채워진 상태로 유지되도록 만들고 싶었으나, 이 문제가 해결이 되지 않아 질문 드립니다.

-> 리렌더링 시 아이콘이 채워져있지 않음

프로젝트 저장소 URL

https://github.com/kindergarten-udon/udon-house

develop 브랜치에서 작업하였습니다. [LAB-2]FEAQ.zip

테스트 계정과 .env 파일은 디엠으로 보내드렸습니다.

환경 정보

운영체제 정보 : Windows
Node.js 정보 : v18.12.1
라이브러리 정보 : React v18.0.2

문제 해결

아래 영상은 문제가 해결된 화면 UI를 보여 줍니다. 😊 즐겨찾기 버튼을 클릭하면 정상적으로 화면에 토글 상태를 표시할 뿐 아니라, 페이지 전환 시에도 활성 상태의 즐겨찾기를 정상적으로 표시합니다.

가이드 파일

가이드 파일을 다운로드 받아 참고해보세요. 혹시나 코드 풀이가 필요하면 해설을 요청주세요. 😌

src.zip

수정한 부분은 아래 작성된 코드입니다.

const starIndexRef = useRef(-1);
const pressedStarButtonRef = useRef(false);

const handleStar = (index) => (e) => {
  starIndexRef.current = index;
  const updateStarClickedArr = starClickedArr.map((clicked, i) => (index === i ? !clicked : clicked));
  setStarClickedArr(updateStarClickedArr);
  pressedStarButtonRef.current = true;
};

useLayoutEffect(() => {
  let index = starIndexRef.current;

  if (index > -1 && pressedStarButtonRef.current) {
    const { CRNAME, CRTELNO, CRADDR } = pagedContents[index];
    const contentRef = collection(dbService, "favorite");

    // 사용자가 클릭한 즐겨찾기 정보 찾기
    const findedFavoriteData = favoriteData.find(({ title }) => title === CRNAME);

    let favoriteDataId;

    // 즐겨찾기 정보가 존재할 경우
    if (findedFavoriteData) {
      favoriteDataId = findedFavoriteData.id;
    }

    let isClickedOn = starClickedArr[starIndexRef.current];

    if (isClickedOn) {
      addDoc(contentRef, {
        active: true,
        title: CRNAME,
        tel: CRTELNO,
        address: CRADDR,
        creatorId: testUid,
      });
      console.log("추가 됨");
    } else {
      if (favoriteDataId) {
        const removeDoc = doc(collection(dbService, "favorite"), favoriteDataId);
        deleteDoc(removeDoc);
        console.log("삭제 됨");
      }
    }
    pressedStarButtonRef.current = false;
  }
}, [starClickedArr]);

useEffect(() => {
  const activeIndexs = new Set();
  favoriteData.forEach(({ title }, index) => {
    activeIndexs.add(pagedContents.findIndex(({ CRNAME }) => CRNAME === title));
  });

  const displayStarClickedArr = [...starClickedArr];

  for (const i of activeIndexs) {
    displayStarClickedArr[i] = true;
  }

  setStarClickedArr(displayStarClickedArr);
}, [favoriteData]);

작성된 JSX 구문은 버튼 요소에 클릭 이벤트를 연결해 제어하도록 수정되었습니다. 😳

<button type="button" className="mr-2 p-2 md:p-1 hover:text-yellow-400" onClick={handleStar(index)}>
  {starClickedArr[index] === true ? <AiFillStar className="iconStyle text-yellow-400" /> : <AiOutlineStar className="iconStyle" />}
</button>

yamoo9 / likelion-FEQA

[LAB-2] Firestore에 저장된 정보를 초기화면에서 불러오지 못하는 문제 #211