React에서는 입력폼을 어떻게 다룰까?

aksen5240·2024년 1월 8일

목록 보기

9/14

📚 React에서는 입력폼을 어떻게 다룰까?

웹 애플리케이션 개발에서 사용자의 입력을 받는 것은 필수적인 부분이다. 특히, 입력 폼을 통해 사용자로부터 다양한 데이터를 수집하고 이를 효과적으로 처리하는 것은 중요한 과제 중 하나일 것이다.

특별하게, React는 동적인 데이터 관리에 강력한 도구인 State를 제공하며, 이를 활용하면 사용자의 입력과 애플리케이션의 상태를 원활하게 연동할 수 있다. 그렇다면 React에서는 입력 폼을 어떻게 다룰까? 어떻게 State를 이용하여 사용자 입력을 효과적으로 관리할 수 있을까?

이에 이번 글을 통해 React에서 입력 폼을 다루는 기본적인 방법과, 제어 컴포넌트 및 비제어 컴포넌트의 개념에 대해 자세히 살펴보고자 한다. React를 이용한 효과적인 폼 관리 방법을 함께 탐구해 보자.

React vs HTML

입력 폼을 다룰 때, React는 HTML과 다른 몇 가지 특징을 가지고 있다.

📌 onChange Prop

React에서는 onChange Prop을 사용하여 입력 값이 바뀔 때마다 핸들러 함수를 실행한다. 이는 HTML의 oninput 이벤트와 유사한데, React 개발에서는 주로 onChange Prop을 사용한다.

📌 htmlFor Prop

HTML에서 태그에 사용되는 for 속성은 JavaScript의 for 반복문 키워드와 겹치므로, React에서는 htmlFor를 사용한다.

React에서 폼을 다루는 기본적인 방법

📌 React에서의 특징

React에서는 주로 input의 값을 State로 관리하는데, 이 때 State의 값과 input의 값을 동일하게 만드는 것이 코드를 구성하는데에 있어 핵심이다.

이를 제어 컴포넌트라고 부르는데, 자세한 내용은 밑에서 다시 언급하도록 하겠다.

📌 State 활용

React에서는 State를 만들고 이벤트 헨들러에서 target.value를 사용하여 값을 변경할 수 있다.

이 때, value Prop으로 state 값을 내려주고, onChange Prop으로 핸들러 함수를 넘겨준다.

function TripSearchForm() {
  const [location, setLocation] = useState("Seoul");

  // location 상태를 업데이트하는 핸들러 함수
  const handleLocationChange = (e) => {
    setLocation(e.target.value);
  };

  return (
    <form>
      <label htmlFor="location">Location:</label>
      <input
        value={location} // input 필드의 값으로 location 상태를 사용
        onChange={handleLocationChange} // input 필드 값이 변경될 때마다 handleLocationChange 함수 호출
      />
      // ...
    </form>
  );
}

순수 JavaScript OnChange vs React OnChange

리액트에서의 OnChange는 순수 자바스크립트에서의 이벤트랑 조금 다르게 동작하는데, 리액트에서는 onInput처럼 사용자가 값을 입력할 때마다 onChange 이벤트가 발생한다.

이 부분은 HTML이랑 다른 점이니 참고해서 기억하도록 하자.

📌 폼 값을 객체 하나로 처리

폼의 입력된 값들을 객체 하나로 처리할 수도 있다. 이 방법에서는 input태그의 name 속성을 사용하는 것이 핵심인데, 이벤트 객체에서 name값을 가져올 수 있다는 점을 활용한 개념이다.

이와같이 폼 값을 객체 하나로 처리하게 되면, 객체형 state 하나로 여러 입력 값을 처리할 수 있다는 장점을 가지고 있다. 이는 여러 개의 상태를 별도로 관리하는 것보다 효율적이고, 코드의 가독성 또한 높여준다.

아래 코드는 폼 입력값을 단일 객체 상태로 관리하는 방법을 보여주는 예제로, 각 입력 필드의 name 속성을 활용하여 이벤트 핸들러에서 다양한 입력값을 효율적으로 처리할 수 있게 해준다.

function TripSearchForm() {
  const [values, setValues] = useState({
    location: 'Seoul',
    checkIn: '2022-01-01',
    checkOut: '2022-01-02',
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues((prevValues) => ({
      ...prevValues,
      [name]: value,
    }));
  };

  // ...
}

📌 기본 submit 동작 막기

HTML 폼의 기본 동작은 submit 버튼을 눌렀을 때 입력 폼의 값과 함께 GET 리퀘스트를 보내는 것이다. 그래서 기본동작을 막아주어야 하는데, preventDefault를 사용하면 이 동작을 막을 수 있습니다.

const handleSubmit = (e) => {
  e.preventDefault(); // 기본 submit 동작을 막음
};

return (
  <form onSubmit={handleSubmit}>  {/* 폼 제출 시 handleSubmit 함수 호출 */}
      // ...
    <button type="submit">Search</button>
  </form>
);

제어 컴포넌트와 비제어 컴포넌트

📌 제어 컴포넌트

제어 컴포넌트는 input의 value값을 리액트에서 지정하고 사용하는 방식이다.

제어 컴포넌트에서는 리액트에서 사용하는 값과 실제 input의 값이 항상 일치하기 때문에 동작을 예측하기 쉽고, input값을 여러 군데에서 쉽게 바꿀 수 있다는 장점이 있다. 이에, 리액트에서는 되도록이면 제어 컴포넌트를 권장한다.

📌 비제어 컴포넌트

비제어 컴포넌트는 input 태그의 value 속성을 React에서 지정하지 않고 사용하는 방식이다.

이는 주로 파일 선택과 같은 특정 상황에서 사용된다.

function TripSearchForm({ onSubmit }) {
  return (
    <form onSubmit={onSubmit}>
      <input id="location" name="location" placeholder="어디로 여행가세요?" />
      // ...
    </form>
  );
}

Outro

이번 글을 통해 React의 다양한 입력 폼 처리 방식과 제어 컴포넌트, 비제어 컴포넌트의 개념을 살펴보았다. 특히, React의 State를 활용하여 애플리케이션의 동적인 부분을 효과적으로 관리하는 방법에 초점을 맞춰 학습해 보았으며, 이를 통해, 입력 폼을 통한 사용자의 입력을 안정적이고 효율적으로 다루는 방법의 중요성을 이해할 수 있었다.

올바른 입력 폼을 사용해 보다 정확하게 데이터 처리를 진행하고, 사용자 입력을 효과적으로 관리할 수 있도록 나아가보자.