React 기초 11 · useMemo
useMemo - 비싼 계산 아껴쓰기
매 렌더마다 다시 하던 무거운 계산을, 재료가 그대로면 계산해둔 답을 재활용. 계산 횟수로 효과를 눈으로 확인해요.
1
먼저 비유로
계산해둔 답을 재활용해요
어려운 곱셈의 답을 한 번 구해서 포스트잇에 적어뒀어요. 다음에 같은 문제가 또 나오면 다시 풀지 않고 포스트잇을 봐요. useMemo가 이 포스트잇이에요. 재료(deps)가 그대로면 계산해둔 답을 재활용하고, 재료가 바뀌었을 때만 새로 계산해요.
컴포넌트는 state가 바뀔 때마다 함수가 통째로 다시 실행돼요(렌더). 그 안에 무거운 계산이 있으면 매번 다시 하게 되는데, 그게 아까울 때 useMemo로 아껴요.
2
직접 해보기
계산 횟수로 효과 보기
useMemo 켠 상태로 관련 없는 값 +1을 눌러보세요. 위 계산 횟수가 안 올라가요(답 재활용). 이제 끄고 같은 버튼을 누르면 매번 올라가요.
직접 만져보세요
계산 함수가 실제로 돈 횟수1
계산 결과15
관련 없는 값0
5
useMemo 켜고 "관련 없는 값 +1"을 눌러보세요. 계산 횟수가 안 올라가죠? 재료 n이 그대로라 답을 재활용해요. 끄고 같은 버튼을 누르면 매번 계산해서 횟수가 올라가요. (재료 n을 바꾸면 켜져 있어도 당연히 다시 계산해요.)
켜고/끄고 '관련 없는 값 +1'을 눌러 계산 횟수 차이를 보세요.
핵심은 이거예요
useMemo는 재료(deps)가 그대로면 지난 계산 결과를 재활용해요. 관련 없는 값이 바뀌어 다시 그려져도, 무거운 계산은 건너뛰어요.
3
흐름으로 보기
재활용할지 판단하는 순서
- 1컴포넌트가 다시 그려지면 useMemo가 deps(재료)를 지난번과 비교해요.
- 2재료가 그대로면 -> 계산을 건너뛰고 저장해둔 결과를 그대로 줘요.
- 3재료가 하나라도 바뀌었으면 -> 계산 함수를 다시 돌려 새 결과를 저장해요.
- 4그래서 '관련 없는 값'이 바뀐 렌더에선 무거운 계산을 안 하게 돼요.
4
코드로 보기
딱 이만큼이에요
function List({ items, keyword, theme }) { // items나 keyword가 그대로면 -> 지난번 계산 결과를 그대로 재활용 // theme(관련 없는 값)만 바뀌면 -> 무거운 필터를 다시 안 한다 const filtered = useMemo(() => { return items.filter((it) => it.includes(keyword)); // 무거운 작업 }, [items, keyword]); // 재료(deps) return <p>{filtered.length}개</p>;}5
조심하세요
처음에 꼭 헷갈리는 것
- 모든 것에 useMemo를 두르기. 가볍게 끝나는 계산엔 오히려 손해예요(비교/메모리 비용). 정말 무거운 계산에만 쓰세요.
- deps에 재료를 빼먹기. 계산에 쓴 값을 deps에 안 넣으면, 그 값이 바뀌어도 옛 결과를 재활용해 틀린 값이 보여요.
- 성능 측정 없이 짐작으로 넣기. 먼저 느린지 확인하고 넣는 게 맞아요. "혹시 몰라서" 두른 useMemo가 더 많아요.