React
[React] 일반적인 setState 사용 vs setState 콜백 함수
오늘도 코딩하나
2024. 8. 31. 17:02
1. 일반적인 setState 사용
▶ 단순 상태 업데이트
- 상태가 직접적으로 업데이트되는 경우
- 이전 상태에 의존하지 않고 상태를 완전히 새로 설정할 때
( 상태를 덮어쓰는 경우)
- 단순 값 설정이 필요한 경우
- 이전 상태와 무관한 로직으로 상태를 업데이트할 때
▶ 외부 데이터로 상태 설정
- API 호출 결과를 기반으로 상태를 설정할 때
const handleCheckAll = () => {
setCheckedAll([])
}
⇒ 이전 상태에 의존하지 않고 새 값을 설정
const handleCheck = (id) => {
setCheckedItems((prev) =>
prev.includes(id) ? prev.filter((itemId) => itemId !== id) : [...prev, id]
);
};
⇒ 이 경우에는 'prev'를 이용해 이전 상태를 기반으로 업데이트를 하고 있지만,
비동기적인 상태 관리가 필요하지 않음.
2. setState 콜백 함수
▶ 현재 상태 기반 업데이트
- 현재 상태값을 기반으로 상태를 업데이트하는 경우
▶ 동시 상태 업데이트 문제
- 상태가 비동기적으로 여러 번 업데이트될 때
const handleUpdate = (id, key, event) => {
let newItem = event.target.innerText;
setTempData(prevData => prevData.map((item) =>
item.id === id ? { ...item, [key]: newItem } : item
))
}
⇒ 사용자가 입력 필드에서 데이터를 변경할 때마다 상태를 업데이트하며,
이전 상태를 기반으로 비동기적으로 여러번 업데이트를 해야하기 때문에
콜백 함수를 사용하여 현재 상태에 대한 안정적인 업데이트 가능