오늘은 React의 기초적인 강의를 다 들은 직후 바로 개인 과제를 할당받았습니다.
그리하여 React form 관련하여 다루고 있었는데...
발생한 console의 경고 메세지....
Warning: A component is changing an uncontrolled input to be controlled
제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component) 에 대한 경고 메세지였습니다!
1. 문제 상황
React 첫 프로젝트로 파리 올림픽 메달 기록을 관리하는 간단한 웹을 만들고 있었습니다.
form을 통하여 국가 이름과 메달 수를 input태그에 입력 받은 후 이를 리스트로 출력하는 기능을 구현중 이였습니다. 그런 후 리스트 출력까지 완성이 되었지만 콘솔 창에는 커다란 빨간 상자가 생겨있었습니다.
2. 원인 분석
경고 메세지는 초기값이 undefined로 설정된 상태에서, 후에 정의된 값으로 변경될 때 발생하였습니다. 즉, useState()의 사용함에 있어 기본값이 정의되어있지 않았기 때문에 발생했던 경고 메세지였습니다.
이는 코드의 실행에는 문제가 없었지만 해당 입력 필드가 제어 컴포넌트인지 비제어 컴포넌트인지 코드적인 구분이 명확히 되지 않아 경고를 발생시켰던 것이였습니다.
문제가 발생했던 코드입니다.
const [countGoldMedal, setCountGoldMedal] = useState();
const [countSilverMedal, setCountSilverMedal] = useState();
const [countBronzeMedal, setCountBronzeMedal] = useState();3. 해결 방법
이는 해결 방법이라기도 뭐한게...
그냥 입력 필드의 초기값을 지정해주면 되는 일이였습니다.
그렇게 되면 해당 입력 필드를 제어 컴포넌트로 인식이 됩니다.
const [countGoldMedal, setCountGoldMedal] = useState(0); // 초기값을 0으로 설정
const [countSilverMedal, setCountSilverMedal] = useState(0); // 초기값을 0으로 설정
const [countBronzeMedal, setCountBronzeMedal] = useState(0); // 초기값을 0으로 설정4. 결론 및 마무리
제어 컴포넌트를 사용할 때는 초기값을 명시적으로 정의하여 에러 메세지가 뜨지 않도록 합시다!
오늘은 간단한 트러블 슈팅으로 TIL을 마치겠습니다.
이제 다음 과정은 해당 값들을 Update와 Delete가 가능한 기능을 만들고 입력 필드의 유효성 검사를 제작해 보겠습니다.
