React에서 입력 필드 다루기

React에서 입력 필드 작업은 상태를 통해 이루어집니다. 각 입력 필드에는 해당 입력 필드의 value를 담고 있는 자체 상태가 할당됩니다.

예제를 살펴보겠습니다. 다음과 같은 입력 필드가 있다고 가정해 보세요:

function App() {
	return <div>
		<input />
	</div>;
}

또한 다음과 같은 상태가 있다고 가정해 보세요:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input />
	</div>;
}

입력 필드의 value 속성에 상태를 연결해 보겠습니다:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input value={value} />
	</div>;
}

이 경우 상태가 변경되면 입력 필드의 텍스트도 반응적으로 변경됩니다.

그러나 이것은 흥미로운 부작용을 발생시킵니다: 이제 브라우저에서 코드를 실행할 때 입력 필드의 텍스트를 변경할 수 없습니다! 이유는: 입력 필드에 텍스트를 입력해도 value 상태가 변경되지 않으므로, 입력 필드의 텍스트도 변경되지 않아야 하기 때문입니다.

직접 시도해 보세요. 제 코드를 복사하여 실행해 보세요. 입력 필드의 텍스트를 변경하려고 해 보세요 - 아무것도 변경되지 않을 것입니다. 브라우저 콘솔을 열어 보세요 - React의 경고 메시지를 볼 수 있을 것입니다. 이 경고는 상태를 입력 필드에 연결했지만 그로 인해 입력 필드가 차단되었음을 알려줍니다.

입력 필드에 텍스트를 입력할 수 있도록 만들어 보겠습니다. 이를 위해서는 입력 시 우리의 상태가 입력 필드의 현재 값으로 변경되도록 해야 합니다.

먼저, 입력 필드에 onChange 이벤트를 부착해야 합니다:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

React에서 이 이벤트는 순수 JavaScript와 다르게 동작합니다. React에서는 입력 필드가 변경되는 즉시 트리거됩니다. 즉, 문자가 입력되거나 삭제될 때 발생합니다.

이제 이벤트 핸들러를 추가해 보겠습니다:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange() {
		
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

이 핸들러에서 입력 필드의 현재 텍스트를 읽어와 setValue 함수를 사용하여 상태에 설정해야 합니다.

문제는 이 함수의 this가 우리의 입력 필드를 가리키지 않는다는 것입니다 - 이것이 React의 특징입니다. 이벤트가 발생한 요소를 얻기 위해서는 event.target를 사용해야 합니다:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target); // 입력 필드 DOM 요소에 대한 참조
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

event.target을 사용하여 입력 필드의 현재 텍스트를 출력해 보겠습니다:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target.value); // 입력 필드의 현재 텍스트
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

이제 입력 필드의 텍스트를 우리의 상태에 기록해 보겠습니다:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

이제 입력 필드에 텍스트를 입력할 수 있습니다. 이렇게 하면 value 상태는 항상 입력 필드의 현재 텍스트를 담게 됩니다.

이것을 쉽게 확인할 수 있습니다. 우리 텍스트의 내용을 단락에 출력해 보세요. 이렇게 하면 입력 필드에 텍스트를 입력할 때 입력한 텍스트가 단락에 자동으로 나타납니다:

function App() {
	const [value, setValue] = useState('');
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
		<p>text: {value}</p>
	</div>;
}

익명 화살표 함수를 사용하여 더 간결한 버전으로 다시 작성할 수 있습니다:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<input value={value} onChange={event => setValue(event.target.value)} />
		<p>text: {value}</p>
	</div>;
}

따라서, 모든 입력 필드를 작동시키기 위해서는 다음이 필요합니다: 해당 입력 필드에 대한 상태를 생성하고, 입력 필드의 value 속성에 상태를 연결하고, 입력 필드에 onChange 이벤트를 부착하고, 이벤트 핸들러에서 입력 필드의 상태를 그 텍스트로 변경합니다.

이러한 작업은 각 입력 필드마다 수행해야 합니다. 즉, 두 개의 입력 필드가 있다면 두 개의 상태와 두 개의 onChange 이벤트 핸들러 함수가 있을 것입니다.

두 개의 입력 필드를 만드세요. 첫 번째 입력 필드의 텍스트는 첫 번째 단락에 출력되고, 두 번째 입력 필드의 텍스트는 두 번째 단락에 출력되도록 하세요.