[Warning] value prop on select should not be null.

개발진행하다가 콘솔에 warning 문구들을 하나씩 해결하던 중

 

Warning: value prop on select should not be null. Consider using an empty string to clear the component or undefined for uncontrolled components.

[ 원인 ]

- select에 사용하는 state 최초값을 null로 설정을 했더니 옵션에 없어서 남 ㅋㅋ

 

***

추가적으로

 

value prop on input should not be null. Consider using an empty string to clear the component or undefined for uncontrolled components.

const [test, setTest] = useState(''); // 초기 상태를 빈 문자열로 설정

 

이 경고는 input 요소의 value prop이 null로 설정되어 있어서 발생하는 것입니다. React에서는 null 값을 허용하지 않기 때문에 이런 경고가 발생하게 됩니다.

1. 제어 컴포넌트를 사용하는 경우: value prop을 빈 문자열('')로 설정하면 경고를 없앨 수 있습니다. 이렇게 하면 input 요소가 입력되지 않은 초기 상태를 나타낼 수 있습니다. 상태 초기화시에 null 대신 빈 문자열을 사용해보세요.
2. 비제어 컴포넌트를 사용하는 경우: value prop을 undefined로 설정하면 됩니다. 이렇게 하면 React가 DOM에 대한 소스 진리(source of truth)를 유지하게 되어 사용자의 입력에 따라 input 요소의 상태가 자동으로 업데이트됩니다.

-> null 말고 '' 이걸 써야겠다,,