본문 바로가기
Development/Frontend skills

[React] React.useState()

by 폴피드 2022. 8. 12.
728x90
반응형
  • 값과 함수를 반환한다.
  • 함수는 값을 변화시킨후 컴포넌트를 리렌더링한다
  • 여러개의 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 에 입력 값을 바인딩 해준다.
728x90
반응형