Be:Beam 외주 프로젝트 : 트러블 슈팅 1

- 리뷰 데이터를 filteredDatas state에 담아주는 과정에서 무한 렌더링 루프 발생.

 

const reviewDatas = [
      {
        reviewId: "2f239a47-2fec-465c-b02f-b499707a6236",
        userEmail: "tjttjr@naver.com",
        profileImg:
          "https://images.unsplash.com/photo-1425082661705-1834bfd09dca?q=80&w=1776&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        name: "이한울",
        nickName: "아람쌈쌈 싸무라",
        rating: 5,
        text: "매우 즐거웠어요! 시간 가는 줄 몰르고 즐겼네요 정말... 요즘 코로나라 마음도 뒤숭숭하고 집 밖으로도 자주 못 나갔는데 오랜만에 이렇게 사진도 찍고 예쁜 풍경들 보니까 기분이 너무 좋았어요!XD",
        image: [
          "https://plus.unsplash.com/premium_photo-1718563299826-30c033c31789?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        ],
        creatingAt: 1724466015502,
        likes: [
          "dpdrpfflzk@naver.com",
          "dpdrpfflzk@gmail.com",
          "dodo@naver.com",
        ],
        meeting: {
          id: "6a1d506d-4899-4311-a90f-ddd54e99e359",
          type: "정기모임",
          title: "사진출사모임 : 나를 기록하는 사진관 (정기모임) (모집마감)",
          thumbnail: "/image/activity_img/picture_0.png",
          averageRating: 5,
          reviewNum: 1,
        },
      },
      ...
    ]
  
  useEffect(() => {
    setFilteredDatas(reviewDatas);
  }, [reviewDatas]);

 

임시 리뷰 데이터를 변수에 집어넣은 후

그 값을 useEffect를 사용하여 setFilteredDatas에 담아주려고 하였다.

(결과적으로 필터링된 데이터를 화면에 보여줄 것이기 때문.)

 

값에 변화가 있을 때마다 다시 값을 state에 담아주라는 의미에서 의존성 배열에 reviewDatas를 넣어주었다.

그런데 이 과정에서 무한 렌더링 루프가 발생하였다.

이로 인하여 filteredDatas가 끝도 없이 생성되는 문제가 발생.

결과적으로 애플리케이션의 성능 저하가 발생하게 되었다.

 

const reviewDatas = useMemo(
    () => [
      {
        reviewId: "2f239a47-2fec-465c-b02f-b499707a6236",
        userEmail: "tjttjr@naver.com",
        profileImg:
          "https://images.unsplash.com/photo-1425082661705-1834bfd09dca?q=80&w=1776&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        name: "이한울",
        nickName: "아람쌈쌈 싸무라",
        rating: 5,
        text: "매우 즐거웠어요! 시간 가는 줄 몰르고 즐겼네요 정말... 요즘 코로나라 마음도 뒤숭숭하고 집 밖으로도 자주 못 나갔는데 오랜만에 이렇게 사진도 찍고 예쁜 풍경들 보니까 기분이 너무 좋았어요!XD",
        image: [
          "https://plus.unsplash.com/premium_photo-1718563299826-30c033c31789?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        ],
        creatingAt: 1724466015502,
        likes: [
          "dpdrpfflzk@naver.com",
          "dpdrpfflzk@gmail.com",
          "dodo@naver.com",
        ],
        meeting: {
          id: "6a1d506d-4899-4311-a90f-ddd54e99e359",
          type: "정기모임",
          title: "사진출사모임 : 나를 기록하는 사진관 (정기모임) (모집마감)",
          thumbnail: "/image/activity_img/picture_0.png",
          averageRating: 5,
          reviewNum: 1,
        },
      },
      ...
    ],
    []
  );
  
  useEffect(() => {
    setFilteredDatas(reviewDatas);
  }, [reviewDatas]);

 

난 의존성 배열에 알맞게 reviewDatas를 넣어줬는데 왜 무한 루프에 걸리는 것일까.

분명 코드 상으로는 문제가 없었기 때문에

의존성 배열에 넣어둔 reviewDatas에 무언가 문제가 있지 않을까 하고 살펴보게 되었다.

 

현재 여기서 reviewDatas는 변수로 작성되어 있다.

React state로 관리되는 것이 아니기 때문에 렌더링시 매번 새로운 값이 만들어지게 되는 것이다.

(react state는 렌더링 한 번에 들어가는 데이터들이 immutabl.)

기본적으로 react의 경우 setState가 발생하게 되면 상태 변화가 일어나면서 다시 렌더링이 일어난다.

결과적으로 setState를 호출하고 그 안에 일반 변수를 담아주게 되면 일반 변수는 무한으로 생성이 되는 것이다.

일반 변수가 계속해서 무한으로 생성되니까 useEffect 역시 무한 렌더링 루프가 발생하는 것이었다.

 

그렇다면 이걸 어떻게 수정해야겠는가?

state 값에 담아준다? 아니다.

나는 현재 reviewDatas 값을 변경해줄 일이 없으므로 state를 사용할 필요가 없다.

이러한 생각의 과정을 통하여 useMemo()를 사용해야 한다는 결론에 도달했다.

 

useMemo()는 성능 최적화를 위하여 사용되는 훅이다.

컴퓨터 프로그램이 동일한 계산을 반복해야 할 때,

이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여

프로그램 실행 속도를 빠르게 하는 기술이다.

 

이 useMemo()를 사용하여 변수가 렌더링할 때마다 값을 새로 받아오는 것을 막고,

값이 유지되도록 하면 useEffect의 무한 렌더링 루프 문제도 해결된다.