Warning : A component is changing an uncontrolled input to be controlled(React JS)

문제 코드

    export default function App() {
      const [username, setUsername] = useState("");
      return (
        <div className="App">
          <div>{username}</div>
          <input
            type="text"
            value={username}
            onChange={(event) => setUsername(event.target.value)}
            placeholder="여기는 인풋입니다."
            className="tweetForm__input--username"
          ></input>)

input에서 value로 username을 참조했더니 컴포넌트가 uncontrolled input을 controlled로 바꾸고 있다는 경고가 뜬다. error가 아니라서 작동은 하지만 궁금해서 찾아봤다.

https://stackoverflow.com/questions/47012169/a-component-is-changing-an-uncontrolled-input-of-type-text-to-be-controlled-erro

A component is changing an uncontrolled input of type text to be controlled error in ReactJS

 

 

결론 : value가 username을 참조하고 있는데 초기값이 undefined이므로 input field는 uncontrolled상태가 된다.(uncontrolled와 controlled가 무얼 의미하는지는 모르겠다) 그리고 값을 입력하면 controlled component로 전환되는데 이 때 warning이 발생하는 것이다. 해결책은 username값이 없을 때 따로 처리를 해주면 됨. value={username || ""} 이렇게.