React :: UseState 사용 시 이전 값에 Data 누적 시키기

예를 들어 입력 폼에 있는 데이터를 저장해서 어떤 곳에 send 한다고 생각해보자.

물론 useref 를 사용하여 데이터를 저장하여 보내어도 된다.

 

만약 어떤 event 가 일어날 때마다 usestate 이전 값에 추가하여 어떤 이벤트가 일어나게 하고 싶다면...

 

setUser((prev)=>([...prev, ...add1]))
setUser((prev)=>([...prev, ...add2]))

 

이런 형식으로 구현해주면 된다.

 

CASE 1) 특정 값 누적하여 계산하기

const [number, setNumber] = useState(0)
function onClick() {
      setNumber(prev => prev + 1) // 상태값 변경 함수에 함수 전달
    }

 

CASE 2) 입력 폼에 있는 데이터 누적 시키기

const [formData, setFormData] = useState({});
function onClick() {
      setFormData((prev) => ({
      ...prev,
      [name]: value
    }));
    }