[React] 03. 상태 만들기

const [userInput, setUserInput] = useState({
  "current-savings": 10000,
  "yearly-contribution": 1200,
  "expected-return": 7,
  duration: 10
});

하나의 상태를 만들었다. 모든 input에 대한 상태를 만들어야 하므로 객체형태로 만들고 각각의 키값과

value를 설정하였다.

 

const inputChangeHandler = (input, value) => {
  setUserInput((prevInput) => {
    return{
      ...prevInput,
      [input] : value,
    };
  });
};

이전 상태를 기반으로 상태를 새롭게 업데이트 하기위해 스프레드 연산자를 사용하였고, 동적으로 키값을 정하기 위해 

문자열을 넣는것이 아닌 매개변수를 넣었다. 

const resetHandler = () => {
    setUserInput(initialUserInput);
};

reset 버튼을 눌렀을 때 input의 값이 초기값으로 변해야 하므로 배열객체 initialUserInput을 정의하여 초기 상태로 변화시키는 코드를 만들었다.

const initialUserInput = {
  "current-savings": 10000,
  "yearly-contribution": 1200,
  "expected-return": 7,
  duration: 10,
};

const [userInput, setUserInput] = useState(initialUserInput);​

따라서 상태를 정의하는 부분도 훨씬 간결해진 모습이다.

<input
  onChange={(event) =>
  inputchangeHandler("current-savings", event.target.value)
  }
  value={userInput['current-savings']}
  //양방향 바인딩
  type="number"
  id="current-savings"
/>

사용자가 입력값을 넣었을때 변화하는 값이 다시 input의 값이 될 수 있도록 value 프로퍼티를 이용해 key값의 userInput을 value로 넣어줌으로써 양방향 바인딩을 해 주었다.

이를 input 각각에 작업해준다.