이전 State에 의존하는 State UpDate

Hover·2022년 7월 4일
0

Udemy리액트

목록 보기
4/19

1번째 방법

setUserInput({
	...userInput,
	enteredTitle:event.target.value,
})

이와 같은 방법으로 여러 state를 업데이트하는 것은 이전 state에 의존하는 것입니다.
이전 state값을 복사하고 새로운 값으로 오버라이드 하는 것입니다.
하지만, 이렇게 하는 방법도 있습니다.

2번째 방법

setUserInput((prevState)=>{
	return{
		...prevState,enteredTitle:event.target.value
		};
})

동시에 여러 상태 업데이트가 예정되어 있다면 첫번째 방법으로 했을 때, 오래된 스냅샷(이전State)나 잘못된 스냅샷에 의존될 수도 있습니다.
반면에 2번째 방법으로 했을땐, 상태 업데이트 함수 안에 있는 스냅샷이 항상 최신임과 동시에 계획된 상태 업데이트를 염두에 두고 있다는 것이 보장됩니다. 두 번째 방법이 좀더 안전한 방법입니다.

만약 앞으로 이전 state에 의존하는 함수를 사용하고 있다면 2번째 방법을 사용하는 것이 좋아 보입니다.

profile
프론트엔드 개발자 지망생입니다

1개의 댓글

comment-user-thumbnail
2022년 9월 27일

저도 프론트엔드 개발 희망하고 있어요 파이팅입니다~~!

답글 달기