230731 개발일지 TIL - React에서 form 태그 안에 여러 개의 버튼 태그 사용 시 주의점

React에서 form 태그 안에 여러 개의 버튼 태그 사용 시 주의점

import React, { useState } from 'react';

const Form = () => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('폼 전송');
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        <input type="text" value={inputValue} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
      <button type="button">Clear</button>
      <button type="button">Cancel</button>
    </form>
  );
};

export default Form;

문제점

1. 폼 제출 처리 문제:
   여러 개의 버튼을 사용하면 어떤 버튼이 폼을 제출하는 역할을 수행하는지 명확하지 않을 수 있다. 사용자가 다른 버튼을 누르면 폼이 잘못 제출될 수 있으며, 예기치 않은 결과를 초래할 수 있게 된다.

2. 버튼 이벤트 처리 문제:
   여러 개의 버튼을 사용하면 각 버튼의 클릭 이벤트를 처리하는 것이 복잡해진다.

3. 성능 문제:
   React는 불필요한 리렌더링을 최소화하는 데 최적화되어 있지만, 여러 개의 버튼이 있는 경우 React는 모든 버튼을 관리해야 하므로 성능 저하가 발생할 수 있다.

결론
React에서 form 태그 내에 여러 개의 버튼을 사용하는 것은 사용자 경험과 코드 유지 보수 측면에서 문제가 될 수 있다. 이러한 경우에는 각 버튼의 목적에 따라 적절한 컴포넌트를 만들거나, 폼 외부에서 버튼을 배치하여 혼란을 줄이는 방법을 고려해야 한다. 사용자가 의도치 않은 동작을 하지 않도록 명확하고 직관적인 UI를 구성하는 것도 중요하다.