# 115 [udemy React 완벽 가이드 노트] 제어되는 컴포넌트와 제어되지 않는 컴포넌트

 제어되지 않는 컴포넌트 

---

내부 스테이트이기 때문에 그것들 안으로 반영되는 값은 리액트에 의해 제어되지 않는다.

기본적인 인풋 작동법으로 

사용자가 무언가를 입력하고 

입력값이 반영된다. 

 

인풋에 데이터를 다시 보내지 않는다. 

value와 state로 관리했을 때는 value로 state값을 보내어 

제어하였었지만 지금은 그렇지 않다.

단지 빈 input창을 위해 아래와 같이 사용할 뿐이지만, 

 

   nameInputRef.current.value = "";
   ageInputRef.current.value = "";

여기선 리액트가 사용되지 않는다. 

리액트의 ref를 사용하고 있지만 DOM요소에 접근하기 위한 것일 뿐이다. 

input DOM노드의 DOM 노드 값을 설정한다. 

 

그러니까, input의 state는 리액트에 의해 제어되지 않고 있다. 

 

 

 

우리는 React state를 “신뢰 가능한 단일 출처 (single source of truth)“로 만들어 두 요소를 결합할 수 있습니다. 그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다.

(중략)

제어 컴포넌트로 사용하면, input의 값은 항상 React state에 의해 결정됩니다. 코드를 조금 더 작성해야 한다는 의미이지만, 다른 UI 엘리먼트에 input의 값을 전달하거나 다른 이벤트 핸들러에서 값을 재설정할 수 있습니다.

 

출처:

https://ko.reactjs.org/docs/forms.html#controlled-components

폼 – React