ReactJS - useMemo 사용법: 초보자 가이드

안녕하세요, React 개발자 지망생 여러분! 오늘 우리는 React의 강력한 훅 중 하나인 useMemo에 대해 배우겠습니다. 프로그래밍에 새로운 분이라고 걱정하지 마세요; 이 개념을 단계별로 안내해드릴게요. 수업을 통해 수많은 학생들을 가르친 경험을 바탕으로 말이죠. 그럼 커피(또는 차, 당신의 취향에 따라) 한 잔을 마시며, 이 흥미로운 여정에 함께 동행해 주세요!

useMemo는 무엇인가요?

뒤적이기 전에 먼저 useMemo가 무엇인지 이해해보겠습니다. 쿠키를 만드는 것을 상상해보세요(이 비유를 좋아합니다. 쿠키를 좋아하는 사람이 누구 없을까요?). 쿠키 레시피에는 초콜릿 칩의 완벽한 양을 결정하는 복잡한 계산이 필요합니다. 그런데 쿠키를 만들 때마다 이 계산을 다시 할까요, 아니면 그것을 적어 두고 재사용할까요? useMemo는 바로 그런 일을 합니다 - 계산 결과를 기억해 두어 불필요한 반복을 피하게 해줍니다.

React의 관점에서, useMemo는 렌더링 사이에서 계산 결과를 캐싱해주는 훅입니다. 마치 복잡한 작업을 기억해 두는 초능력을 가진 슈퍼 스마트 어시스턴트를 가지고 있는 것과 같습니다!

useMemo 훅의 서명

그럼 실제로 useMemo 훅을 어떻게 사용하는지 살펴보겠습니다:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

들끓지 마세요! 처음에는 조금 두려울 수 있지만, 간단히 설명해드리겠습니다:

1. useMemo는 우리의 훅 이름입니다.
2. 두 개의 인자를 받습니다:

• 계산을 수행하는 함수 (() => computeExpensiveValue(a, b))
• 의존성 배열 ([a, b])

3. 메모이zed 값을 반환합니다.

이렇게 생각해보세요: useMemo는 "Hey React, a나 b가 변경되었을 때만 이 계산을 다시 실행해. 그렇지 않으면 마지막에 기억한 결과를 주세요."라고 말하는 것입니다.

useMemo 훅 적용하기

이제 useMemo를 실제 세계의 예제로 적용해보겠습니다. 온라인 상점의 쇼핑 카트를 만들어보겠습니다(누가 온라인 쇼핑을 좋아하지 않을까요?).

import React, { useMemo, useState } from 'react';

function ShoppingCart() {
const [cart, setCart] = useState([
{ id: 1, name: "React T-Shirt", price: 20 },
{ id: 2, name: "React Hoodie", price: 40 },
{ id: 3, name: "React Cap", price: 15 }
]);

const totalPrice = useMemo(() => {
console.log("Calculating total price...");
return cart.reduce((total, item) => total + item.price, 0);
}, [cart]);

return (
<div>
<h2>Your Shopping Cart</h2>
{cart.map(item => (
<div key={item.id}>{item.name} - ${item.price}</div>
))}
<h3>Total: ${totalPrice}</h3>
</div>
);
}

이를 단계별로 설명하겠습니다:

1. 우리는 몇 가지 항목을 포함한 쇼핑 카트를 가지고 있습니다. 각 항목은 이름과 가격을 가지고 있습니다.
2. 우리는 useMemo를 사용하여 카트의 모든 항목의 총 가격을 계산합니다.
3. 계산은 cart가 변경될 때만 다시 실행됩니다(그것이 [cart]이 의미하는 것입니다).
4. 각 항목과 총 가격을 표시합니다.

그런데 이게 왜 유용한가요? 계산이 매우 복잡한 작업(할인, 세금 등을 포함할 수 있습니다)이었다면, useMemo 없이는 React가 렌더링할 때마다 이를 다시 계산하게 되며, 카트가 변경되지 않았다면 이는 많은 처리 시간을 낭비하게 됩니다. useMemo를 사용하면 필요할 때만 계산을 수행하여 많은 처리 시간을 절약할 수 있습니다!

참조를 유지하기

useMemo의 또 다른 멋진 기능은 참조를 유지하는 능력입니다. "그게 뭐죠?"라고 물으시는군요. 다른 예제로 설명해드리겠습니다.

상태를 기반으로 작업을 필터링하는 투두리스트 앱을 만들어보겠습니다(모든 프로그래머는 적어도 한 번은 투두리스트를 만들어봅니다, 믿으세요!):

import React, { useMemo, useState } from 'react';

function TodoList() {
const [todos, setTodos] = useState([
{ id: 1, text: "Learn React", completed: false },
{ id: 2, text: "Build amazing apps", completed: false },
{ id: 3, text: "Change the world", completed: false }
]);

const [filter, setFilter] = useState('all');

const filteredTodos = useMemo(() => {
console.log("Filtering todos...");
switch(filter) {
case 'completed':
return todos.filter(todo => todo.completed);
case 'active':
return todos.filter(todo => !todo.completed);
default:
return todos;
}
}, [todos, filter]);

return (
<div>
<h2>My Todo List</h2>
<button onClick={() => setFilter('all')}>All</button>
<button onClick={() => setFilter('active')}>Active</button>
<button onClick={() => setFilter('completed')}>Completed</button>
{filteredTodos.map(todo => (
<div key={todo.id}>{todo.text}</div>
))}
</div>
);
}

이 예제에서:

1. 우리는 투두 목록과 필터 상태를 가지고 있습니다.
2. 우리는 useMemo를 사용하여 현재 필터에 따라 투두 목록을 필터링합니다.
3. 필터된 목록은 todos나 filter가 변경될 때만 다시 계산됩니다.

이 마법은 filteredTodos가 항상 같은 객체 참조를 유지한다는 것입니다. todos나 filter가 변경되지 않는 한, 그 참조는 변하지 않습니다. 이는 성능 최적화에 매우 중요합니다.

결론

이제 여러분은 useMemo의 기본 개념을 이해하고, 실제 예제에서 그를 어떻게 적용하는지 배웠습니다. useMemo는 불필요한 계산을 피하여 React 애플리케이션을 최적화하는 데 도움이 됩니다.

다음은 우리가 다루었던 메서드의 빠른 참조 표입니다:

메서드	목적	문법
useMemo	비싼 계산을 메모이즈	useMemo(() => computation, dependencies)

useMemo는 성능을 최적화하는 데 매우 유용하지만, 과도하게 사용하면 코드가 더 복잡해지고 큰 이점이 없을 수 있습니다. 항상 "강력한 힘에는 큰 책임이 따른다!"라고 학생들에게 말합니다.

계속 연습하고, 계속 빌드하고, 가장 중요한 것은 React를 즐기세요. 언제쯤 경험 많은 개발자들도 "와우!"라고 말할 만큼 놀라운 애플리케이션을 만들 것입니다. 막히면 고래 인형에게 코드를 설명해보세요. 기적으로 효과가 좋습니다, 믿으세요!

미래의 React 마스터 여러분, 행복하게 코딩하세요!

Credits: Image by storyset