useCallback
React 컴포넌트가 리렌더링되면 해당 컴포넌트 함수들이 새로 만들어집니다.
자바스크립트에서는 함수도 곧 객체이기 때문에 리렌더링이 되면 '내용이 동일한 새로운 함수 객체'가 생성됩니다.
useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다.
두번째 매개변수인 deps가 업데이트되지 않는다면 함수 객체를 독립된 메모리에 캐싱해두고, 리렌더링 시 새로운 함수 객체를 생성하지 않기 때문에 해당 함수를 props로 가지는 자식 컴포넌트들은 함수가 바뀌었다고 생각하지 않게 됩니다.
따라서, 자식 컴포넌트의 props로 전달해주는 함수들은 useCallback을 사용해주면 재실행이 일어나는 횟수가 줄어들기 때문에 더 효율적인 앱을 만들 수 있습니다.
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
)
);
};
useCallback 사용
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]
);
'Framework > React' 카테고리의 다른 글
[React] useMemo와 useCallback (0) | 2024.07.26 |
---|---|
[React] State와 스냅샷 (1) | 2024.02.13 |
[React] 자바스크립트 새로고침 (0) | 2023.02.14 |
[React] 왜 React를 쓸까? (0) | 2023.02.07 |
React 시작하기 (0) | 2022.11.14 |
useCallback
React 컴포넌트가 리렌더링되면 해당 컴포넌트 함수들이 새로 만들어집니다.
자바스크립트에서는 함수도 곧 객체이기 때문에 리렌더링이 되면 '내용이 동일한 새로운 함수 객체'가 생성됩니다.
useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다.
두번째 매개변수인 deps가 업데이트되지 않는다면 함수 객체를 독립된 메모리에 캐싱해두고, 리렌더링 시 새로운 함수 객체를 생성하지 않기 때문에 해당 함수를 props로 가지는 자식 컴포넌트들은 함수가 바뀌었다고 생각하지 않게 됩니다.
따라서, 자식 컴포넌트의 props로 전달해주는 함수들은 useCallback을 사용해주면 재실행이 일어나는 횟수가 줄어들기 때문에 더 효율적인 앱을 만들 수 있습니다.
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
)
);
};
useCallback 사용
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]
);
'Framework > React' 카테고리의 다른 글
[React] useMemo와 useCallback (0) | 2024.07.26 |
---|---|
[React] State와 스냅샷 (1) | 2024.02.13 |
[React] 자바스크립트 새로고침 (0) | 2023.02.14 |
[React] 왜 React를 쓸까? (0) | 2023.02.07 |
React 시작하기 (0) | 2022.11.14 |