더 알아보기/에러
[Error] A component is changing an uncontrolled input of type checkbox to be controlled
은돌1113
2022. 8. 18. 11:50
input과 span을 사용하여 CheckBox 기능을 구현하는 과정에서 위와 같은 오류가 발생했다.
아래 블로그를 참고하여 오류를 해결할 수 있었는 데 간략히 요약하자면
해당 오류는 "구성 요소가 제어되지 않는 유형의 입력을 제어하도록 변경하고 있습니다."라는 경고로써
입력값이 초기화(undefined) 되었지만 값이 변경될 경우 오류가 발생 할 수 있기 때문에 ||(OR 연산자)를 사용하여 예외 처리를 해주는 것이 좋다고 한다.
🥕 ||(OR 연산자) 예시
<input
value={data || ""}
/>input 태그에 value 속성을 추가하여 data라는 변수의 값을 출력하고 싶은 데 만약 data 변수에 값이 없다면 ""(빈 값)을 출력하는 코드로 구현할 수 있다.
사용해보니 값의 유무를 판단 할 때는 삼항 연산자(조건? 참 : 거짓) 보다 OR 연산자(||)가 정확성, 간결성, 가독성면에서 더 좋았던 것 같다.
Fix - A component is changing an uncontrolled input to be controlled | bobbyhadz
The warning "A component is changing an uncontrolled input to be controlled" occurs when an input value is initialized to `undefined` but is later changed to a different value. To fix the warning, initialize the input value to an empty string, e.g. `value=
bobbyhadz.com
이를 적용하여 아래와 같이 코드를 수정했다.
오류 해결 성공✨
