여러개의 State 하나로 합치기

기존 코드

const ExpenseForm = () => {
  const [enteredTitle, setEnteredTitle] = useState("");
  const [enteredAmount, setEnteredAmount] = useState("");
  const [enteredDate, setEnteredDate] = useState("");


  
  const titleChangeHandler = (event) => {
    setEnteredTitle(event.target.value);
  };
  
  const amountChangeHandler = (event) => {
    setEnteredAmount(event.target.value);
  };
  
  const dateChangeHandler = (event) => {
    setEnteredDate(event.target.value);
  };
}

 

위의 코드는 사용자의 입력 폼의 State를 나타낸 것입니다.

 

기존 코드에서는 3개의 입력 폼을 개별적인 State로 관리해주었습니다.

 

각각의 개별적인 세 3개의 State는 같은 개념이 3번 반복된 것입니다.

 

따라서 하나의 State로 관리가 가능합니다.

 

 

변경 코드

  // 하나의 State로 여러개 관리 가능
  const [userInput, setUserInput] = useState({
    enteredTitle: "",
    enteredAmount: "",
    enteredDate: "",
  });
  
  const titleChangeHandler = (event) => {
    setUserInput({
      ...userInput,
      enteredTitle: event.target.value,
    });
  };
  
  const amountChangeHandler = (event) => {
    setUserInput({
      ...userInput,
      enteredAmount: event.target.value,
    });
  };
  
  const dateChangeHandler = (event) => {
    setUserInput({
      ...userInput,
      enteredDate: event.target.value,
    });
  };

useState의 값으로 객체를 전달을 해주며, 해당 객체에서는 기존의 3개의 State를 그룹으로 묶어주시고 초기값을 설정해주시면 됩니다.

 

이렇게 되면  3개의 State를 하나의 State로 관리가 가능하게 됩니다.

 

주의하실 점은 State를 업데이트할 때마다 3개의 프로퍼티 모두 업데이트해주어야 한다는 것입니다.

 

setUserInput에 전개 연산자를 작성하지 않고 

 

 setUserInput({
      enteredAmount: event.target.value
    });

위의 코드처럼 사용하시게 되면 기본적으로 다른 key들은 버리게 됩니다.

 

이는 State는 이전 State와  병합하지 않기 때문이며, 단순히 이전 State를 새로운 State로  대체하기 때문입니다.

 

즉 하나의 key-value 쌍을 가지는 객체라면 이전 State는 대체되고 title과 date를 위한 key-value 쌍은 잃어버리게 되는 것입니다.

 

const titleChangeHandler = (event) => {
    setUserInput({
      ...userInput, // 전개 연산자 먼저 사용
      enteredTitle: event.target.value, // 전개 연산자 다음 작성
    });
  };

그렇기 때문에 위의 코드처럼  모든 데이터가 사라지지 않도록 전개 연산자를 사용하여 수동으로 복사해주어야 합니다.

 

여기서 또 한 가지 주의하실 점은 전개 연산자를 먼저 사용해주어야 한다는 것입니다.

 

그런 다음 enteredTitle: event.target.value 를 오버라이드 해줍니다.

 

 

 

단점

위의 변경 코드처럼 State를 사용할 경우 이전 State에 의존한다는 단점이 있습니다.

 

3개의 State로 접근하는 것이 아니라 하나의 State로 접근하고 있기 때문입니다.

 

그래서 다른 값을 복사해서 기존의 값들을 잃어버리지 않도록 해주어야 했습니다.

 

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

때문에 변경 코드를 한 번 더 변경해주었습니다.

 

State를 업데이트하는 setUserInput 함수에 함수를 전달해주었고 전달된 함수는 React에 의해 자동으로 실행되게 됩니다.

 

그리고 업데이트 함수의 State를 위해서 이전 State 객체를 가져와 새로운 State를 반환해주도록 하였습니다.

 

기존의 코드를 사용하게 되면 React가 동시에 수많은 State를 업데이트를 계획한다면 오래되었거난 잘못된 State에 의존할 수도 있습니다.

 

하지만 위의 코드처럼 변경을 해주게되면 React는  가장 최신의 State를 사용할 수 있게됩니다.

 

 

 

 

 

 

 

 

 

 

 

 

기존 코드처럼 독립적인 여러 개의 State를 사용할지, 하나의 State를 사용할지는 선호하는 쪽을 선택하시면 될 것 같습니다.