jonbeo 님의 블로그

안녕하세요 😊React 컴포넌트가 렌더링될 때,값을 계산하는 로직이 복잡하거나 무거우면 매번 연산이 반복되어 성능이 저하될 수 있습니다.이럴 때 useMemo Hook을 사용하면 필요할 때만 연산을 실행하고 결과를 재사용할 수 있습니다.📍 1. useMemo란?메모이제이션(Memoization) 기능을 제공하는 React Hook**의존성(dependencies)**이 변경될 때만 콜백 함수를 다시 실행복잡한 계산, 큰 데이터 변환, 필터링, 정렬 등에 유용문법const memoizedValue = useMemo(() => { // 계산 로직 return 결과값;}, [의존성]);📍 2. 기본 예제import React, { useMemo, useState } from "react";export..

안녕하세요 😊React를 사용하다 보면“이 계산은 매번 다시 하지 않아도 되는데…”“렌더링이 되어도 이 값은 유지하고 싶다…”이럴 때 유용한 Hook이 바로 **useMemo**와 **useRef**입니다.이번 글에서는 두 Hook의 차이점과실무에서 어떻게 활용할 수 있는지 예제와 함께 정리해드리겠습니다.📍 1. useMemo – 계산 결과 메모이제이션기본 개념의존성 배열이 변할 때만 함수를 실행하고, 그 외에는 이전 계산값을 재사용 예제import { useMemo, useState } from "react";export default function ProductList({ products }) { const [filter, setFilter] = useState(""); const filte..