2023 08 23

[REACT] A component is changing an uncontrolled input to be controlled¶

개요
- 컴포넌트가 uncontrolled input을 controll로 변화시키려 할 수 있다
- 주로 이런 경우는 undefined -> defined value로 변화시킬때 발생한다
- 컴포넌트 생명주기 속에서 controlled로 가져갈지 uncontrolled로 가져갈지 결정해라

Input initial value
- <input />은 defaultValue를 넘겨줘도 컨트롤되지 않는다
- JSX는 오로지 initial value만 특정지음
  - 현재 값이 뭐여야 할지는 컨트롤하지 않음
- controlled input을 렌더링하려면 value prop을 넣어줘야한다
  - checkboxes 혹은 radio 라면 checked를 넣어줘야 한다
- 리액트는 input에 value가 있도록 강제할 것이다.
- 주로 state 변수를 통해서 이를 해결하곤 한다.
```
function Form() {
    const [firstName, setFirstName] = useState('');

    return (
        <input value={firstName} onChange={e => setFirstName(e.target.value)} />
    );
}
```
- 여기서 컴포넌트에 넘겨주는 value는 undefined 혹은 null이 되어서는 안된다
  - empty라면 그냥 ''를 넘겨주자

Input Radio default
- 포스팅에서는 새로고침을 통해 uid를 가져오는 userData가 비어버릴때 해당 에러가 발생한다고 한다
- 데이터값이 순간적으로 undefined로 떨어지면 원인이 되어버리는 현상
  - 따라서 undefined일 때 무슨 처리를 해줄지 뚝딱 알아보자
  - value = {value || ''} 와 같은 식으로 undefined => 빈값으로 넘기거나
  - defaultValue를 줘서 uncontrolled 로 그냥 다뤄버리자