220415 useMemo
useMemo❓
関数
Hook
技術
<Memoized num="{1}" />
<!-- 직전 elements를 사용 -->
<Memoized num="{1}" />
<!-- 새롭게 렌더링 -->
<Memoized num="{2}" />
<!-- 새롭게 렌더링 -->
<Memoized num="{1}" />
きほんけいじょう
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
例
import { useState, useMemo } from "react";
const getAverage = (numbers) => {
console.log("평균값 계산 중...");
if (numbers.length === 0) return 0;
const sum = numbers.reduce((a, b) => a + b);
return sum / numbers.length;
};
const Average = () => {
const [list, setList] = useState([]);
const [number, setNumber] = useState("");
const onChange = (e) => {
setNumber(e.target.value);
};
const onInsert = (e) => {
const nextList = list.concat(parseInt(number));
setList(nextList);
setNumber("");
};
const avg = useMemo(() => getAverage(list), [list]);
return (
<div>
<input value={number} onChange={onChange} />
<button onClick={onInsert}>등록</button>
<ul>
{list.map((value, index) => (
<li key={index}>{value}</li>
))}
</ul>
<div>
<b>평균값:</b>
{avg}
</div>
</div>
);
};
export default Average;
詳細
React.memoとuseMemoの違い
React.memoは、要素をパラメータとして受け入れ、その要素を返します.
userMemoは戻り値のhookです
Reference
この問題について(220415 useMemo), 我々は、より多くの情報をここで見つけました https://velog.io/@nulee1000/220415-useMemoテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol