7.5.4 useMemo Hook으로 최적화하기

CalendarScreen의 기능은 모두 구현했습니다. 지금부터는 이 컴포넌트를 최적화해보겠습니다.

현재 이 컴포넌트는 리렌더링될 때마다 markedDates를 생성합니다. 날짜가 변경될 때도 컴포넌트가 리렌더링되는데요. markedDates는 날짜가 바뀌어도 변하지 않기 때문에 매번 생성할 필요가 없습니다.

이러한 상황에는 useMemo라는 Hook을 사용해 값을 메모이제이션(memoization)해 최적화할 수 있습니다. 메모이제이션이란 동일한 계산을 반복해야 할 때 불필요한 연산을 제거하기 위해 이전에 계산한 값을 재사용해 처리를 최적화하는 것을 의미합니다.

이 Hook의 사용법은 다음과 같습니다.

const value = useMemo(() => compute(a, b), [a, b]);

이렇게 Hook을 사용하면 a나 b의 값이 변경될 때만 값이 연산됩니다. CalendarScreen에서 useMemo Hook을 사용한다면 다음과 같이 사용할 수 있습니다.