Form이란?

양식이라는 뜻을 가지는데 웹을 탐색할 때

이처럼 정보를 입력하는 양식을 볼 수 있는 데

회원가입/로그인할 때 자주 사용되며

첵스박스등 기타 요소들을 form요소라 많이 사용한다.

form은 사용자로부터 입력을 받기 위해 사용하는 것

리액트는 state를 통해 데이터를 관리하는 데 반면 html은 엘리먼트 내부에 각각의 state가 존재한다.

위처럼 사용자의 이름을 입력받는 단순한 html폼이 있는데 이코드는 리액트에서도 잘 동작하지만

js를 통해 사용자가 입력한 값에 접근하기에는 불편한 코드이다.

js코드에서 사용자가 입력한 값에 접근할 수 있어야 더 편리한데

이때 사용되는 것이 controlled component로 사용자가 입력한 값에 접근하고 제어할 수 있다.

통제를 받는 컴포넌트인데 이때 통제하는 것이 리액트

html과 리액트를 보면

이렇게 볼 수 있으며 오른쪽처럼 사용하면 모든 데이터를 state에 관리한다.

우리가 사용하는 함수 컴포넌트에서는 useStatehook을 사용하여 관리할 수 있다.

이처럼 controlled Component는 리액트에서 모든 값을 통제할 수 있다.