230726) 수정할 때 input에 기존 값을 기본값으로 넣는 방법

원래 코드에서는 placeholder로 기존 값을 불러왔는데, 이렇게 하면 기존에 썼던 기존 값이 모두 날라가는 단점이 있다.

그래서 value에 기존 값을 넣으니, 정상적으로 불러와지긴 하지만 input칸에 있는 값을 수정할 수가 없었다.

 

이럴 경우에는 아래와 같이 value 대신에 defaultValue를 사용하여 기존값을 넣어 주면, input내에 기존 값을 그대로 유지하면서도 수정을 할 수 있다.

 

<input
	defaultValue={selectedData.title}
	onChange={(e) => setTitle(e.target.value)}
/>

코드 예시는 위와 같다. (여기서 selectedData.title은 제 코드내에서 기존의 제목 값을 불러오는 역할을 합니다. 지정해둔 함수명등에 따라 변경하여 사용하시면 됩니다! 포인트는 placeholder, value 대신 defaultValue를 사용한다는 것!)

 

오늘도 잘 해냈다!