[ReactJS_Complete] useState() and Object

이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.

 

 

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

1. state를 개별적으로 관리

 

 

2. state를 Object로 관리

🚨 setUserInput() 시, 최신 입력값으로 모두 업데이트

setUserInput({enteredTitle: event.target.value}); 시, enteredAmount, enteredDate값이 모두 삭제되는 문제

→ ... spread operator를 통해 객체 요소 복사 후 변경된 값만 업데이트 필요

 

 

3. state를 Object로 관리 + 최신상태 보장

🚨 state update는 바로 이뤄지는 것이 아니라 React의 schedule 표에 따라 이뤄짐

한 번에 많은 state update 실행 시, 직전의 state가 아닌 잘못된 상태 snapshot에 의해 의존하게될 수 있는 문제 발생

→ prevState를 활용한 메서드 접근방법을 통해 이전 상태값을 최신으로 유지하여 무결성 보장

⭐ 상태 업데이트가 이전 상태에 의존 시, 함수를 사용한 업데이트 필수