jonbeo 님의 블로그

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

리액트는 상태가 변경되면 관련된 컴포넌트를 다시 렌더링하는 방식으로 동작합니다.하지만 이 과정에서 필요 없는 컴포넌트까지 렌더링되면 성능 저하로 이어지죠.이를 방지하기 위해 메모이제이션(Memoization) 기법을 활용합니다.🧠 1. React.memo컴포넌트 자체를 메모이제이션하여 불필요한 리렌더링 방지 import React from "react";const Child = React.memo(({ value }) => { console.log("렌더링됨:", value); return {value};});export default Child;props가 바뀌지 않으면 다시 렌더링하지 않음PureComponent와 비슷한 개념📌 주의: props가 객체/배열일 경우 참조가 바뀌면 여전히 리렌더..

안녕하세요 😊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..