안녕하세요
프로젝트 하다가 문제가 생겨서 문의드립니다.
const [productList, setProductList] = useState<INodeState[]>([])
const onAddProduct = () => {
setProductList((prev) => [
...prev,
{
id: newKey,
state: (
<ProductRow
key={newKey}
setValue={setProductValue}
onPrdDelete={() => onDeleteProduct(newKey)}
/>
)
}
])
console.log(productList)
}
const onDeleteProduct = (prdkey: number) => {
setProductList((prev) => prev.filter((obj) => obj.id !== prdkey))
console.log(productList)
}
useEffect(() => {
console.log(productList)
}, [productList])
---------------------
onAddProduct 에서 productList 추가시킨 걸 onDeleteProduct 에서 삭제하는 건데
콘손로그로 찍어보면 useEffect안에서는 제대로 삽입되고 삭제되는데
onAddProduct나 onDeleteProduct 에서는 하나가 덜 나옵니다. 화면에서도 하나가 덜 나와요.
productList 처음 추가하면 useEffect 콘솔로그에서는 하나가 바로 나오는데 []으로 나오고
두 개를 추가해야 하나가 삽입되는 식 한 번이 늦게 삽입됩니다.
왜 바로 업데이트가 안되는 걸까요?
화면에서도 바로 업데이트 되게 하려면 어떻게 해야할까요??
