과제 체크포인트

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

과제 요구사항

• 배포 후 url 제출

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

• SearchDialog 불필요한 연산 최적화

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

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

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

과제 셀프회고

1. fetchAllLectures 함수 개선

🚨 개선 전

🌟 개선 후

좋은 컴퓨터는 더 빨라져요

기존 코드

const fetchAllLectures = async () =>
	await Promise.all([
		(console.log('API Call 1', performance.now()), await fetchMajors()),
		(console.log('API Call 2', performance.now()), await fetchLiberalArts()),
		(console.log('API Call 3', performance.now()), await fetchMajors()),
		(console.log('API Call 4', performance.now()), await fetchLiberalArts()),
		(console.log('API Call 5', performance.now()), await fetchMajors()),
		(console.log('API Call 6', performance.now()), await fetchLiberalArts())
	])

🚨 문제점

• await을 사용해서 병렬이 아닌 fetchMajors → fetchLiberalArts 함수가 순차적으로 실행되어 Promise.all의 목적인 병렬 실행이 무의미해집니다.
• fetchMajors() 함수와 fetchLiberalArts() 함수가 중복으로 실행됩니다. (대체 왜?)
• 캐싱을 하지 않아 컴포넌트가 재마운트될 때마다 API를 호출해서 이미 로드한 데이터를 재사용하지 못합니다.

개선된 코드

const fetchAllLectures = (() => {
	let cache: Promise<Lecture[]> | null = null

	return async () => {
		if (cache) {
			return cache
		}
		cache = Promise.all([fetchMajors(), fetchLiberalArts()]).then((results) => {
			console.log('API 호출 완료', performance.now())
			return results.flatMap((result) => result.data)
		})

		return cache
	}
})()

🌟 개선점

• API 호출에 걸린 시간을 131ms → 46ms으로 약 85ms 단축했습니다.
• 클로저를 이용한 캐시 변수로 이미 호출된 데이터가 있으면 재사용(리턴)하고, 없으면 새로 호출합니다.
• fetchMajors, fetchLiberalArts 함수가 처음 한 번만 2번 호출합니다.
• Promise.all에서 await을 제거하여 병렬 처리로 변경했습니다.

2. SearchDialog 컴포넌트 개선

🚨 문제점

• getFilteredLectures 함수가 컴포넌트가 마운트될 때마다 불필요하게 재계산되었습니다.
• filteredLectures, allMajors 역시 마운트 시마다 매번 새로 할당되어 성능 낭비가 있었습니다.
• 인피니티 스크롤로 강의 데이터를 불러올 때, 실제로는 리렌더링이 필요 없는 Popover 컴포넌트까지 함께 리렌더링되는 문제가 있었습니다.

🌟 개선점

• 함수 및 값 메모이제이션
  • useMemo, useCallback을 적용하여 getFilteredLectures, filteredLectures, allMajors가 불필요하게 재생성되지 않도록 최적화했습니다.
• 비즈니스 로직 분리
  • useSearchDialog 커스텀 훅을 만들어, 컴포넌트 내부에 길게 선언되던 로직과 함수들을 분리했습니다.
  • 이로써 SearchDialog는 UI 중심으로만 유지되고, 상태/로직 관리가 명확해졌습니다.
• 테이블 구조 최적화
  • Table 관련 코드를 별도 컴포넌트로 분리했습니다.
  • 특히 Tr(행) 단위를 React.memo로 감싸, 개별 행이 변경되지 않는 이상 리렌더링이 발생하지 않도록 했습니다.
• Popover 렌더링 최소화
  • 인피니티 스크롤 시에도 Popover 컴포넌트가 리렌더링되지 않도록 의존성을 정리하고, 불필요한 상태 전파를 차단했습니다.

3. ScheduleTable 개선

🚨 문제점

• 강의(버튼)를 dragging할 때 테이블의 각 셀(GridItem 포함)이 모두 리렌더링되었습니다.
  • 이 과정에서 불필요하게 함수들이 재생성되고, 셀 단위 컴포넌트들이 매번 다시 계산되는 문제가 있었습니다.
• DraggableSchedule을 드래그하는 동안, 강의 삭제 여부를 묻는 PopoverContent까지 리렌더링이 발생했습니다.

🌟 개선점

• 함수 메모이제이션
  • useCallback을 사용해 이벤트 핸들러 함수들의 불필요한 재생성을 방지했습니다.
• 컴포넌트 분리
  • ScheduleTable 내부에 있던 작은 단위 컴포넌트들을 별도로 분리했습니다.
    • 예: TableCell, TimeCell, DayHeaderCell, TableOutline
  • 이로써 각 셀이 독립적으로 리렌더링 범위를 가지도록 최적화했습니다.
• 드래그 시 Popover 최적화

  • 드래그 중에는 PopoverContent가 다시 렌더링되지 않도록

    const shouldRenderPopover = !isDragging 조건을 추가했습니다.

  • DraggableSchedule을 memo로 감싸 불필요한 렌더링을 더 줄였습니다.

  
  // 개선 전
  const getColor = (lectureId: string): string => {
    const lectures = [...new Set(schedules.map(({ lecture }) => lecture.id))];
    const colors = ["#fdd", "#ffd", "#dff", "#ddf", "#fdf", "#dfd"];
    return colors[lectures.indexOf(lectureId) % colors.length];
  };
  
  // 개선 후 
	const getColor = useCallback(
		(lectureId: string): string => {
			const lectures = [...new Set(schedules.map(({lecture}) => lecture.id))]
			const colors = ['#fdd', '#ffd', '#dff', '#ddf', '#fdf', '#dfd']
			return colors[lectures.indexOf(lectureId) % colors.length]
		},
		[schedules]
	)

// 개선 전
  <GridItem
    key={`${day}-${timeIndex + 2}`}
    borderWidth="1px 0 0 1px"
    borderColor="gray.300"
    bg={timeIndex > 17 ? 'gray.100' : 'white'}
    cursor="pointer"
    _hover={{ bg: 'yellow.100' }}
    onClick={() => onScheduleTimeClick?.({ day, time: timeIndex + 1 })} // 이벤트 콜백 함수
  />
  
// 개선 후
const memoizedOnScheduleTimeClick = useCallback(
	(timeInfo: {day: string; time: number}) => {
		onScheduleTimeClick?.(timeInfo)
	},
	[onScheduleTimeClick]
)

// 개선 전
	<PopoverContent onClick={(event) => event.stopPropagation()}>
		<PopoverArrow />
		<PopoverCloseButton />
		<PopoverBody>
			<Text>강의를 삭제하시겠습니까?</Text>
			<Button colorScheme='red' size='xs' onClick={onDeleteButtonClick}>
				삭제
			</Button>
		</PopoverBody>
	</PopoverContent>
	
	
// 개선 후 
const shouldRenderPopover = !isDragging

...

{shouldRenderPopover && (
	<PopoverContent onClick={(event) => event.stopPropagation()}>
		<PopoverArrow />
		<PopoverCloseButton />
		<PopoverBody>
			<Text>강의를 삭제하시겠습니까?</Text>
			<Button colorScheme='red' size='xs' onClick={onDeleteButtonClick}>
				삭제
			</Button>
		</PopoverBody>
	</PopoverContent>
)}

4. ScheduleTables 개선

🚨 문제점

• 강의를 드래그 & 드롭하면 관련 없는 다른 Table도 불필요하게 리렌더링되는 문제가 있었습니다.
• 기존에는 Context로 schedulesMap, setSchedulesMap을 공유하고 있어서, 한 테이블의 변경이 모든 하위 컴포넌트에 전파되었습니다.

🤨 시도했던 방법들

• Context를 Getter/Setter로 분리해보려 했으나, 여전히 Context 자체는 전역으로 공유되기 때문에 리렌더링 범위를 줄이기 어려웠습니다.
• 하지만 Context는 Context일 뿐.. 하위 컴포넌트들이 다 영향을 받아서 이 방법은 오랜 고민 끝에 포기했습니다.

🌟 개선점

• Zustand 전역 상태 관리를 도입했습니다.
• store/scheduleStore.ts를 생성하여 schedulesMap과 setSchedulesMap뿐 아니라 update, add, remove, duplicate 등 CRUD 액션을 정의했습니다.
• 각 컴포넌트에서는 Context 대신 커스텀 훅(useSchedulesByTableId)을 사용하여 특정 tableId에 해당하는 데이터만 구독하도록 변경했습니다.
• handleDragEnd에서 setSchedulesMap 대신 updateSchedule을 호출하도록 수정하여, 드래그 & 드롭 시 해당 테이블만 업데이트되고 다른 테이블은 리렌더링 되지 않도록 개선했습니다.

// store/scheduleStore.ts

export const useScheduleStore = create<ScheduleStore>((set) => ({
  // 스케줄 데이터
  schedulesMap: dummyScheduleMap,

  // 스케줄 데이터 setter
  setSchedulesMap: (schedulesMap) => set({ schedulesMap }),

  // 스케줄 데이터 update
  updateSchedule: (tableId, index, updatedSchedule) => {
    set((state) => ({
      schedulesMap: {
        ...state.schedulesMap,
        [tableId]: state.schedulesMap[tableId].map((schedule, i) =>
          i === index ? updatedSchedule : schedule
        ),
      },
    }));
  },
  
  ...
  
export const useSchedulesByTableId = (tableId: string) => {
  return useScheduleStore(
    useShallow((state) => state.schedulesMap[tableId] || [])
  );
};

// ScheduleEndProvider.tsx

export default function ScheduleDndProvider({
  children,
  tableId,
}: PropsWithChildren & { tableId: string }) {
	// Context에서 가지고 오는 대신 전역 상태 관리에서 선언한 훅으로 대신하여 가지고 옴
  const schedules = useSchedulesByTableId(tableId); 
  const updateSchedule = useScheduleStore((state) => state.updateSchedule);
  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        distance: 8,
      },
    })
  );

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const handleDragEnd = (event: any) => {
    const { active, delta } = event;
    const { x, y } = delta;
    const [tableId, index] = active.id.split(":");
    const schedule = schedules[index];
    const nowDayIndex = DAY_LABELS.indexOf(
      schedule.day as (typeof DAY_LABELS)[number]
    );
    const moveDayIndex = Math.floor(x / 80);
    const moveTimeIndex = Math.floor(y / 30);

		// setSchedulesMap으로 상태를 변경하는 것이 아닌 DND를 한 데이터의 테이블을 update로 진행
    const updatedSchedule = {
      ...schedule,
      day: DAY_LABELS[nowDayIndex + moveDayIndex],
      range: schedule.range.map((time) => time + moveTimeIndex),
    };

    updateSchedule(tableId, Number(index), updatedSchedule);
  };

리뷰 받고 싶은 내용

리뷰 받기보다는 질문이 있는데요, 원래 이렇게 모든 걸 다 메모이제이션 하는 걸까요? 성능 최적화를 많이 해 보지를 못해서, 이렇게 모든 컴포넌트와 함수 하나하나를 다 memo, callback을 써야 하는 게 맞는 건지 궁금합니다!