jonbeo 님의 블로그

React 앱이 느려지는 주요 원인은 대부분 “불필요한 리렌더링”입니다.컴포넌트가 재렌더링될 때마다 함수, 객체, 배열이 새로 생성되기 때문이죠. 이 문제를 해결하기 위한 세 가지 Hook:🧠 useMemo, ⚙️ useCallback, 📦 useRef 이 세 가지를 제대로 알면 성능 최적화 + 안정적인 상태 관리가 동시에 가능합니다 👇🧠 1. useMemo – 계산 결과를 메모이징복잡한 계산의 결과를 기억해두고, 의존값이 변할 때만 다시 계산. import { useMemo, useState } from "react";function ExpensiveComponent({ items }: { items: number[] }) { const [count, setCount] = useState(0)..

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