[React] 제어/비제어 컴포넌트

폼 엘리먼트

---

HTML 폼 엘리먼트(input, textrea,select)는 사용자 입력을 기반으로 폼 엘리먼트 자체의 내부 상태를 관리하고 업데이트한다. 

 

<form>
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Submit" />
</form>

예를 들어, 위의 폼은 사용자에게 name을 입력받도록 되어있다. 대부분의 경우 폼의 제출 버튼을 클릭하게 되면  함수로 처리하기 때문에 사용자가 폼에 입력한 데이터에 접근하도록 하는 것이 편리하다.  데이터에 접근하는 방식에서 제어 컴포넌트와 비제어 컴포넌트 방식으로 나누게 된다.

 

제어 컴포넌트 => React에 의해 값이 제어되는 입력 폼 엘리먼트

비제어 컴포넌트 => React에 의해 값이 제어되지 않는 입력 폼 엘리먼트

 

 

제어 컴포넌트 (Controlled Component)

---

React에 의해 값이 제어된다는 뜻은 React가 사용하는 state 관리의 형태를  통해서 사용자의 입력값을 제어한다는 뜻이다.

 

React의 state 관리

- 해당 컴포넌트 내에서 관리하는 local state

- 부모로 부터 props로 state를 받음

- Context API 또는 리덕스 라이브러리 와 같은 전역 state

 

function App() {
  const [state, setState] = useState('');

  return (
      <input type="text" value={state} onChange={(e) => setState(e.target.value)} />
  );
}

 

사용자가 입력한 값이 들어있는 value에 prop로 state를 넣어 관리하고 값을 변경하기 위해 onChange 이벤트를 통해 새로운 값을 재설정한다.

때문에 입력값이 변경될 떄마다 재렌더링이 일어나게 되고 항상 최신의 상태값을 유지한다.

 

 

 

비제어 컴포넌트 (Uncontrolled Component)

---

React에서 DOM에게 접근하는 방법인 ref를 이용한다. ref.current를 통해 DOM의 값을 참조할 수 있다.

function App() {
  const inputRef = useRef(null);

  return (
      <input type="text" ref={inputRef} />
  );
}

 

 

 

---

 

일반적으로 React에서는 제어 컴포넌트를 사용할 것을 권하지만 제어 컴포넌트는 불필요한 렌더링이 필요없는 경우, 실시간으로 데이터 값을 변경하는 작업이 없다면 비제어 컴포넌트를 사용하는 것이 적절한 방법일 수 있다.

 

 

 

폼 – React

 

비제어 컴포넌트 – React