=> input tag에 readOnly를 사용하거나, value를 defaultValue로 사용하도록 권장하는 warning 인것 같았다.
1.때문에 readOnly를 사용했더니 input 내 value를 수정할수가 없고,
2.defaultValue로 변경시 계속해서 비동기로 데이터 불러올때 초기 데이터값으로만 남아있었다.
때문에 비동기로 데이터를 불러올때 데이터 불러오기전 빈배열로 초기화 로직을 추가해서 해결하였다.
const Book = () => {
const [bookinfo, setBookinfo] = useState([]);
const getInformation = (value) =>{
setBookInfo([])
axios.get(
..
)
}
return (
<div>
[...]
{bookinfo.map(el,idx)=>(
<input
key={idx}
defaultValue={el.title}
/>
)}
[...]
</div>
)
}
export default Book;