사용자입력: input

React에서는 input 요소를 다루는 방법을 알면 다양한 사용자 입력을 쉽게 처리할 수 있다.
이번 포스트에서는 한 개의 input 요소를 다루는 방법과 여러 개의 input 요소를 다루는 방법에 대해 설명하겠다.

input 요소 다루기

한 개의 input 요소를 다루는 가장 기본적인 방법은 useState Hook을 사용하는 것이다. 다음은 사용자가 입력한 값을 상태로 관리하는 간단한 예제이다.

import React, { useState } from 'react';

function SingleInput() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <p>입력한 값: {value}</p>
    </div>
  );
}

export default SingleInput;

위 예제에서 useState Hook을 사용하여 value라는 상태 변수를 선언하고, handleChange 함수에서 input 요소의 변경 이벤트를 처리한다. handleChange 함수는 event.target.value를 사용하여 input 요소의 현재 값을 가져오고, 이를 setValue 함수를 통해 상태로 업데이트한다.

여러 개의 input 요소 다루기

여러 개의 input 요소를 다룰 때는 각 input 요소의 값을 개별적으로 상태로 관리하거나, 하나의 객체로 관리할 수 있다.
이번에는 하나의 객체로 여러 개의 input 요소를 관리하는 예제를 소개하겠다.

import React, { useState } from 'react';

function MultipleInputs() {
  const [formValues, setFormValues] = useState({
    firstName: '',
    lastName: '',
    email: ''
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormValues({
      ...formValues,
      [name]: value
    });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Submitted:', formValues);
  };

  const handleReset = () => {
    setFormValues({
      firstName: '',
      lastName: '',
      email: ''
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          First Name:
          <input
            type="text"
            name="firstName"
            value={formValues.firstName}
            onChange={handleChange}
          />
        </label>
      </div>
      <div>
        <label>
          Last Name:
          <input
            type="text"
            name="lastName"
            value={formValues.lastName}
            onChange={handleChange}
          />
        </label>
      </div>
      <div>
        <label>
          Email:
          <input
            type="email"
            name="email"
            value={formValues.email}
            onChange={handleChange}
          />
        </label>
      </div>
      <button type="submit">Submit</button>
      <button type="button" onClick={handleReset}>Reset</button>
    </form>
  );
}

export default MultipleInputs;

위 예제에서 useState Hook을 사용하여 formValues라는 상태 변수를 선언하고, 각 input 요소의 name 속성을 사용하여 상태를 업데이트한다. handleChange 함수는 이벤트 타겟의 name과 value를 가져와서 해당 값을 상태 객체에 업데이트한다. 이를 통해 여러 개의 input 요소를 효율적으로 관리할 수 있다.

또한 handleSubmit 함수에서는 폼 제출 시 기본 동작을 막고, 현재 상태 값을 콘솔에 출력하여 입력된 값을 확인할 수 있다.

event.preventDefault()는 JavaScript에서 이벤트의 기본 동작을 막는 역할을 한다.
기본 동작이란 브라우저가 이벤트에 대해 기본적으로 수행하는 동작을 의미한다. 예를 들어, 폼 제출 시 페이지가 새로 고침되는 것, 링크 클릭 시 다른 페이지로 이동하는 것 등이 있다.
React에서도 이 메서드를 사용하여 기본 동작을 막을 수 있다. 특히 폼 제출 이벤트를 처리할 때 유용하다. 폼이 제출되면 브라우저는 기본적으로 페이지를 새로 고침하지만, event.preventDefault()를 사용하면 페이지가 새로 고침되지 않도록 막을 수 있다. 이를 통해 JavaScript 코드에서 폼 제출 이벤트를 처리하고, 필요한 동작을 수행할 수 있다.

...formValues는 spread문법으로 객체를 복사한다. (추후에 자세히 다룰 예정)

해당 게시글은 chat-GPT의 도움을 받아 작성되었습니다.

출처 :
chat-GPT