제어 컴포넌트 / 비제어 컴포넌트

최종 수정 : 2024-04-17

 

제어 컴포넌트(controlled component)

사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트이다. 즉, 값이 리액트의 통제를 받는 입력 폼 엘리먼트(input form element)를 의미한다.

 

제어 컴포넌트에서는 모든 데이터를 state에서 관리한다. state 값을 변경할 때에는 무조건 setState() 함수를 사용해야 한다. 이처럼 제어 컴포넌트는 리액트에서 모든 값을 통제할 수 있는 구조를 갖고 있다. 값은 항상 최신값을 유지하며, 새로운 입력에 따라 업데이트 한다. 데이터와 UI에서 입력한 값이 동기화되어 잘 나타난다.

 

고유한 id값을 사용

 

import React, { useRef } from 'react';

function Test() {
  return <MyInput />;
}

function MyInput() {
  const inputNode = useRef(null);
  return <input ref={inputNode} />;
}

export default MyInput;

 

언제 사용하면 좋은데?

• 유효성 검사
• 유효한 데이터가 없는 경우 전송 버튼 상태를 disabled로 처리

단점

사용자의 입력때마다 값이 갱신되므로, 불필요한 리렌더링이 발생할 수 있다.

---

비제어 컴포넌트

바닐라 자바스크립트와 크게 다르지 않다. ref로 DOM에 값을 얻어와 사용하는 컴포넌트를 말한다. 그로 인해, 값이 실시간으로 동기화되지 않는다. 즉, 값이 업데이트될 때마다 리렌더링이 되지 않기에 성능상의 이점이 있다.

 

파일

import React, { useRef } from 'react';

function Test() {
  return <MyInput />;
}

function MyInput() {
  const inputNode = useRef(null);
  return <input ref={inputNode} />;
}

export default MyInput;

 

특징	제어 컴포넌트	비제어 컴포넌트
일회성 값 검색	O	O
유효성 검사	O	O
즉각적인 필드 검증	O	X
조건부로 제출 버튼 비활성화	O	X
입력 형식 적용	O	X
하나의 데이터에 대한 여러 입력	O	X
동적 입력	O	X

---

참고 자료

https://ko.legacy.reactjs.org/docs/forms.html

https://ko.legacy.reactjs.org/docs/uncontrolled-components.html

https://goshacmd.com/controlled-vs-uncontrolled-inputs-react/