React 에서 입력값을 받는 방식

아닙니다. React에서는 입력값을 받는 방식이 여러 가지가 있으며, 꼭 value와 onChange를 설정해야 하는 것은 아닙니다.

✅ React에서 입력값을 받는 방식

React에서 <input>을 사용할 때는 제어 컴포넌트(Controlled Component) 와 비제어 컴포넌트(Uncontrolled Component) 두 가지 방식이 있습니다.

---

1️⃣ 제어 컴포넌트 (Controlled Component)

현재 사용하신 방식으로, React 상태(state)에 값을 저장하고 관리하는 방식입니다.

import { useState } from "react"

function App() {
  const [formData, setFormData] = useState({ pwd: "" })

  const formDataChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value })
  }

  return (
    <div>
      비밀번호: <input type="text" value={formData.pwd} name="pwd" onChange={formDataChange} /> <br />
    </div>
  )
}

export default App

📌 장점:

• React 상태를 이용해 입력값을 동적으로 변경 및 제어 가능
• 입력값을 실시간으로 검사(Validation), 변환, 포맷팅할 수 있음
• 폼 데이터를 쉽게 다룰 수 있음

📌 단점:

• 입력값이 변경될 때마다 리렌더링이 발생하므로, 불필요한 렌더링이 많아질 수 있음

---

2️⃣ 비제어 컴포넌트 (Uncontrolled Component)

React의 상태가 아니라, DOM 자체에서 값을 직접 관리하는 방식입니다.

import { useRef } from "react"

function App() {
  const pwdRef = useRef(null)

  const handleSubmit = () => {
    alert(`비밀번호: ${pwdRef.current.value}`)
  }

  return (
    <div>
      비밀번호: <input type="text" ref={pwdRef} /> <br />
      <button onClick={handleSubmit}>확인</button>
    </div>
  )
}

export default App

📌 장점:

• 렌더링 성능이 좋음 (상태를 변경하지 않기 때문)
• React 상태를 거치지 않고, 바로 값을 가져올 수 있음

📌 단점:

• 입력값이 변경될 때 실시간으로 상태를 반영할 수 없음
• 폼 데이터 관리가 어려울 수 있음

---

🔥 어떤 방식이 더 좋은가?

• 입력값을 실시간으로 관리(검증, 포맷팅)해야 한다면? 👉 제어 컴포넌트(Controlled Component)
• 폼 제출 시에만 값을 가져오고 싶다면? 👉 비제어 컴포넌트(Uncontrolled Component)

제어 컴포넌트가 일반적으로 많이 사용되지만, 성능 최적화가 필요하거나 간단한 입력 필드라면 비제어 컴포넌트도 고려할 수 있습니다. 🚀