개발자의 재태크

리액트 성능 최적화의 꽃이자, 동시에 가장 오용되기 쉬운 기능이 바로 **메모이제이션(Memoization)**입니다. "일단 다 감싸고 보자"는 식의 접근은 오히려 애플리케이션의 성능을 떨어뜨릴 수 있습니다.이번 섹션에서는 메모이제이션의 정확한 동작 원리와 언제 사용하고, 언제 멈춰야 하는지에 대한 명확한 기준을 세워보겠습니다.1. 왜 메모이제이션이 필요한가? (참조 동일성)리액트에서 컴포넌트는 자신의 state가 바뀌거나, 부모 컴포넌트가 재렌더링될 때 함께 재렌더링됩니다. 이때 자바스크립트의 참조 동일성(Referential Equality) 문제가 발생합니다.문제: 컴포넌트가 재렌더링될 때마다 내부에서 선언된 객체, 배열, 함수는 새로운 메모리 주소를 가집니다.결과: 리액트 입장에서는 내용은 같아..

React 렌더링 원리를 이해했다면, 이제 불필요한 리렌더링 전파를 막는 '메모이제이션(Memoization)' 도구를 활용할 차례입니다. 중급 개발자에게 useMemo, useCallback, React.memo는 선택이 아닌 필수입니다.이 Hook들을 정확히 이해하고, 성능 향상에 기여하는 '적절한 시점'을 파악하는 것이 중요합니다.1. 🚀 useMemo: 무거운 계산 결과를 캐싱 (값의 메모이제이션)useMemo는 **'값을 기억(Memoize)하는 Hook'**입니다. 복잡한 연산 결과를 캐싱하여, 의존성 배열(deps)이 변경되지 않는 한 해당 연산을 다시 실행하지 않고 이전에 캐싱된 값을 재사용합니다.속성설명목적시간이 오래 걸리는 계산의 결과를 저장하고 재사용하여 렌더링 속도 개선.문법con..