[week10] 오리 10주차 미션

[kim3360]

useMemo

useMemo는 비용이 큰 계산 결과를 메모이제이션하여 불필요한 재계산을 방지합니다.

const axiosRequestConfig = useMemo(
  () => ({
    params: filters,
  }),
  [filters]
);

• filters가 변경될 때만 새로운 객체를 생성합니다

• filters가 동일하면 이전 객체를 재사용하여 useFetch 훅의 불필요한 재실행을 방지합니다

• 객체 참조가 안정적으로 유지되어 자식 컴포넌트의 불필요한 리렌더링을 방지합니다

• 복잡한 계산이 필요한 경우

• 객체나 배열을 생성하는 경우 (참조 동일성 유지)

• props로 전달되는 값이 자식 컴포넌트의 리렌더링을 유발할 수 있는 경우

useCallback

useCallback은 함수를 메모이제이션하여 함수 참조를 안정적으로 유지합니다.

// 필터 변경 핸들러
const handleChangeMovieFilters = useCallback(
  (filters: MovieFilters) => {
    setFilters(filters);
  },
  [setFilters]
);

// 영화 클릭 핸들러
const handleMovieClick = useCallback((movie: Movie) => {
  setSelectedMovie(movie);
  setIsModalOpen(true);
}, []);

// 모달 닫기 핸들러
const handleCloseModal = useCallback(() => {
  setIsModalOpen(false);
  setSelectedMovie(null);
}, []);

• 함수가 props로 전달될 때 참조가 변경되지 않아 자식 컴포넌트의 불필요한 리렌더링을 방지합니다

• MovieFilter, MovieList, MovieModal 컴포넌트에 안정적인 함수 참조를 제공합니다

• 의존성 배열에 포함된 값이 변경될 때만 새로운 함수를 생성합니다

• 자식 컴포넌트에 함수를 props로 전달하는 경우

• React.memo로 감싼 컴포넌트에 함수를 전달하는 경우

• 다른 훅의 의존성 배열에 함수를 포함하는 경우

성능 최적화 효과

이 프로젝트에서 useCallback과 useMemo를 사용함으로써:

1. 불필요한 리렌더링 방지: 자식 컴포넌트들이 props 변경이 없을 때 리렌더링되지 않습니다
2. API 호출 최적화: axiosRequestConfig가 안정적으로 유지되어 불필요한 API 호출을 방지합니다
3. 메모리 효율성: 동일한 함수와 객체를 재사용하여 메모리 사용을 최적화합니다