[React] React.useState()

• 값과 함수를 반환한다.
• 함수는 값을 변화시킨후 컴포넌트를 리렌더링한다
• 여러개의 state 를 정의할 수도 있고 object로 관리할수도 있다.

  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
        }
      });
      };

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