React에서 value 설정하고도 입력이 가능하게 만드는 방법

 

1. value 속성의 역할

• React에서 <input>이나 <textarea>에 value 속성을 설정하면 해당 입력 필드는 제어 컴포넌트가 된다.
• 즉, value가 React 상태에 의해 고정되므로, 사용자가 직접 입력해도 그 값이 없데이트되지 않는다.
• 입력 값을 바꾸려면 React 상태를 업데이트해야만 변경된다.

function App() {
	return <input type="text" value="고정값" />
}

 

• 이 경우 입력 필드의 값은 "고정 값"으로 고정된다.
• 사용자가 입력을 시도해도 값이 절대로 바뀌지 않는다.

---

2. 자유롭게 입력 가능하게 만들려면?

만약 입력값을 사용자에게 자유롭게 입력하도록 허용하면서도 value를 유지하고 싶다면 다음 방법이 있다.

 

undefined 또는 null을 value로 설정

function App() {
	return <input type="text" value={undefined} />;
}

 

동작 원리

• value가 undefined나 null이면 React는 해당 필드를 비제어 컴포넌트(uncontrolled component)로 간주한다.
• 즉, React 상태로 입력값을 관리하지 않고, DOM이 값을 직접 관리하도록 허용한다.
• 사용자가 입력하는 대로 값을 변경할 수 있다.

 

defaultValue 사용

defaultValue는 초기값만 설정하고 이후 값 변경은 DOM이 관리한다.

function App() {
  return <input type="text" defaultValue="초기값" />;
}

 

동작 원리

• defalutValue는 컴포넌트가 처음 렌더링될 때만 값을 설정한다.
• 이후에는 사용자가 값을 자유롭게 변경할 수 있다.

---

3. value와 자유 입력의 차이

설정	동작 방식	값 변경 가능 여부
value="고정값"	제어 컴포넌트	X
value={undefined} 또는 null	비제어 컴포넌트	O
defaultValue="초기값"	초기값 설정, 비제어	O

 

---

 

4. 추가 예제

 

자유롭게 입력 가능한 예제

function App() {
  return <input type="text" value={undefined} />;
}

 

입력값을 상태로 제어하는 예제

import React, { useState } from "react";

function App() {
  const [text, setText] = useState("");

  const handleChange = (e) => {
    setText(e.target.value); // 상태 업데이트
  };

  return <input type="text" value={text} onChange={handleChange} />;
}

 

---