728x90
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
이를 적용하여 아래와 같이 코드를 수정했다.
오류 해결 성공✨
728x90
'🧠 지식창고 > 에러' 카테고리의 다른 글
| [Error] Synchronous scripts should not be used. See: https://nextjs.org/docs/messages/no-sync-scripts (0) | 2023.02.14 |
|---|---|
| [Error] <div> cannot appear as a descendant of <p> (0) | 2022.08.18 |
| [Error] document is not defined (0) | 2022.07.14 |
| [Error] Cannot find module 'react/jsx-runtime' (0) | 2022.04.06 |
| [Error] Module not found : Can't resolve "next/image"; (0) | 2022.02.23 |
댓글