👨‍🔧 useState 로 input 상태 관리하기

React 에서 사용자의 입력을 받아들이는 input 요소를 다룰 때, input의 상태를 관리해주어야 한다. 이때 useState를 사용하여 input 상태를 관리하기 편하다. 코드로 알아보자.

import React, { useState } from 'react';
function InputComponent() {
  const [inputValue, setInputValue] = useState('');
  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };
  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <p>입력한 값: {inputValue}</p>
    </div>
  );
}
export default InputComponent;

위 코드에서input 요소의 값이 변경될 때마다 handleInputChange 함수가 호출되며, setInputValue 함수를 사용하여 inputValue 상태 값을 변경한다. 이렇게 하면 input 요소의 값을 바꿀 때마다 inputValue 상태 값이 업데이트되며, 입력한 값을 출력할 수 있다.

⚒️ 활용

이번에는 위에서 정리한 내용을 활용하여 Object 형 useState() 를 선언하여 하나의 변수에 여러 값을 담아보자.

import { useState } from "react";
export default function Form() {
  const [form, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: ""
  });
  const handleInput = (e) => {
    setFormData((prev) => {
      return {
        ...prev, [e.target.name]: e.target.value
      };
    });
    console.log(form);
  };
  return (
    <form>
      <input
        name="firstName"
        type="text"
        placeholder="first name"
        onChange={handleInput}
      />
      <input
        name="lastName"
        type="text"
        placeholder="last name"
        onChange={handleInput}
      />
      <input
        name="email"
        type="email"![](https://velog.velcdn.com/images/dev_lheesung/post/175d7006-c330-45e7-87b8-ef8ec67472d4/image.png)

        placeholder="email"
        onChange={handleInput}
      />
    </form>
  );
}

위 코드는 첫번째 이름, 두번째 이름, 이메일을 입력받는 컴포넌트다. 각각의 input 에 식별할 수 있는 이름을 부여했다. handleInput 함수는 input의 변경 이벤트(onChange)를 처리하며, 이 함수는 setFormData 함수를 호출하여 form 상태를 업데이트한다. setFormData 함수는 이전 상태(prev)를 전달받아 새로운 상태를 반환한다. 이때, 전달받은 input의 name 속성을 사용하여 해당 input의 값을 새로운 상태에 반영한다. 이를 위해 전개 연산자(…)를 사용하여 기존 상태의 속성을 유지하면서 새로운 값을 덮어쓴다.