221208 TIL(uncontrolled vs controlled)

form의 요소인 html 태그들은 <input>, <textarea>, <select>가 존재 

<form>
  <input type="text" name="id" />
</form>

위와 같이 단순하게 form 요소를 구성하여 사용자의 입력에 따라 값을 업데이트 시킬 수 있다.

즉 HTML input `스스로` 유지하고 사용자의 입력에 따라 state(상태)가 업데이트가 되는 것이다. 

 

위 코드는 똑같이 React로 구성할 수 있지만 

React는 자체적으로 State을 관리하고 필요 시 자식 컴포넌트로 props로 내려주는 방식을 사용한다. 

 

React 컴포넌트에서 HTML form 요소들을 사용한다는 의미는 

React 컴포넌트에서도 State을 가지고 있고 HTML form 요소에서도 State을 동시에 가지고 있는 것이다.

 

하지만 이것는 React의 single source of truth의 원칙을 위배하므로 React의 State 하나로만 사용하여 이 위배된 원칙을 해소하는 것이

다. 이러한 방식을 controlled component라고 부른다. 

 

반대로 uncontrolled components는 React State가 아닌 HTML State을 사용하는 것이라 보면 된다 .

 

Controlled 방식

- React의 State(useState)으로 value를 관리하고

onChange의 함수를 통해 setState이 일어가 State이 업데이트가 된다.

이때 업데이트된 state은 렌더링을 통해 input의 value 속성에 들어가게 된다.

이 것은 리액트스러운 방식이나 단점 또한 존대한다.

 

단점은 input에 대한 useState과 Handler를 매번 선언해줘야 하줘야 할 수 있다는 점이다. 

그리고 리렌더링이 state이 업데이트 될 때 마다 일어난다.

 

 

Uncontrolled 방식

- React State이 아닌 HTML State으로 관리한다.

 그 결과 controlled 방식처럼 State과 그것을 업데이트 하는 작업이 불필요하게 됨 

- 리렌더링 측면에서도 React State을 사용하지 않기 때문에 영향이 없게 된다.

- Submit 시점에서 값을 가져오는 단순한 시나리오라면 이러한 방식도 나쁘지 않다.

 

하지만 controlled 방식과 달리 State을 직접 가지고 있지 않기 때문에 기능적으로 제한이 많다. 

 

Warning

Warning은 controlled와 uncontrolled를 혼합해서 사용했을 때 발생한다. 

 

Warning: Input contains an input of type text with both value and defaultValue props...

위 warning은 아래 코드에서 발생할 수 있는데 

<input value={value} onChange={handleChange} defaultValue={'initial'} />

defaultValue는 uncontrolled 방식에서 초기 값을 위해 사용되는 속성이므로 controlled 방식에서는 무의미한 속성이다.

 

Warning: A component is changing an uncontrolled input to be controlled...

위 warning은 아래 코드에서 발생할 수 있다.

const Component = () => {
  const [value, setValue] = useState()

  useEffect(() => {
    setValue('')
  }, [])

  const handleChange = (e) => { setValue(e.target.value) }
  
  return (
    <input type="text" value={value} onChange={handleChange} />
  )
}

input의 value 속성을 사용하는 것은 controlled 방식을 의미하나 useState 선언 당시 아무것도 할당하지 않아 value의 초기값이 undefined이다. 

 

이때 우리는 controlled 방식을 원했지만 React는 undefined를 보고 input에 대해 uncontrolled라고 인지한다. 

그 후 useEffect로 undefined가 아닌 빈 스트링으로 할당하여 input에 전달을 하는데

이때 React는 uncontrolled인데 왜 controlled 방식으로 변경하려 하냐는 경고이다. 

 

 

참고자료

https://mygumi.tistory.com/419

[React] Controlled vs Uncontrolled :: 마이구미