제어 컴포넌트 입력

텍스트 입력에는 한 가지 질문이 따릅니다. 사용자가 상자에 입력하지만, 컴포넌트도 상태(state)를 가집니다. 그렇다면 텍스트의 주인은 누구일까요? React에서 정답은 state가 소유한다입니다. 이를 제어 컴포넌트(controlled input)라고 부릅니다:

const [name, setName] = useState('');

<input
    value={name}
    onChange={(e) => setName(e.target.value)}
/>

두 개의 와이어가 루프를 형성합니다:

• value={name}: 상자는 항상 상태를 표시합니다
• onChange: 키 입력마다 상자의 현재 텍스트인 e.target.value로 세터를 호출합니다

따라서 텍스트를 입력하면 상태가 업데이트되고, 상태가 다시 렌더링되어 상자에 새 상태가 표시됩니다. 여기서 얻는 이점은 텍스트가 변수에 저장되므로 유효성을 검사하거나, 변환하거나, 지우거나, 페이지의 다른 위치에 표시할 수 있다는 점입니다.