[React] useState 하나로 상태 관리하기: Input 필드 예제

React에서 useState를 하나만 사용하여 여러 개의 상태를 관리하는 방법을 살펴본다. 특히, 입력 필드를 관리하는 예제를 통해 이 방법의 유용성을 알아보자.

상태를 객체로 묶어 관리하기

입력 필드가 여러 개 있는 폼에서 상태를 관리할 때, 각각의 필드에 대해 개별적으로 useState를 사용할 수도 있지만 이는 상태가 많아질 경우에 관리가 어렵고 가독성이 안 좋아지는 등의 문제가 생길 수 있다. 대신 하나의 객체로 상태를 묶어 관리할 수 있다. 이 방법은 상태를 더 쉽게 관리하고, 관련된 데이터를 함께 처리할 수 있게 해준다.

예제 코드

다음은 username과 message 두 개의 입력 필드를 가진 간단한 React 컴포넌트의 예제 코드다:

import React, { useState } from 'react';

const EventPractice = () => {
  const [form, setForm] = useState({
    username: '',
    message: ''
  });
  const { username, message } = form;

  const onChange = e => {
    const { name, value } = e.target;
    setForm({
      ...form,
      [name]: value
    });
  };

  return (
    <div>
      <input
        type="text"
        name="username"
        placeholder="유저명"
        value={username}
        onChange={onChange}
      />
      <input
        type="text"
        name="message"
        placeholder="메시지"
        value={message}
        onChange={onChange}
      />
    </div>
  );
};

export default EventPractice;

코드 설명

1. 상태 객체 생성:

useState 훅을 사용하여 form이라는 객체로 username과 message를 관리한다. 초기 상태는 빈 문자열로 설정된다.

   const [form, setForm] = useState({
     username: '',
     message: ''
   });

2. 상태 업데이트:

onChange 함수는 입력 필드에서 값이 변경될 때 호출된다. name과 value를 사용하여 form 객체의 해당 필드를 업데이트한다. id가 있다면 id를 이용해도 된다.

   const onChange = e => {
     const { name, value } = e.target;
     setForm({
       ...form,
       [name]: value
     });
   };

3. 입력 필드와 버튼 렌더링:

두 개의 입력 필드와 버튼을 렌더링하며, 각각의 입력 필드는 onChange 핸들러를 통해 상태를 업데이트한다.

   return (
     <div>
       <input
         type="text"
         name="username"
         placeholder="유저명"
         value={username}
         onChange={onChange}
       />
       <input
         type="text"
         name="message"
         placeholder="메시지"
         value={message}
         onChange={onChange}
       />
     </div>
   );

정리

하나의 useState 훅으로 객체 형태로 상태를 관리하면 여러 입력 필드의 값을 간편하게 처리할 수 있다. 이 방법은 상태를 보다 체계적으로 관리하고, 관련 데이터를 함께 묶어 작업할 수 있는 장점이 있다. 입력 필드가 많거나 상태가 복잡한 경우, 이 방식을 통해 코드의 유지보수성과 가독성을 향상시킬 수 있다.