리액트에서 사용자 입력 제출할 때 뭐 쓰시나요
전 별 신경쓰지 않고 아무거나 생각나는거 쓰는 편이었는데
막상.. 생각해보니 어라? 싶어서 그냥 써보는 글입니다
이런 글을 좀 참고했을지도?

둘 다 React의 useState로 사용자의 입력을 관리하는 경우로 예시를 들었습니다

onClick

export default function UsingClick() {
  const [text, setText] = useState("")
  const [result, setResult] = useState("")
  const onClick = e => {
    setResult(text)
  }
  return (
    <div className="App">
      <div>
        <h3>Input Using onClick</h3>
        <input value={text} onChange={e => setText(e.target.value)} />
        <button onClick={onClick}>제출</button>
      </div>
      <h2>{result}</h2>
    </div>
  )
}

대충 이렇게 하겠죠?

그냥 간단히 <button onClick={}> 이렇게 쓰는 것입니다
어디서든 <button>을 적절한 onClick에만 연결해주면 후속처리를 진행할 수 있습니다.

그냥 이게 다인데..
이 onClick은 버튼 뿐만 아니라 어디에도 범용적인 이벤트 핸들러라는 점이 특징이겠네요
그리고 클릭 핸들러로 하기 때문에, 진짜 클릭해야 한다는 점입니다

onSubmit

아시겠지만 onSubmit의 경우에는 꼭 form으로 감싸고
버튼의 타입이 type="submit"이어야 합니다.

export default function UsingSubmit() {
  const [text, setText] = useState("")
  const [result, setResult] = useState("")
  const onSubmit = e => {
    e.preventDefault()
    setResult(text)
  }
  return (
    <div className="App">
      <div>
        <h3>Input Using onSubmit</h3>
        <form onSubmit={onSubmit}>
          <input value={text} onChange={e => setText(e.target.value)} />
          <button type="submit">제출</button>
        </form>
      </div>
      <h2>{result}</h2>
    </div>
  )
}

이처럼 onSubmit을 써먹으려면 이를 통합 관리하는 <form>태그가 있어야 하고
이 <form>태그에 onSubmit이 등록됩니다

그런데 onClick과는 좀 다른게
이렇게 제출하면 기본적으로 새로고침이 발생합니다
리액트 입장에서는 이게 state도 초기화되고 아주. 귀찮을 수 있습니다
따라서 필요한 경우 onSubmit함수에 인자로 들어오는 이벤트 객체 e를 가져다가
e.preventDefault()과 같이 작성하여 새로고침을 방지해줍시다
그래야 onClick과 비슷하게 쓸 수 있습니다

그리고 한 가지 onClick과 비교되는 특징은
<form> 내에 속한 입력란에 포커스가 있는 채로 엔터를 눌러도 제출된다는 점입니다
이를 이용하여 굳이 클릭하지 않아도 엔터로 제출을 해결하게 할 수 있으므로
조금의 UX 개선에 도움이 될지도?

onClick vs. onSubmit 예제

위에서 쓴 예제 코드 허투루 쓴게 아닙니다
오늘도 샌드박스로 좀 가져왔습니다

위에서 살펴본 차이점(onSubmit은 엔터로 가능함 등..)을 한번 살펴보십쇼

끝

입니다. 진짜로
알아서 상황에 맞게 쓰면 되겠습니다