React - Controlling an input with a state variable

예를 들어 <input /> 컴포넌트의 경우 리액트에서 제공하는 상태를 통해 관리하고 있지 않기 때문에 비제어 컴포넌트 입니다.

 

만약 defaultValue 를 통해 초기 값을 전달한다고 하더라도

JSX 는 initial value 를 보여줄뿐 현재 값이 무엇이여야 하는지 제어하지는 않습니다.

 

제어 컴포넌트로 렌더링 하려면 value 라는 props 를 전달하세요 React는 입력이 항상 전달한 값을 가지도록 강제할 것입니다.

 

제어 컴포넌트로 전달되는 value 는 undefined 나 null 이 될 수 없습니다.

만약 초기 값으로 빈 값을 전달하고 싶다면 빈 스트링 으로 상태를 초기화해야 합니다.

 

만약 onChange 없이 value 를 전달한다면 input 컴포넌트에 무언가를 타이핑 할 수 없습니다.

Input 에 value 를 전달하여 제어할 때는 항상 전달한 value 를 갖도록 강제합니다.

따라서 상태를 값으로 전달했지만 onChange 이벤트 핸들러 중에 상태 변수를 동기화하여 업데이트하는 것을 잊어버리면

React 는 모든 키 입력 후 해당 입력을 지정한 값으로 되돌립니다.