인프런 커뮤니티 질문&답변
작성한 질문수
input value props 를 설정하면 입력이 안되는 이유
작성
·
98
0
export default function FormComponent() {
return (
<form onSubmit={handleSubmit}>
<input name="first" type="text" value="첫번째" />
<input name="second" type="text" value="두번째" />
<button type="submit">Submit 버튼</button>
</form>
);
}위와 같이 input 에 value props 를 설정하면 왜 타이핑이 안되는지 이해가 잘 안됩니다. 순수 HTML 에서는 input 요소의 value 속성은 초기값이고 변화된 현재값은 DOM 의 value 프로퍼티를 통해 가져올 수 있다고 알고있는데 React 에서는 뭐가 달라지길래 value props 를 설정만 하더라도 input 에 입력값이 변화되지 않는 것인지 알고 싶어요!
답변 1
0
안녕하세요 🙂
질문의 핵심은 "왜 JSX에서 value 속성이 변경이 안되는지" 인데요 이를 설명하기 위해서는 HTML과 JSX의 차이를 말씀드릴게요~!
JSX와 HTML의 차이점
HTML에서는
<input>의value는 초기값을 설정하는 속성(attribute)입니다. 이후 사용자의 입력에 따라 DOM 자체가 값을 관리합니다.JSX에서는
value를 설정하면, React가 해당 값을 컴포넌트 상태(State)로 관리합니다. React가 DOM과 독립적으로 상태를 유지하려는 디자인 철학 때문에, JSX의value속성은 HTML의 단순 초기값과 다르게 작동합니다.
왜 입력이 안되는가?
React에서는 value 속성을 JSX에서 설정하면, 해당 값은 React의 렌더링 시점에 DOM에 전달된 후 고정됩니다.
사용자의 입력은 DOM 값만 변경하려 하지만, React는 상태를 통해 value를 DOM에 덮어씌우기 때문에 입력값이 변경되지 않습니다.
예시 코드에서:
<input name="first" type="text" value="첫번째" />이 value="첫번째"는 React가 이 값을 항상 유지하도록 명령합니다. React는 이 value를 컴포넌트 상태나 props로 관리할 준비가 되어 있다고 가정합니다. onChange로 상태를 업데이트하지 않으면 입력값이 변경되지 않습니다.
어떻게 수정해야 하나?
React에서 입력값이 변경되도록 하려면 onChange 이벤트 핸들러를 통해 React 상태를 업데이트해야 합니다.
수정 가능한 <input>을 만들려면:
React 상태를 정의 (
useState).onChange이벤트로 상태를 업데이트.
import { useState } from "react";
export default function FormComponent() {
const [first, setFirst] = useState("첫번째");
return (
<form>
<input
name="first"
type="text"
value={first} // React 상태에 연결
onChange={(e) => setFirst(e.target.value)} // 상태 업데이트
/>
</form>
);
}
감사합니다 🙂