[React] input 엘리먼트에 value 속성만 지정했을때 값이 입력불가한 현상 해결방법

Jsp 기반의 html에서는 input 엘리먼트에 value 속성이 지정된 것과 상관없이 입력이 가능한데 React에는 value 속성만 지정하면 값이 입력되지 않는 현상이 있다.

 

input 엘리먼트에 value 속성만 지정하면 value 속성으로만 값을 컨트롤할 수 있는 권한이 있기 때문에 (사용자가 값을 입력하는 권한이 없어) input 안에 값이 입력되지 않는다.

 

해결방법은 onChange를 써서 input 엘리먼트를 수정할 수 있는 상태로 만들어줘야된다.

 

소스

const [value, setValue] = useState('');       const onChange = useCallback(e => {         setValue(e.target.value);     }, []);       return (         <form className="TodoInsert">             <input placeholder="입력 테스트"                     value={value}                    onChange={onChange}             />         </form>     );

 

출처 : [책] 리액트를 다루는 기술 10장