A component is changing an uncontrolled input to be controlled. warnning 해결 방법

해결 방법

const [adminInfo, setAdminInfo] = useState("");

useEffect(() => {
	setAdminInfo(
    	{name: "user"}
    )
}, [])

<input
   defaultValue={adminInfo.name || ""}
/>

React default value를 사용하는 이유는 다음과 같습니다.

1. 기본값 설정: 만약, 사용자가 입력하지 않았을 경우, 특정 기본값을 표시하기 위해서입니다.
2. 초기 폼 상태 설정: 폼을 처음 렌더링할 때, 특정 초기 값을 가지도록 설정하기 위해서입니다.
3. 초기 데이터 상태 설정: API를 통해 받은 데이터를 표시할 때, 그 데이터를 기반으로 폼의 초기 상태를 설정하기 위해서입니다.
4. 기존 데이터 로딩: 기존에 저장된 데이터를 불러와 폼에 표시할 때, 그 데이터를 기반으로 폼의 초기 상태를 설정하기 위해서입니다.

이와 같은 이유로, React default value는 폼의 초기 상태를 설정하는데 매우 유용한 기능입니다.

 

다른 방식으로 적용하는 방법 (추천하지는 않음)

useEffect(() => {
	document.getElementById("title").value = "hi"
}, [])

<input
   id = "title"
/>

추천하지 않은 이유) react를 사용할 때에는 최대한 useState를 활용하는 것이 최적화하는 방식입니다. 순수 자바스크립트로 코드를 구현하다보면 react를 제대로 활용한다고 볼 수 없기 때문에 참고만 해주시면 감사하겠습니다.