Frontend Academy · 강의

성능을 위한 useMemo와 useCallback

useMemo로 비용이 큰 계산을 메모이제이션하고 useCallback으로 안정적인 함수 참조를 유지해 불필요한 자식 컴포넌트 재렌더링을 방지합니다.

레슨 3/413개 단계

성능을 위한 useMemo와 useCallback은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

React의 기본 동작

기본적으로 React는 상태가 변경되거나 부모가 다시 렌더링될 때 컴포넌트를 다시 렌더링합니다. 자식 컴포넌트도 prop이 변경되지 않았더라도 다시 렌더링됩니다. 대부분의 컴포넌트에서는 문제가 되지 않습니다. React는 빠르기 때문입니다.

useMemo — 비용이 큰 값 메모이제이션

useMemo(fn, deps)는 계산 결과를 캐시합니다. 의존성이 변경될 때만 함수가 실행됩니다. 렌더링할 때마다 반복하면 낭비가 되는 비용이 큰 계산에 사용하세요.

const expensiveResult = useMemo(() => {
  return items.filter(item => item.category === category).sort((a, b) => a.price - b.price);
}, [items, category]);
// Only recalculates when items or category changes

useCallback — 함수 메모이제이션

useCallback(fn, deps)는 의존성이 변경되지 않는 한 동일한 참조를 유지하는 메모이제이션된 함수를 반환합니다. 콜백을 깊게 중첩된 컴포넌트나 메모이제이션된 컴포넌트에 전달할 때 사용하세요.

const handleDelete = useCallback((id: string) => {
  setItems(prev => prev.filter(item => item.id !== id));
}, []); // stable reference — empty deps because only setItems is used

<ItemList items={items} onDelete={handleDelete} />

React.memo — 다시 렌더링 건너뛰기

React.memo(Component)는 prop이 변경될 때만 컴포넌트를 다시 렌더링하도록 감쌉니다(얕은 비교). 안정적인 콜백 prop을 만들려면 useCallback과 함께 사용하세요.

const MemoItem = React.memo(function Item({ text, onDelete }: ItemProps) {
  console.log('Item rendered:', text); // only logs when props change
  return <li>{text} <button onClick={onDelete}>×</button></li>;
});

// onDelete must be stable (from useCallback) for memo to help

최적화하지 말아야 할 때

성급한 최적화는 함정입니다. useMemo와 useCallback에는 클로저와 의존성 비교라는 비용이 있습니다. 10개 항목 필터링처럼 비용이 적은 작업에서는 오버헤드가 이점보다 큽니다. 실제 성능 문제를 측정한 후 최적화하세요.

최적화 전 프로파일링

메모이제이션을 추가하기 전에 React DevTools 프로파일러로 실제 렌더링 시간을 측정하세요. 프로파일러는 어떤 컴포넌트가 가장 오래 걸리는지와 몇 번 렌더링되는지를 보여 줍니다. 추측이 아니라 근거를 바탕으로 수정하세요.

안정적인 참조를 위한 useMemo

useMemo는 참조를 안정적으로 유지할 때도 유용합니다. 계산 자체의 성능을 높이기 위해서가 아니라, 하위 메모나 효과가 불필요하게 다시 실행되는 것을 방지하기 위해 사용합니다.

// Without useMemo, this creates a new array every render:
const config = useMemo(() => ({ endpoint: '/api', timeout: 5000 }), []);

// Without memoization, useEffect would re-run on every render:
useEffect(() => { initSDK(config); }, [config]);

useCallback 의존성

useCallback은 useEffect와 동일한 의존성 규칙을 따릅니다. 콜백이 사용하는 외부 범위의 모든 변수를 포함하세요. useState에서 반환되는 상태 설정자는 항상 안정적이므로 의존성에 넣지 않아도 됩니다.

useMemo와 useCallback의 관계

useCallback(fn, deps)은 useMemo(() => fn, deps)와 동일합니다. 같은 메커니즘이며, useCallback은 특히 함수를 메모이제이션하기 위한 간편한 문법일 뿐입니다.

목록 항목 메모이제이션

일반적인 패턴은 목록이 크고 자주 다시 렌더링될 때 목록 항목 컴포넌트를 메모이제이션하는 것입니다. 메모이제이션이 무효화되지 않도록 useCallback으로 안정적인 콜백을 전달하세요.

const MemoRow = React.memo(Row);
const handleEdit = useCallback((id) => edit(id), []);
const handleDel  = useCallback((id) => remove(id), []);

{rows.map(row => (
  <MemoRow key={row.id} row={row} onEdit={handleEdit} onDelete={handleDel} />
))}

컨텍스트 값 메모이제이션

Provider의 부모가 다시 렌더링될 때마다 모든 소비자가 다시 렌더링되는 것을 방지하려면 Context Provider에 전달하는 값을 메모이제이션하세요.

const value = useMemo(() => ({ user, login, logout }), [user]);

빠른 확인

useCallback의 목적은 무엇인가요?

인터랙티브 레슨에서 답해보세요

복습: useMemo와 useCallback

useMemo는 비용이 큰 계산값을 캐시합니다. useCallback은 함수 참조를 캐시합니다. React.memo는 prop이 얕은 비교에서 변경되지 않으면 다시 렌더링을 건너뜁니다. 컴포넌트 수준의 성능을 위해 세 가지를 함께 사용하세요. 먼저 프로파일링하세요. 성급한 메모이제이션은 이점 없이 복잡성만 더합니다. 안정적인 참조는 하위 효과와 메모가 불필요하게 다시 실행되는 것을 방지합니다.

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 41
레슨: 163

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“성능을 위한 useMemo와 useCallback” 강의는 무료인가요?

네 — “성능을 위한 useMemo와 useCallback” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“성능을 위한 useMemo와 useCallback”에서 뭘 배우나요?

useMemo로 비용이 큰 계산을 메모이제이션하고 useCallback으로 안정적인 함수 참조를 유지해 불필요한 자식 컴포넌트 재렌더링을 방지합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“성능을 위한 useMemo와 useCallback” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Frontend Academy(으)로 돌아가기