input 여러 개의 상태를 한 번에 관리하기 | React

문제상황👀

예약페이지를 구현 중 이름, 휴대폰번호, 쿠폰, 포인트를 input으로 관리해야 했다. 처음엔 각각의 state로 관리했는데 그렇게 하니 input의 값이 변경되는 함수도 각각 작성해야하는 불편함이 있었다.

해결방안👏

관리해야 하는 inpute의 값을 각각의 state로 만들지 않고, input들의 값을 객체에 넣어서 하나의 state로 관리.

실제로 사용한 코드의 요약본

//연관된 input을 하나의 state로 관리
const [inputs, setInputs] = useState({
    userName: '',
    phone: '',
    coupon: 0,
    pointInput: '',
  });

//비구조화 할당으로 값 추출
const { userName, phone, coupon, pointInput } = inputs;

//하나의 함수에서 input 전체의 값 관리
const changeInput = (e) => {
    const { id, value } = e.target;  //비구조화 할당으로 e.target에서 값 추출
    setInputs({
      ...inputs,   //기존의 input객체 복사
      [id]: value, //변경되는 부분 반영
    });
  };

return( 
  //input 간략한 예시. 이때 inputs state 객체의 키와 input의 id가 같아야 한다.
  //id 대신 name으로 설정해도 됨. 그러면 changeInput함수도 [name]:value가 되어야 함
  <input id="userName" placeholder="이름" value={userName} onChange={changeInput} />
  <input id="phone" placeholder="휴대폰번호" value={phone} onChange={changeInput}/>
  <input id="coupon" value={coupon} onChange={changeInput}/>
  <input id="pointInput" value={pointInput} onChange={changeInput}/>
)

input을 하나의 상태로 관리할 경우의 장점

• 코드가 짧아진다.
• 중복되는 형태의 코드가 없어진다.
• 관계된 데이터를 한번에 관리하니 서로의 관계를 파악하기 쉽다. = 가독성이 좋다.

Reference