React의 제어 컴포넌트란?

 

React의 제어 컴포넌트란?

입력필드의 값을 React의 상태(state)로 완전히 제어하는 컴포넌트를 말한다. 입력값은 DOM이 아니라 React 상태를 통해 관리되며, 상태가 value 속성으로 입력 필드에 전달된다.

---

 

동작 원리

• React에서 <input>의 value는 React 상태에 의해 결정된다.
• React는 매 렌더링마다 value 속성을 DOM에 전달하여 DOM의 값을 덮어쓴다.
• 사용자가 입력을 변경하더라도 React는 상태를 업데이트하지 않으면, 렌더링 후 값은 여전히 상태에 정의된 값으로 유지된다.

function App() {
  const [text, setText] = React.useState("안녕하세요");

  return <input type="text" value={text} />;
}

 

• 이 경우, value 속성은 항상 text 상태의 값("안녕하세요")으로 설정된다.
• React는 매 렌더링마다 <input>의 value를 다시 설정하기 때문에 사용자가 값을 바꾸더라도 text 상태를 업데이트하지 않으면 값이 변경되지 않는다.
• 따라서, React 상태가 입력 필드의 값을 제어하기 때문에 제어 컴포넌트가 된다.