[React/JS] useState - 여러 개의 input 상태 관리하기

저는 비밀번호 변경을 예시로 구현하겠습니다!

우선 최종 코드입니다. 😊

import * as React from "react";

export default function PasswordChange() {
  // input 컴포넌트의 id 선언
  // 현재 비밀번호
  const CURRENT_PASSWORD = "currentPassword";
  // 새 비밀번호
  const NEW_PASSWORD = "newPassword";
  // 새 비밀번호 확인
  const NEW_PASSWORD_CONFIRM = "newPasswordConfirm";

  // input 컴포넌트에 맞는 id변수 들
  const [inputs, setInputs] = React.useState({
    currentPassword: "",
    newPassword: "",
    newPasswordConfirm: ""
  });

  const { currentPassword, newPassword, newPasswordConfirm } = inputs; // inputs에서 비구조화 할당을 통해 값 추출

  // 비밀번호 입력
  const handleInput = (event) => {
    const { id, value } = event.target;

    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [id]: value // id 키를 가진 input만의 value로 설정
    });
  };

  return (
    <div>
      <div>
        <input
          id={CURRENT_PASSWORD}
          placeholder="비밀번호"
          value={currentPassword}
          onChange={handleInput}
        />
      </div>
      <div>
        <input
          id={NEW_PASSWORD}
          placeholder="새 비밀번호"
          value={newPassword}
          onChange={handleInput}
        />
      </div>
      <div>
        <input
          id={NEW_PASSWORD_CONFIRM}
          placeholder="새 비밀번호 확인"
          value={newPasswordConfirm}
          onChange={handleInput}
        />
      </div>
    </div>
  );
}

 

 

필요한 컴포넌트 구현

PasswordChange.js

export default function PasswordChange() {

  return (
    <div>
      <div>
        <input placeholder="비밀번호" />
      </div>
      <div>
        <input placeholder="새 비밀번호" />
      </div>
      <div>
        <input placeholder="새 비밀번호 확인" />
      </div>
    </div>
  );
}

 

 

input 컴포넌트에 id 선언

각 input의 id를 선언해줍니다.

PasswordChange.js

export default function PasswordChange() {
  // input 컴포넌트의 id 선언
  // 현재 비밀번호
  const CURRENT_PASSWORD = "currentPassword";
  // 새 비밀번호
  const NEW_PASSWORD = "newPassword";
  // 새 비밀번호 확인
  const NEW_PASSWORD_CONFIRM = "newPasswordConfirm";

  return (
    <div>
      <div>
        <input id={CURRENT_PASSWORD} placeholder="비밀번호" />
      </div>
      <div>
        <input id={NEW_PASSWORD} placeholder="새 비밀번호" />
      </div>
      <div>
        <input id={NEW_PASSWORD_CONFIRM} placeholder="새 비밀번호 확인" />
      </div>
    </div>
  );
}

 

 

제어 함수 구현

참고를 위해 입력 event.target를 콘솔로 찍어 id 와 value 값을 확인해보겠습니다.

event.target

📌 handleInput() 함수에서 const { id, value } = event.target; 로 id, value를 추출해냅니다.

import * as React from "react";

export default function PasswordChange() {
  // input 컴포넌트의 id 선언
  // 현재 비밀번호
  const CURRENT_PASSWORD = "currentPassword";
  // 새 비밀번호
  const NEW_PASSWORD = "newPassword";
  // 새 비밀번호 확인
  const NEW_PASSWORD_CONFIRM = "newPasswordConfirm";

  // input 컴포넌트에 맞는 id들
  const [inputs, setInputs] = React.useState({
    currentPassword: "",
    newPassword: "",
    newPasswordConfirm: ""
  });

  const { currentPassword, newPassword, newPasswordConfirm } = inputs; // inputs에서 비구조화 할당을 통해 값 추출

  // 비밀번호 입력
  const handleInput = (event) => {
    const { id, value } = event.target;

    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [id]: value // id 키를 가진 input만의 value로 설정
    });
  };

  return (
    <div>
      <div>
        <input
          id={CURRENT_PASSWORD}
          placeholder="비밀번호"
          value={currentPassword}
          onChange={handleInput}
        />
      </div>
      <div>
        <input
          id={NEW_PASSWORD}
          placeholder="새 비밀번호"
          value={newPassword}
          onChange={handleInput}
        />
      </div>
      <div>
        <input
          id={NEW_PASSWORD_CONFIRM}
          placeholder="새 비밀번호 확인"
          value={newPasswordConfirm}
          onChange={handleInput}
        />
      </div>
    </div>
  );
}

 

 

비효율적일 수 있는 코드...! 🤔

각 value에 맞는 함수를 일일이 작성해주어야 하기 때문에 번거로울 수 있습니다. 😊😊

import * as React from "react";

export default function App() {
  // 비밀번호
  const [currentPassword, setCurrentPassword] = React.useState("");
  // 새 비밀번호
  const [newPassword, setNewPassword] = React.useState("");
  // 새 비밀번호 확인
  const [newPasswordConfirm, setNewPasswordConfirm] = React.useState("");

  // 비밀번호 입력 제어 함수
  const handleCurrentPassword = (event) => {
    setCurrentPassword(event.target.value);
  };
  // 새 비밀번호 입력 제어 함수
  const handleNewPassword = (event) => {
    setNewPassword(event.target.value);
  };
  // 새 비밀번호 확인 입력 제어 함수
  const handleNewPasswordConfirm = (event) => {
    setNewPasswordConfirm(event.target.value);
  };

  return (
    <div>
      <div>
        <input
          placeholder="비밀번호"
          value={currentPassword}
          onChange={handleCurrentPassword}
        />
      </div>
      <div>
        <input
          placeholder="새 비밀번호"
          value={newPassword}
          onChange={handleNewPassword}
        />
      </div>
      <div>
        <input
          placeholder="새 비밀번호 확인"
          value={newPasswordConfirm}
          onChange={handleNewPasswordConfirm}
        />
      </div>
    </div>
  );
}

 

굿!