[Next.js] Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components. 오류 해결

2023-09-18

---

사진: Unsplash 의 NEOM

---

1. 방법

 

GetServerSideProps으로 데이터를 가져온 후 input에 데이터를 넣고 있었는데, 해당 데이터가 없을 경우 페이지 상에서는 오류가 나지 않지만 콘솔에서는 아래와 같은 오류가 발생하고 있었다. 

 

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

 

위와 같은 오류가 발생시 데이터가 없을 경우 default로 넣어줄 값을 선언해 주면 해당 오류는 사라지게 된다. 아래와 같은 방법으로 값을 넣어주면 된다.

 

<input type="text" name="userName" id="userName" placeholder="이름" value={userName || ''} />

 

value={userName || ''}  이렇게 데이터가 없으면 빈문자열이 들어가 오류가 발생하지 않게 된다.

---

메인 이미지 출처 : 사진: Unsplash의NEOM