프로젝트/사이드프로젝트1

Warning: A component is changing an uncontrolled input to be controlled

개발집사 2023. 3. 12. 01:12

💡문제

input value에 undefined로 들어갔을 때 생기는 문제가 다음과 같이 콘솔에 찍혔다.

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components

💪🏻해결

input 값의 value를

<S.Title
    value={title}
    onChange={(e)=>onChangeTitle(e)}
/>

이상태에서

<S.Title
    value={title || ''}
    onChange={(e)=>onChangeTitle(e)}
/>

이렇게 undefined일 때는 빈 string 값이 들어갈 수 있도록 변경해주었다.