[React] 일반적인 setState 사용 vs setState 콜백 함수

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
    ))
  }

 ⇒ 사용자가 입력 필드에서 데이터를 변경할 때마다 상태를 업데이트하며,

     이전 상태를 기반으로 비동기적으로 여러번 업데이트를 해야하기 때문에

     콜백 함수를 사용하여 현재 상태에 대한 안정적인 업데이트 가능