[Error] A component is changing an uncontrolled input of type checkbox to be controlled

구성 요소가 제어되지 않는 유형의 입력을 제어하도록 변경하고 있습니다.

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

 

이를 적용하여 아래와 같이 코드를 수정했다.

---

오류 해결 성공✨