[4팀 김지혜] Chapter 4-2 코드 관점의 성능 최적화

[adds9810]

과제 체크포인트

https://adds9810.github.io/front_6th_chapter4-2/

과제 요구사항

• 배포 후 url 제출

• API 호출 최적화(Promise.all 이해)

• SearchDialog 불필요한 연산 최적화

• SearchDialog 불필요한 리렌더링 최적화

• 시간표 블록 드래그시 렌더링 최적화

• 시간표 블록 드롭시 렌더링 최적화

과제 셀프회고

기술적 성장

API 호출 최적화 - Promise.all의 올바른 사용법

await 키워드를 제거하여 진정한 병렬 실행을 구현하는 방법을 학습했습니다. 이를 통해 API 호출이 6번에서 2번으로 66% 감소하고, 실행 시간이 101.6ms에서 56.8ms로 약 44.8ms 단축되는 성능 개선을 달성했습니다.

// 최적화 전: 직렬 실행 + 중복 호출 (6번)
const fetchAllLectures = async () => await Promise.all([
  (console.log('API Call 1', performance.now()), await fetchMajors()),
  (console.log('API Call 2', performance.now()), await fetchLiberalArts()),
  // ... 6번 중복 호출
]);

// 최적화 후: 병렬 실행 + 캐시 활용 (2번)
const fetchAllLectures = async (): Promise<Lecture[]> => {
  const [majorsData, liberalData] = await Promise.all([
    getCachedMajors(),      // 캐시된 전공 데이터
    getCachedLiberalArts(), // 캐시된 교양 데이터
  ]);
  return [...majorsData, ...liberalData];
};

SearchDialog 불필요한 연산 최적화 - useMemo 활용

복잡한 필터링 로직이 매번 렌더링 될 때마다 실행되는 문제를 useMemo로 해결했습니다. 이를 통해 의존성 배열 값이 변경될 때만 필터링 로직이 재실행되도록 최적화했습니다.

// 최적화 전: 매 렌더링마다 복잡한 필터링 실행
const getFilteredLectures = () => {
  const { query = '', credits, grades, days, times, majors } = searchOptions;
  return lectures
    .filter(lecture => lecture.title.toLowerCase().includes(query.toLowerCase()) || lecture.id.toLowerCase().includes(query.toLowerCase()))
    .filter(lecture => grades.length === 0 || grades.includes(lecture.grade))
    .filter(lecture => majors.length === 0 || majors.includes(lecture.major))
    .filter(lecture => !credits || lecture.credits.startsWith(String(credits)))
    .filter(lecture => {
      if (days.length === 0) return true;
      const schedules = lecture.schedule ? parseSchedule(lecture.schedule) : [];
      return schedules.some(s => days.includes(s.day));
    })
    .filter(lecture => {
      if (times.length === 0) return true;
      const schedules = lecture.schedule ? parseSchedule(lecture.schedule) : [];
      return schedules.some(s => s.range.some(time => times.includes(time)));
    });
};
const filteredLectures = getFilteredLectures(); // 매 렌더링마다 실행

// 최적화 후: useMemo로 메모이제이션
const filteredLectures = useMemo(() => {
  return lectures
    .filter(lecture => lecture.title.toLowerCase().includes(query.toLowerCase()))
    .filter(lecture => grades.length === 0 || grades.includes(lecture.grade))
    .filter(lecture => majors.length === 0 || majors.includes(lecture.major));
}, [lectures, query, grades, majors]);

SearchDialog 불필요한 리렌더링 최적화 - useCallback과 React.memo

이벤트 핸들러 함수들이 매 렌더링마다 새로 생성되어 자식 컴포넌트들이 계속 리렌더링되는 문제를 해결했습니다. useCallback으로 함수 참조를 안정화하고, 각 필터 섹션을 useMemo로 분리하여 독립적인 리렌더링을 보장했습니다.

// 최적화 전: 매 렌더링마다 새 함수 생성
const changeSearchOption = (field: keyof SearchOption, value: SearchOption[typeof field]) => {
  setPage(1);
  setSearchOptions({ ...searchOptions, [field]: value });
  loaderWrapperRef.current?.scrollTo(0, 0);
};

// 최적화 후: useCallback으로 메모이제이션
const handleQueryChange = useCallback((value: string) => {
  setPage(1);
  setQuery(value);
  loaderWrapperRef.current?.scrollTo(0, 0);
}, []);

// 각 필터 섹션을 useMemo로 메모이제이션
const querySection = useMemo(
  () => (
    <FormControl>
      <FormLabel>검색어</FormLabel>
      <Input
        placeholder="과목명 또는 과목코드"
        value={query}
        onChange={(e) => handleQueryChange(e.target.value)}
      />
    </FormControl>
  ),
  [query, handleQueryChange]
);

시간표 블록 드래그시 렌더링 최적화 - isLazy prop과 메모이제이션

드래그 중에도 Popover 컴포넌트가 계속 리렌더링되는 문제를 해결했습니다. isLazy prop을 사용하여 PopoverContent가 실제로 열릴 때만 렌더링되도록 하고, React.memo의 커스텀 비교 함수를 통해 드래그하는 블록만 리렌더링되도록 최적화했습니다.

// 최적화 전: 드래그 중에도 Popover 렌더링
<Popover>
  <PopoverTrigger><Box /* ... */ /></PopoverTrigger>
  <PopoverContent>
    <PopoverBody>
      <Text>강의를 삭제하시겠습니까?</Text>
      <Button onClick={onDeleteButtonClick}>삭제</Button>
    </PopoverBody>
  </PopoverContent>
</Popover>

// 최적화 후: isLazy prop + 조건부 렌더링
<Popover isLazy>
  <PopoverTrigger><Box /* ... */ /></PopoverTrigger>
  <MemoizedPopoverContent onDeleteButtonClick={onDeleteButtonClick} />
</Popover>

// 드래그 중일 때는 Popover 없이 렌더링
if (isDragging) {
  return <Box /* ... */ />;
}

시간표 블록 드롭시 렌더링 최적화 - Context 분리 패턴

드래그 앤 드롭으로 스케줄을 이동할 때, 변경되지 않은 다른 시간표들도 모두 리렌더링되는 문제를 해결했습니다. 각 테이블마다 독립적인 TableContext를 생성하여 완전히 격리된 상태 관리로 해결했습니다. 이를 통해 드롭한 시간표만 리렌더링되고 다른 시간표는 영향받지 않는 최적화를 달성했습니다.

// 최적화 전: 전역 상태로 인한 모든 테이블 리렌더링
const { schedules } = useScheduleContext();

// 최적화 후: TableContext 분리로 독립적인 상태 관리
export const TableProvider = ({ children, initialSchedules = [] }) => {
  const [schedules, setSchedules] = useState<Schedule[]>(initialSchedules);
  
  const updateSchedules = useCallback((newSchedules: Schedule[]) => {
    setSchedules(newSchedules);
  }, []);

  const contextValue = useMemo(
    () => ({ schedules, updateSchedules }),
    [schedules, updateSchedules]
  );

  return (
    <TableContext.Provider value={contextValue}>
      {children}
    </TableContext.Provider>
  );
};

// 각 테이블을 TableProvider로 감싸기
<TableProvider tableId={tableId} initialSchedules={schedules}>
  <ScheduleDndProvider>
    <ScheduleTable />
  </ScheduleDndProvider>
</TableProvider>

// ScheduleTable에서 독립적인 TableContext 구독
const { schedules } = useTableContext();

학습 효과 분석

• 가장 큰 배움이 있었던 부분: React Profiler를 사용해 렌더링 병목 지점을 직접 확인하고, 최적화 기법을 적용했을 때 실제로 렌더링 횟수와 시간이 줄어드는 것을 보며 최적화의 필요성과 효과를 체감한 경험입니다. 이론으로만 알던 개념을 실제로 적용하고 검증하는 과정에서 가장 크게 성장했습니다.
• 추가 학습이 필요한 영역: 현재 Context API로 충분하지만, 애플리케이션 규모가 더 커질 경우를 대비해 Zustand나 Recoil 같은 상태 관리 라이브러리들이 어떻게 렌더링 최적화 문제를 해결하는지 비교 분석하며 학습하고 싶습니다.
• 실무 적용 가능성: 이번에 학습한 렌더링 최적화 기법과 Context 분리 패턴은 실무에서 복잡하고 인터랙티브한 UI를 개발할 때 발생할 수 있는 성능 문제를 해결하는 데 직접적으로 도움이 될 것이라 확신합니다.

과제 피드백

과제에서 좋았던 부분 : React DevTools를 활용해 성능 최적화를 눈으로 볼 수 있어서 좋았습니다. 드롭 시 해당 시간표만 리렌더링되는 것을 직접 확인하고, API 호출이 6번에서 2번으로 줄어드는 것을 네트워크 탭에서 확인할 수 있어서 최적화의 효과를 체감할 수 있었습니다. 또한 React Profiler로 렌더링 횟수와 시간을 직접 측정해보면서 React.memo, useMemo, useCallback 같은 메모이제이션의 효과를 실시간으로 확인할 수 있어서 이론으로만 알던 개념을 실제로 적용하고 검증하는 과정에서 깊게 이해하게 되었습니다.

리뷰 받고 싶은 내용

• SearchDialog 메모이제이션 검증: SearchDialog.tsx에서 React.memo와 useMemo를 가장 많이 사용했는데, 혹시 과도하게 사용한 부분이 있을까요? 특히 filteredLectures useMemo의 의존성 배열이 과도하게 많은지, useCallback으로 감싼 이벤트 핸들러들이 실제로 리렌더링을 방지하는 효과가 있는지, SearchItem 컴포넌트의 memo 사용이 적절한지 검토해주실 수 있을까요? 현재 코드에서 제거해도 되는 메모이제이션이나, 오히려 추가해야 하는 부분이 있다면 조언해주세요.
• Context 분리 패턴: 각 테이블마다 독립적인 Context를 생성하여 리렌더링을 최적화했습니다. 이 접근 방식이 효과적이었는지, 그리고 혹시 발생할 수 있는 잠재적인 문제점이나 더 나은 설계 방식이 있는지에 대한 피드백을 받고 싶습니다.
• 커스텀 훅 구조화: useTableSchedules, useTableKeys 등 여러 커스텀 훅을 만들어 로직을 분리했습니다. 이런 방식의 추상화가 적절했는지, 혹은 애플리케이션이 더 복잡해질 경우를 대비해 더 나은 구조화 방식이 있을지 조언을 구하고 싶습니다.
• 과제 복습 전략: 10주간의 모든 과제들을 체계적으로 복습하고 싶습니다. 각 과제별로 정리한다고 정리했지만, 혹 효과적인 복습 방법이 있을지 여쭤봅니다. 예를 들면 React 최적화, 상태 관리, 컴포넌트 설계 등 핵심 개념들을 어떻게 연결해서 학습하면 좋을지, 그리고 실무에서 바로 적용할 수 있는 지식으로 만드는 방법에 대해 조언을 구하고 싶습니다.