React 애플리케이션 개발 시, 불필요한 렌더링을 줄이는 것은 애플리케이션의 성능을 크게 향상시키는 방법 중 하나입니다. React의 Hook 중 하나인 useMemo를 사용하여 불필요한 연산과 렌더링을 줄이는 방법에 대해 알아보고, 적용했습니다.
useMemo란?
useMemo는 메모이제이션(memoization)을 수행하는 React의 Hook입니다. 메모이제이션은 비싼 계산 비용이 드는 함수의 반환 값을 저장하여, 같은 입력에 대해서는 저장된 값을 재활용하고, 새로운 계산을 수행하지 않도록 하는 기법입니다. useMemo는 의존성 배열이 변경될 때만 메모이제이션 함수를 다시 실행합니다.
useMemo를 사용한 성능 최적화
아래의 코드는 기존의 useEffect를 사용하여 필터링과 정렬을 수행하는 코드입니다. useEffect는 컴포넌트가 렌더링 될 때마다 실행되므로, 매번 필터링과 정렬이 수행됩니다.
const [filteredData, setFilteredData] = useState([]);
useEffect(() => {
const filtered = data
.filter(
(item) =>
(selectedCategory === "전체" || item.category === selectedCategory) &&
formatDate(item.start) <= new Date() &&
formatDate(item.end) >= new Date()
)
.sort((a, b) =>
sortType === "bookmarked"
? b.bookmarked - a.bookmarked
: new Date(b.start) - new Date(a.start)
);
setFilteredData(filtered);
setCurrentPage(0);
}, [data, selectedCategory, sortType]);이 코드를 useMemo를 사용하여 개선하면 다음과 같습니다:
const filteredData = useMemo(() => {
return data
.filter(
(item) =>
(selectedCategory === "전체" || item.category === selectedCategory) &&
formatDate(item.start) <= new Date() &&
formatDate(item.end) >= new Date()
)
.sort((a, b) =>
sortType === "bookmarked"
? b.bookmarked - a.bookmarked
: new Date(b.start) - new Date(a.start)
);
}, [data, selectedCategory, sortType]);useMemo를 사용하면 data, selectedCategory, sortType 중 하나라도 변경되면 새롭게 계산되며, 그렇지 않으면 이전에 계산된 값을 재사용합니다. 이로써 필요한 경우에만 필터링과 정렬을 수행하므로 성능을 개선할 수 있습니다.
필터링된 데이터 상태 제거
useMemo를 사용하면 필터링된 데이터를 관리하는 상태와 상태 설정 함수가 더 이상 필요하지 않게 됩니다. 따라서 아래 코드를 제거합니다.
const [filteredData, setFilteredData] = useState([]);결론
React 애플리케이션에서 성능 최적화는 매우 중요하다고 합니다. 특히, 불필요한 연산과 렌더링을 줄이는 것은 사용자 경험을 크게 향상시키는 방법 중 하나이며 useMemo를 활용하면 이러한 최적화를 쉽게 수행할 수 있을 것 입니다. 다만, 모든 상황에서 useMemo를 사용하는 것이 아니라, 필요한 상황에서 적절히 활용하는 것이 중요하다고 생각합니다.
