반응 useMemo후크
React useMemoHook은 메모된 값을 반환합니다.
메모이제이션을 다시 계산할 필요가 없도록 값을 캐싱하는 것으로 생각하십시오.
Hook 은 useMemo종속성 중 하나가 업데이트될 때만 실행됩니다.
이렇게 하면 성능이 향상될 수 있습니다.
및 Hooks useMemo는 useCallback비슷합니다. 주요 차이점은 메모화 useMemo된 값을
useCallback반환하고 메모화된 함수를 반환한다는 것입니다. useCallback 장useCallback 에서 자세히 알아볼 수 있습니다 .
성능
Hook 은 useMemo값비싼 리소스 집약적 기능이 불필요하게 실행되지 않도록 하는 데 사용할 수 있습니다.
이 예에는 모든 렌더에서 실행되는 값비싼 함수가 있습니다.
카운트를 변경하거나 할 일을 추가할 때 실행이 지연되는 것을 알 수 있습니다.
예시:
성능이 좋지 않은 기능입니다. expensiveCalculation함수는 모든 렌더링에서 실행됩니다 .
import { useState } from "react";
import ReactDOM from "react-dom";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState([]);
const calculation = expensiveCalculation(count);
const increment = () => {
setCount((c) => c + 1);
};
const addTodo = () => {
setTodos((t) => [...t, "New Todo"]);
};
return (
<div>
<div>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
<button onClick={addTodo}>Add Todo</button>
</div>
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
<h2>Expensive Calculation</h2>
{calculation}
</div>
</div>
);
};
const expensiveCalculation = (num) => {
console.log("Calculating...");
for (let i = 0; i < 1000000000; i++) {
num += 1;
}
return num;
};
ReactDOM.render(<App />, document.getElementById('root'));
사용 useMemo
이 성능 문제를 해결하기 위해 useMemoHook을 사용하여 expensiveCalculation함수를 메모할 수 있습니다. 이렇게 하면 필요할 때만 함수가 실행됩니다.
값비싼 함수 호출을 useMemo.
useMemoHook은 종속성을 선언하기 위해 두 번째 매개변수를 허용합니다 . 값비싼 함수는 종속성이 변경된 경우에만 실행됩니다.
다음 예에서 비싼 함수는 가 변경될 때만 실행 count
되고 할일이 추가될 때는 실행되지 않습니다.
예시:
useMemoHook 을 사용한 성능 예시 :
import { useState, useMemo } from "react";
import ReactDOM from "react-dom";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState([]);
const calculation = useMemo(() => expensiveCalculation(count), [count]);
const increment = () => {
setCount((c) => c + 1);
};
const addTodo = () => {
setTodos((t) => [...t, "New Todo"]);
};
return (
<div>
<div>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
<button onClick={addTodo}>Add Todo</button>
</div>
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
<h2>Expensive Calculation</h2>
{calculation}
</div>
</div>
);
};
const expensiveCalculation = (num) => {
console.log("Calculating...");
for (let i = 0; i < 1000000000; i++) {
num += 1;
}
return num;
};
ReactDOM.render(<App />, document.getElementById('root'));