React useMemo를 활용한 리뷰 날짜 최적화

문제 상황

숙박 예약 모달에서 리뷰 섹션을 구현하던 중,
리뷰내용은 더미데이터로 넣고, 날짜는 랜덤으로 날짜를 생성하여 넣고 있었음.

const getReviewDate = (index) => {
    const options = {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
    };
    // 현재 날짜를 가져옵니다.
    const today = new Date();
    const randomDays = Math.floor(Math.random() * today.getDate()); // 0부터 오늘 날짜까지의 랜덤한 일수

    // 랜덤한 이전 날짜를 계산합니다.
    const randomDate = new Date(today);
    randomDate.setDate(today.getDate() - randomDays);

    // const date = new Date(accommodation.create_date);
    // date.setDate(date.getDate() + index); // 임의로 리뷰마다 날짜를 다르게 설정
    const formattedDate = randomDate
      .toLocaleDateString("ko-KR", options)
      .replace(/\./g, "-");
    const finalDate = formattedDate.endsWith("-")
      ? formattedDate.slice(0, -1)
      : formattedDate;
    return finalDate; // 'yyyy-mm-dd' 형식으로 변환
  };

그런데 Modal 컴포넌트에서, 체크인/체크아웃 달력 클릭 이나, 인원수 선택 등 다른 상태가 변경될 때마다 컴포넌트가 리렌더링 되면서 리뷰 날짜가 무작위로 재생성되는 문제가 발생해서 상태를 저장하는 방법은 없을까 검색하다 useMemo라는 hook을 발견했음.

useMemo란?

useMemo는 React의 메모이제이션 훅으로, 계산 비용이 큰 값을 캐싱하여 불필요한 재계산을 방지합니다.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

첫 번째 인자: 계산할 값을 반환하는 함수
두 번째 인자: 의존성 배열 (이 값들이 변경될 때만 재계산)
memoizedValue에 값이 저장되어있어서, 이 값은 컴포넌트가 리렌더링 되어도 값이 변경되지 않음.

문제 해결

const reviewDates = useMemo(() => {
  return accommodation.review.map((_, index) => {
    const today = new Date();
    const randomDays = Math.floor(Math.random() * 30);
    const reviewDate = new Date(today);
    reviewDate.setDate(today.getDate() - randomDays);
    
    return reviewDate.toLocaleDateString('ko-KR', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit'
    });
  });
}, [accommodation.review.length]);

// 메모이제이션된 날짜 사용
const getReviewDate = (index) => {
  return reviewDates[index];
};