Polpid's Pensieve

const [enteredTitle, setEnteredTitle] = useState('');
const [enteredAmount, setEnteredAmount] = useState(0);
const [enteredDate, setEnteredDate] = useState();

const [userInput, setUserInput] = useState({
  enteredTitle: '',
  enteredAmount: 0,
  enteredDate: ''
})

• 주의 할 점은 update 시 object에 있는 일부 키만 업데이트 한다면 다른 키들이 사라진다.
• 아래와 같이 enteredTitle 키만 정의할 경우 나머지 키는 사라진다. (merge 하지 않는다)

  const titleChangeHandlerNew = (event) => {
    setUserInput.enteredTitle = event.target.value
  };

• 수동으로 복사가 필요하다. 기본값을 복사한후 오버라이드 한다.

  const titleChangeHandlerNew = (event) => {
    ...userInput,
    setUserInput.enteredTitle = event.target.value
  };

  • 위 방법에서는 문제가 발생할 수 있다.
  • 리액트가 상태업데이트 바로 실행하지 않는다.
  • 따라서 동시에 많은 상태를 업데이트 할 경우 최신값을 잘못 가져올수 있다.
  • 따라서 다음과 같이 사용하는게 더 낫다. (스냅샷을 이용한다)

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

• 사실 변경이 안된것이 아니라 화면만 전환이 안된것이다. (input 같은 경우)
• 이럴때에는 value 에 입력 값을 바인딩 해준다.