interface SomeProps {
date: DateRange;
propsHandler: (formData: SomeProps) => void;
}
interface DateRange {
startDate: Date;
dueDate: Date;
}
onChange{(e) => {
const value = new Date(e.currentTarget.value)
const form = {...props, date.startDate: value} // 여기서 안됨.
propsHandler(form)
}}
전개구문에서 {...props, (props의 프로퍼티)}와 같이 작성해야 한다고 생각했는데 date.startDate가 오류가 있음. 왜 안되는지 한참 고민하다가, 그럼 전개구문을 두 번 빼보자 라고 생각함.
onChange{(e) =>
const value = new Date(e.currentTarget.value)
const date = { ...props.date, startDate: value } // 1.
propsHandler({...props, date: date}) // 2.
}
onChange{(e) =>
const value = new Date(e.currentTarget.value)
const form = {...props, date: {startDate: value, dueDate: props.date.dueDate}} // 1.
propsHandler(...form) // 2.
}
function dateHandler(dateString: string, dateType: string) {
const date = { ...props.date, [dateType]: new Date(dateString)} // 1.
props.propsHandler({...props, date: date}) // 2.
}
onChange{(e) =>
dateHandler(e.currentTarget.value, 'startDate');
}
일하면서 알게된게 많다. 그래도 이거땜에 3시간 정도 낭비함...