728x90
반응형
1. 컴포넌트가 리렌더링 될 때마다를 기록하고 싶을 때가 있을 수 있다.
App.js
import React, { useRef, useState } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';
function countActiveUsers(users) {
console.log('활성 사용자 수를 세는중...');
return users.filter(user => user.active).length;
}
function App() {
const [inputs, setInputs] = useState({
username: '',
email: ''
});
const { username, email } = inputs;
const onChange = e => {
const { name, value } = e.target;
setInputs({
...inputs,
[name]: value
});
};
const [users, setUsers] = useState([
{
id: 1,
username: 'velopert',
email: 'public.velopert@gmail.com',
active: true
},
{
id: 2,
username: 'tester',
email: 'tester@example.com',
active: false
},
{
id: 3,
username: 'liz',
email: 'liz@example.com',
active: false
}
]);
const nextId = useRef(4);
const onCreate = () => {
const user = {
id: nextId.current,
username,
email
};
setUsers(users.concat(user));
setInputs({
username: '',
email: ''
});
nextId.current += 1;
};
const onRemove = id => {
// user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
// = user.id 가 id 인 것을 제거함
setUsers(users.filter(user => user.id !== id));
};
const onToggle = id => {
setUsers(
users.map(user =>
user.id === id ? { ...user, active: !user.active } : user
)
);
};
const count = countActiveUsers(users);
return (
<>
<CreateUser
username={username}
email={email}
onChange={onChange}
onCreate={onCreate}
/>
<UserList users={users} onRemove={onRemove} onToggle={onToggle} />
<div>활성사용자 수 : {count}</div>
</>
);
}
export default App;
위 컴포넌트를 보면
const count = countActiveUsers(users);위 부분은 함수 리렌더링이 있을 때마다 count값을 바꿔서 나타내어지게끔 변수를 선언한 부분이며
function countActiveUsers(users) {
console.log('활성 사용자 수를 세는중...');
return users.filter(user => user.active).length;
}위 부분은 함수가 호출되었을 때 로그가 찍히도록 하고, user.active의 개수를 return해준다.
이렇게 코드를 구성하게 되면 버튼을 클릭할 때는 한 번 클릭할 때마다 제대로 로그가 찍히지만
input의 값이 바뀔 때마다 리렌더링이 되기 때문에 text 등을 입력할 때 상당히 비효율적이다.
이러한 상황에서 쓰이는 Hook 함수가 useMemo이다.
const count = useMemo(() => countActiveUsers(users), [users]);이런식으로 첫번째 파라미터에는 어떻게 연산할지 함수를 정의하고, 두번째 파라미터는 바뀌는 내용을 정의한다.
이렇게 하면 users의 내용이 바뀌기 전까진 함수가 실행되지 않고, 바뀌면 그 때 실행이 된다.
참조
728x90
반응형
'Front-End > React.js' 카테고리의 다른 글
| React.js | 입문 | 커스텀 Hook (0) | 2021.09.17 |
|---|---|
| React.js | 입문 | useReducer (0) | 2021.09.17 |
| React.js | 입문 | useEffect (0) | 2021.09.17 |
| React.js | 입문 | 배열에 항목 수정 및 제거 (0) | 2021.09.17 |
| React.js | 입문 | 배열에 항목 추가 (0) | 2021.09.17 |