작성한 질문수 8

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>을 만들려면:

1. React 상태를 정의 (useState).

2. 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>
  );
}

감사합니다 🙂