상태를 가지고 있는 엘리먼트들

예)

• input
• select
• textarea
• ...

개요

엘리먼트의 '상태' 를 누가 관리하느냐에 따라서

• 엘리먼트를 가지고 있는 컴포넌트가 관리한다면,
  Controlled 컴포넌트

• 엘리먼트의 상태를 관리하지 않고, 엘리먼트의 참조만 컴포넌트가 소유한다면,
  Uncontrolled 컴포넌트

리액트 공식문서에서도 확인할 수 있습니다.

Controlled Component

예시 코드

컴포넌트안에 엘리먼트가 존재하고, 그 엘리먼트의 value 값을 해당 컴포넌트 안의 state에서 관리하고 있습니다.

UnControlled Component

UnControlled Component는 레퍼런스라고 하는 매우 중요한 API를 사용하게 됩니다.
그래서 UnControlled Component 를 배우는 시간이지만, 레퍼런스를 이해하는 시간이라고 생각하면 좋을 것 같습니다.

레퍼런스 생성 코드 : inputRef = React.createRef();

예시 코드

state에서 엘리먼트의 value 값을 관리하지 않습니다.
state로 관리하지 않아, setState()로 인한 state의 변화에 따라 render가 다시 일어나는 경우가 없습니다.
즉, 값의 단순 참조만 가능합니다.
참고로 단순 값의 참조를 할 경우에 리얼DOM에 직접 접근하는 코드 작성은 React에서 지양합니다. 그래서 나온 기술이 레퍼런스입니다.

레퍼런스 vs querySelector

React에서는 리얼DOM에 직접 접근하는 것을 지양합니다.
querySelector나 getElementbyId 로 직접 접근하지 않고, React.createRef()로 레퍼런스를 생성하여,
그 반환값을 엘리먼트 태그의 ref 속성의 값으로 넣어줍니다.
그 주소값으로 접근하면 해당 엘리먼트로 접근할 수 있습니다.
엘리먼트의 현재값을 얻고 싶다면, 레퍼런스.current.value 로 얻을 수 있습니다.

Controlled Component VS Uncontrolled Component

계속적인 state의 변화가 일어나며 그 때 마다 UI가 변경되며 보여주고 싶다면, Controlled Component 를 사용하는 것이 맞습니다.
예를 들어 input 안의 값이 변경 될때마다 검사하여 input 의 색을 바꾼는 경우.

반대로 UnControlled Component 경우,
예를 들어 input에 마우스를 올리면 input의 색을 바꾸는 경우, 레퍼런스로 input 참조값을 얻어 변경해 줄 수있습니다.