Hooks - useCallback
2021. 9. 29. 17:59ㆍReact/문법
- useCallback : useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다.
const nextId = useRef(4);
const onCreate = useCallback(() => {
const user = {
id: nextId.current,
username,
email
};
setUsers(users.concat(user));
setInputs({
username: '',
email: ''
});
nextId.current += 1;
}, [users, username, email]);
const onRemove = useCallback(
id => {
// user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
// = user.id 가 id 인 것을 제거함
setUsers(users.filter(user => user.id !== id));
},
[users]
);
const onToggle = useCallback(
id => {
setUsers(
users.map(user =>
user.id === id ? { ...user, active: !user.active } : user
)
);
},
[users]
);
'React > 문법' 카테고리의 다른 글
Hooks - useReducer (0) | 2021.10.20 |
---|---|
React.memo (0) | 2021.10.19 |
Hooks - useMemo (0) | 2021.09.29 |
Hooks - useEffect (0) | 2021.09.29 |
배열 렌더링 (0) | 2021.09.29 |