useState object 형태 업데이트하기

useState로 object형태의 상태를 업데이트 하는 방법은 두 가지가 있다.

보기엔 문제없이 동일하게 동작하지만 차이가 있고, 1번보다는 2번은 권장한다.

const [userInput, setUserInputs] = useState({
	title: '',
	amount: '',
	date: ''
});

const titleChangeHandler = (event) => {
	// 방법 (1) : not good
    setUserInputs({
    	...userInput
    	title: event.target.value
    });
    
	// 방법 (2) : good
    setUserInputs((prevState) => {
    	return { ...prevState, title: event.target.value }
    };
}

리액트는 상태 업데이트를 예약하는데 이걸 바로 수행하진 않는다.

이론적으로, 만약에 동시에 여러 상태 업데이트를 예약한다면, 오래되거나 잘못된 상태 스냅샷에 의존하게 된다.

이 접근 방식(2)을 사용하면 React는 이 내부 함수에서 제공하는 상태 스냅샷이 항상 최신 상태 스냅샷이 되도록 보장하며 모든 예약된 상태 업데이트를 염두에 두고 있다.

이것은 항상 최신 상태 스냅샷에서 작업하도록 하는 더 안전한 방법이다.

따라서 상태 업데이트가 이전 상태에 따라 달라질 때마다 여기에서 이 함수 구문을 사용하는 것이 좋다. 

 

In many cases, both will work fine,

but keep in mind that Reacts schedules state updates, it doesn't perform them instantly.

And therefore, theoretically,

if you schedule a lot of state updates at the same time, you could be depending on an outdated or incorrect state snapshot.

If you use this approach(2) , React will guarantee that the state snapshot it gives you here in this inner function, will always be the latest state snapshot, keeping all scheduled state updates in mind.

So this is the safer way to ensure that you always operate on the latest state snapshot.

So you should use this function syntax here whenever your state update depends on the previous state.

That is something you should memorize.

If your state update depends on the previous state, use this function form(2).