📚 Reference

📜 Chapter

React-Hook-Form

‣

Controlled components

• controlled components
• 컨트롤드 컴포넌트
• 제어 컴포넌트
• 클래스로 제공하는 React component는 상태 관리를 위한 내부 변수 state를 가지고 있다.
• 이 값을 input의 value로 지정하면 state가 변경될 때마다 input 엘리먼트가 반응한다.
• 상태를 변경하는 방법도 필요한데 Component 클래스의 setState() 메서드가 이 역할을 한다.
• 이 메서드를 통해 상태를 관리해야 컴포넌트는 상태의 변화를 인지할 수 있고 이 변화는 곧장 UI까지 영향을 미친다.
• 이렇게 input 엘리먼트 자체의 상태 관리를 사용하지 않고 React component가 관리하는 것을 제어 컴포넌트(Controlled Component)라고 부른다.
• 컨트롤드 컴포넌트는 React 상태(state)에 의해 입력값이 결정되는 컴포넌트를 말한다.

동작 방식

• 사용자가 입력을 시도하면 onChange 핸들러가 발생하고, 이 핸들러가 React의 state를 업데이트한다. 이후 업데이트된 state가 다시 input의 value로 주입된다.

핵심