일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- 스프링 다중프로필
- hash
- StringBuilder
- HashMap
- 백준 2660번 회장뽑기 G5
- dp
- 백준 1240번 노드사이의 거리
- 프로그래머스
- append
- 백준 2589번 보물섬 G5
- 전위 중위 후위
- map
- 백준 1600번 말이 되고픈 원숭이
- 포인트 컷
- StringTokenizer
- toUpperCase
- 서브모듈 yml
- 프로그래머스 자바
- 코틀린기초
- replace()
- 스프링 on-profile
- Stack
- HashSet
- 백준 1967번 트리의 지름 G4 자바
- kotlin
- 백준 8979번 올림픽 S5 자바
- Java
- 백준 11725번 트리의 부모 찾기
- 프로그래머스 java
- 백준 2206번 벽 부수고 이동하기 G3
Archives
- Today
- Total
말하는 컴공감자의 텃밭
React - Memoization 본문
728x90
Memoization
비용이 많이 드는 함수 호출의 결과를 저장하고, 동일한 입력이 발생할 때 캐시된 결과를 반환해서 효율을 높히는 방식이다. 알고리즘할때 DP[] 가 여기에 해당한다.
useMemo
이 후크는 종속성 중 하나가 변경된 경우에만 메모된 값을 다시 계산하는 특징을 갖고 있어 최적화에 효과적이다.
모든 랜더링에서 비용이 많이 드는 계산을 방지하는데 사용된다.
//사용법
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
a와 b가 변경되지 않는 한 후속 랜더링에서 함수를 호출하는 대신 메모된 값을 사용하게 된다.
Props를 통해 많은 계산이 요구될때 useMemo를 사용하게 된다.
import React, { useMemo } from 'react';
// 가중치가 큰 계산을 하는 컴포넌트
const HeavyComputationComponent = ({ number }) => {
// 이 함수는 복잡한 계산을 수행한다고 가정합니다.
// 예시로, 여기서는 단순히 숫자에 2를 곱합니다.
const compute = (n) => {
console.log('복잡한 계산을 수행 중...');
return n * 2;
};
// useMemo를 사용하여 'number'가 변경될 때만 계산을 수행합니다.
// 'number'가 같다면, 이전에 계산된 값을 재사용합니다.
const computedValue = useMemo(() => compute(number), [number]);
// 계산된 값을 화면에 표시합니다.
return <div>{computedValue}</div>;
};
export default HeavyComputationComponent;
구구단을 우리가 계산할때 표가 존재한다면 표를 보면되지 새롭게 9 * 2 = 18 라는 동작을 실제로 하지 않아도 된다.
728x90
'프론트엔드 > React' 카테고리의 다른 글
React - Redux (1) | 2024.02.07 |
---|---|
React - TDD, Testing Library, Jest, expect, matcher (1) | 2024.02.06 |
React - 불변성 정리 (1) | 2024.02.01 |
React - State, Props, 구조분해할당 (0) | 2024.01.31 |
Comments