react hook에서 객체인 state를 업데이트 시키고 싶은데 헷갈려서 다른 사람들도 헷갈리지 않을까.. 싶어서 정리를 해본다.
const nameRef = useRef();
const ageRef = useRef();
const [data, setData] = useState(
{
name: "kunee",
age: 25,
}
)
const onChange = (event)=>{
const copies = {
...data,
[event.target.name] : event.target.value, // #####
}
setData(copies);
}
return (
<input ref={nameRef} name="name" onChange={onChage}/>
<input ref={ageRef} name="age" onChange={onChage}/>
)
위에 # 표시해 놓은 곳이 헷갈린 부분이다.
객체의 key부분이 정해진 것이 아니라 event처럼 바뀌는 값이라면 []없이 처리하면 오류가 난다.