제어컴포넌트(Controlled Component)

제어컴포넌트는 React 의 state 로 view 를 관리하는 것입니다.
input tag 의 value 와 onChange 값을 둘 다 지정함으로서, view 와 state 의 싱크를 컨트롤 하는 것이죠.

function MyInput() {
	const [value, setValue] = useState('');
	const onChange = (e) => {
		setValue(e.target.value);
	}

	return (
		<input value={value} onChange={onChange}></input>
	)
}

비제어 컴포넌트(unControlled Component)

비제어컴포넌트는 위 방식과는 다르게, view 의 값을 제어하지 않습니다.
즉, input tag 의 view 를 따로 관리하지 않습니다.

그 대신, 입력이 끝나면 ref 를 통해 값을 받아오거나, state 를 통해 값을 저장하고 있기만 합니다.

비제어 컴포넌트 - state 로 값만 저장함.

function MyInput() {
	const [value, setValue] = useState('');
	const onChange = (e) => {
		setValue(e.target.value);
	}

	return (
		<input onChange={onChange}></input>
	)
}

비제어 컴포넌트 - ref 로 최종적으로 값을 가져옴

function MyInput() {
	const inputRef = useRef(null);

	const onSubmit = () => {
		fetch('post', inputRef.current.value);
	}

	return (
		<form onSubmit={onSubmit}>
			<input ref={inputRef}></input>
		</form>
	)
}