controlled vs uncontrolled input

A component is changing the uncontrolled value state of Select to be controlled.
Elements should not switch from uncontrolled to controlled (or vice versa).
Decide between using a controlled or uncontrolled Select element for the lifetime of the component.
The nature of the state is determined during the first render. It's considered controlled if the value is not undefined.

위와 같은 에러는 초기값이 undefined였다가 렌더링 과정에서 값이 들어와서 defined value로 바뀌면서 일어나는 에러다.

controlled component

• React 컴포넌트의 상태를 업데이트해 값을 변경하고, 이 값을 요소에 props로 전달한다.
• 단방향 데이터 흐름.

uncontrolled component

• DOM의 직접적인 참조를 통해 값을 가져오거나 업데이트한다.
• 특정 상황에서만 값을 가져올 때 사용한다.

controlled component를 사용하고 싶다면 초기값이 undefined가 되지 않도록 ""나 null을 값으로 넘겨야 한다.