처음 만난 리액트 문서
11.7 Input Null Value
위에서 배운 것처럼 Controlled Component에 value prop을 정해진 값으로 넣으면, 코드를 수정하지 않는 한 입력값을 바꿀 수 없습니다. 만약 value prop은 넣되 자유롭게 입력할 수 있게 만들고 싶다면, 값에 undefined나 null을 넣어주면 됩니다. 아래 예시 코드를 한 번 보도록 하겠습니다.
const root = ReactDOM.createRoot(rootNode);
root.render(<input value="hi" />);
setTimeout(function() {
root.render(<input value={null} />);
}, 1000);
이 코드는 처음에는 input의 값이 hi로 정해져 있어서 값을 바꿀 수 없는 입력불가 상태였다가, timer에 의해서 1초 뒤에 value가 null인 <input>태그가 렌더링 되면서 입력 가능한 상태로 바뀝니다. 이러한 방법을 잘 활용하면 value prop을 넣으면서 동시에 사용자가 자유롭게 입력할 수 있게 만들 수 있습니다.
마지막 업데이트: 2025년 08월 21일 09시 05분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page