controlled components는 사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트입니다. 이름 그대로 누군가의 통제를 받는 컴포넌트인데, 여기서 그 누군가는 바로 리액트입니다. 정리하면, controlled components는 그 값이 리액트의 통제를 받는 input form element 를 의미합니다. 아래 그림을 한 번 보도록 하겠습니다.

위 그림에서 왼쪽은 HTML form을 나타낸 것이고, 오른쪽은 Controlled Component를 나타낸 것입니다. HTML form에서는 각 element가 자체적으로 state를 관리하게 됩니다. 그래서 <input>, <textarea>, <select>이 각각 내부에 state를 갖고 있습니다. 이렇게 되면 아무래도 자바스크립트 코드를 통해 각각의 값에 접근하기가 쉽지 않습니다.

하지만 오른쪽에 나와 있는 Controlled Component에서는 모든 데이터를 state에서 관리합니다. 또한 앞에서 배운 것처럼 state의 값을 변경할 때는 무조건 setState()함수를 사용하게 됩니다. 참고로 위 그림은 클래스 컴포넌트를 기준으로 그린 것이고, 함수 컴포넌트에서는 useState()훅을 사용하여 state를 관리합니다. 이처럼 Controlled Component는 리액트에서 모든 값들을 통제할 수 있는 구조를 갖고 있습니다. 아래 코드는 위에서 나왔던 사용자의 이름을 입력받는 HTML form을 리액트의 Controlled Component로 만든 것입니다.

function NameForm(props) {
    const [value, setValue] = useState('');

    const handleChange = (event) => {
        setValue(event.target.value);
    }

    const handleSubmit = (event) => {
        alert('입력한 이름: ' + value);
        event.preventDefault();
    }

    return (
        <form onSubmit={handleSubmit}>
            <label>
                이름:
                <input type="text" value={value} onChange={handleChange} />
            </label>
            <button type="submit">제출</button>
        </form>
    )
}

이 코드에서 <input>태그에 value={value}부분을 볼 수 있는데, 이 부분은 값을 리액트 컴포넌트의 state에서 가져다가 넣어주는 것입니다. 그래서 항상 state에 들어있는 값이 input에 표시되게 됩니다. 또한 입력값이 변경되었을 때 호출되는 onChange에는 onChange={handleChange}처럼 handleChange함수가 호출되도록 했는데, handleChange함수에서는 setValue()함수를 사용해서 새롭게 변경된 값을 value라는 이름의 state에 저장합니다.

참고로 onChange콜백 함수의 첫 번째 파라미터인 event는 이벤트 객체를 나타냅니다. 그리고 event.target은 현재 발생한 이벤트의 타겟을 의미하며, event.target.value는 해당 타겟의 value 속성의 값을 의미합니다. 즉, 여기에서의 타겟은 input 엘리먼트가 되며, event.target.value는 input 엘리먼트의 값이 됩니다.

이처럼 Controlled Component를 사용하면, 입력값이 리액트 컴포넌트의 state를 통해 관리됩니다. 이 말은 여러 개의 입력 양식의 값을 원하는 대로 조종할 수 있다는 것이기도 합니다. 입력 양식의 초기값을 내가 원하는 대로 넣어줄 수도 있으며, 다른 양식의 값이 변경되었을 때 또 다른 양식의 값도 자동으로 변경시킬 수 있다는 것입니다. 예를 들어 사용자가 입력한 모든 알파벳을 대문자로 변경시켜서 관리하고 싶다면, 아래 코드와 같이 하면 됩니다.

const handleChange = (event) => {
    setValue(event.target.value.toUpperCase());
}

handleChange()함수로 들어오는 이벤트의 타겟 값을 toUpperCase()함수를 사용하여 모두 대문자로 변경한 뒤에, 그 값을 state에 저장하는 것이죠. 이처럼 Controlled Component를 통해 사용자의 입력을 직접적으로 제어할 수 있습니다.