useMemo Hook
useMemo(func, [deps]);
- 주로 성능을 최적화해야 하는 상황에서 사용한다.
- 특정 값이 바꼈을 때에만 특정 함수를 실행시켜서 불필요한 실행을 막는다.
- deps가 바뀔 때에만 함수(func) 호출
App.js
function countActiveUsers(users) {
console.log("활성 사용자 수를 세는 중..");
return users.filter((user) => user.active).length;
}
function App() {
const count = countActiveUsers(users);
const [inputs, setInputs] = useState({
username: "",
age: "",
});
const { username, age } = inputs;
const [users, setUsers] = useState([
{ id: 1, username: "bae", age: 22, active: true },
{ id: 2, username: "lee", age: 21, active: false },
{ id: 3, username: "lim", age: 25, active: false },
]);
const nextId = useRef(4);
const onChange = (e) => {
const { name, value } = e.target;
setInputs({
...inputs,
[name]: value,
});
};
/* ... */
return (
<>
<CreateUser
username={username}
age={age}
onChange={onChange}
onCreate={onCreate}
/>
<UserList users={users} onRemove={onRemove} onToggle={onToggle} />
<div>활성 사용자 수 : {count}</div>
</>
);
- 컴포넌트가 리렌더링 될 때마다 활성 사용자(active) 수를 계산하여 업데이트한다.
- 그런데 useState로 input 상태를 관리하기 때문에 onChange 이벤트가 발생하면 컴포넌트는 리렌더링된다.
- 따라서 input에 컴포넌트가 추가될 때에도 활성 사용자 수를 계속 계산하게 된다. (불필요한 상황)
App.js
/* ... */
function App() {
const count = useMemo(() => countActiveUsers(users);, [users]);
/* ... */
}
Author And Source
이 문제에 관하여(useMemo Hook), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@green9930/useMemo-Hook저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)