Editor 컴포넌트에서 모든 input의 값을 저장한 state 객체가 생겼다.
이들을 한꺼번에 받아와 newData라는 state에 저장하고자 한다.
이를 관장할 onChangeInput 이라는 함수를 만들었다.
const onChangeInput = (e) =>{
let name = e.target.name;
let value = e.target.value;
//const { name, value } = e.target
// const createdDate = e.target.createdDate.value
if(name === 'createdDate'){
value = new Date(value)
}
setNewData((prev) => ({
...prev,
[name]: value,
})
}
<input type="date" onChange={onChangeInput} value={getStringedDate(newData.createdDate)} />
<input type="text" onChange={onChangeInput} value={newData.title} />
<textarea onChange={onChangeInput} value={newData.body}/>
onChangeInput 함수는 서로 다른 태그의 입력값을 받아와 newData객체의 값으로 업데이트시켜주는 함수이다.
if(name === 'createdDate'){ value = new Date(value) }여기서 createDate는 String type을 받아오는 거기 때문에, 객체에 저장할 때는 그 값을 다시 Date객체로 전환해준다.- onChange 함수 내에서 setNewdata함수를 불러오고, 그 인수로 콜백함수를 불러온다.
콜백함수는 newData의 이전상태, 즉 최신상태 'prev'를 인수로 받는다. - 이전 상태를 스프레드 연산자로 펼치고, (
...prev), 새로운 속성[name]:value를 추가한다.
위와 다른 경우가 생겼다.
input처럼 onChange 이벤트를 가질 수 있고, 입력 값이 존재하면 위 방법대로 쉽게 값을 저장할 수 있다. 그러나 div 혹은 button을 클릭했을 때 onChangeInput 함수를 호출하려면, 그리고 해당 태그들 같이 자체적인 value값이 없는 경우에는 어떻게 해야할까?
{
emotionList.map((item)=>{
return
<EmotionItem
key={item.emotionId}
{...item}
isSelected={isSelected}
/>;
}
map 함수로 뿌려지는 EmotionItem 이라는 컴포넌트이다.
div태그로 만들어졌기 때문에, input처럼 전달할 value값도, onChange이벤트도 발생하지 않는다.
위 같은 경우, 여러개의 EmotionItem 버튼 중 하나를 클릭했을 때 클릭된 EmotionItem의 id값을 기억해두고 싶은 상황이다.
따라서 id값이 value로서 onChangeInput에 전달되어야 한다.
{
emotionList.map((item)=>{
return
<EmotionItem
key={item.emotionId}
{...item}
isSelected={isSelected}
onClick={() =>
onChangeInput({
target: {
name: "emotionId",
value: item.emotionId,
},
})
}
/>;
}
onClick 이벤트를 발생했을 때 화살표 함수가 실행되고 화살표 함수 내부에서 onChangeInput함수가 호출이 되며 target 이라는 객체를 인수로 만든다.
보통의 <input> 요소는 onChange 이벤트가 발생할 때 자동으로 event 객체를 생성하고, event.target을 통해 value 속성을 쉽게 접근할 수 있다. 그러나 <div> 요소에는 value 속성이 없고, 직접 event 객체를 생성하지 않기 때문에, target처럼 커스텀 이벤트 객체를 생성해주어야 한다.
생성한 객체의 요소로 name과 value값을 지정해주고 해당 객체를 인수로 전달해주면 된다.
