[LAB-5] card객체의 변화에 따른 리랜더링 문제 발생

seoohyeon commented 1 year ago

질문 작성자

김서현

문제 상황

2023-04-09 01;29;39

제목을 검색한 뒤, 카드를 클릭했을때 그 해당 카드의 정보가 랜더링되게 최대한 구현해보려 했고, 구현은 하였으나 랜더링 문제가 생겨 글을 남깁니다.

프로파일러 돌려보았을때 너무 랜더링이 많이 일어나고, (232회 발생) 콘솔창을 보면 계속 찍혀 나오는 것을 확인할 수 있었습니다..

card는 현재 recoil의 atom형태로 상태관리 하고 있습니다. 문제의 원인이 card때문인듯 한데, card는 바뀐것이 없는데 왜 계속 리랜더링 되는 상황이 만들어지는지 모르겠습니다 ㅠ 프로파일러를 확인해보면, ReadMeeting파일에 있는 card가 계속 리랜더링 되는것 같습니다..

프로젝트 저장소 URL

https://github.com/React-Project-lab5/React-Project-lab5
develop브랜치

현재 파일 위치
src파일 : src.zip
로그인은 구글로그인 혹은 아이디 : babjo@naver.com / 비번: aaaa1111 입니다.
.env파일에 작성하시면 되는 코드를 아래에 적어드립니다.

VITE_API_KEY = AIzaSyB-16F5fhuvgb5lKC6618iuSZPvEOwWhLk VITE_AUTH_DOMAIN = calkolab5.firebaseapp.com VITE_PROJECT_ID = calkolab5 VITE_STORAGE_BUCKET = calkolab5.appspot.com VITE_MESSAGE_SENDER_ID = 869641050054 VITE_APP_ID = 1:869641050054:web:0d0b56dac5093949fdc4c7 VITE_MEASUREMENT_ID = G-LCH8VZEKV3 VITE_SERVICE_KEY=M4E1Vdrm%2Ba%2FjVfatJPdEbBibLbYBeDaGm7tgF%2BxisSinPYTEEBDkFgSO0gmqjAZGOzfrSffYbsOF3XshtdL6lg%3D%3D VITE_KAKAO_API_KEY=ebf9334d7db030f4f026a0d53f08a62a

환경 정보

운영체제 : Windows
Node.js : v16.14.0
라이브러리 : React v18.2.0

yamoo9 commented 1 year ago

문제 분석

검색 후, 무한 루프에 빠진 이유는 setCards 업데이트 함수가 반복 실행되기 때문입니다. 상태 업데이트가 끊임없이 바뀌기 때문에 발생한 렌더링 이슈입니다. 😥

아래 영상은 검색 후, 카드 다이얼로그가 표시 되었을 때 무한 루프가 발생하는 현상을 보여 줍니다.

https://user-images.githubusercontent.com/1850554/230750648-515a5375-3647-45fe-8975-1640852a85c1.mp4

문제 해결

문제를 해결하기 위해 cards 상태가 빈 배열인 경우에만 상태 업데이트를 요청하도록 조건 처리합니다. 그러면 cards 상태가 []일 때만 상태 업데이트를 시도할 것입니다.

useEffect(() => {

  if (localStorage.getItem('Unique ID') === '1' && cards.length === 0) {
    // ...

    const getUsers = async () => {
      await getDocs(usersCollectionRef).then((data) => {
        setCards(
          data.docs.map((doc) => ({ ...doc.data(), id: doc.id })) as Card[]
        );
      });
    };
    getUsers();
  }

  async function fetchAndSetCard() {
    if (cards[0]) {
      const mapPosition = cards[0].mapData;
      setMapData(mapPosition);
    }
  }

  fetchAndSetCard();
}, [cards, searchAddress, searchCardDetail, setCards, setMapData]);

결과는 아래 영상과 같습니다. 1회만 요청하고 더 이상 반복해서 요청하는 실수를 보여주지 않습니다. 🙂

https://user-images.githubusercontent.com/1850554/230750816-49e71946-fdca-47bd-a929-7abfe4e7cac3.mp4

seoohyeon commented 1 year ago

이해가 잘 되었습니다,, 감사합니다 🤩

yamoo9 / likelion-FEQA