input의 초깃값을 설정해 보자

input 태그를 이용해 초깃값을 늘 1로 띄우도록 설정하기 위해 다음처럼 작성했다.

<input type="text" value="1" />

그리고 마주한 오류 메시지. value의 경우 초기값으로 사용할 때 항상 handler를 함께 사용해야 하며, 그렇지 않을 경우 read-only로 사용해야 한다고 한다.

You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue.

해결할 수 있는 방법은 두 가지, 내가 원하는 쪽이 어디인지 확인해야 할 것도 두 가지다.

1. 변하지 않는 값일 경우
   : readOnly 속성을 사용하자!

<input type="text" value="1" readOnly />

2. 변하는 값일 경우
   : defaultValue 속성을 사용하자!

<input type="text" defaultValue="1" />

그러나 defaultValue의 값이 변경될 경우 화면이 변경되지 않는 이상 변경된 값이 실시간으로 렌더링되지 않기 때문에 onChange를 사용해 이벤트를 걸어 주는 것이 좋다. 우선 데이터를 변경시키는 작업 전이기 때문에 콘솔에 뜨는 오류 해결 겸 임시 방편으로 defaultValue로만 사용해 주고 있다.

🔗 참고
[React] input 폼에 대한 노트
Controlled and uncontrolled form inputs