2021-06-10 event handler

노성호·2021년 6월 10일
0

react

목록 보기
6/12

event handler

interface

interface SomeProps {
	date: DateRange;
	propsHandler: (formData: SomeProps) => void;
}

interface DateRange {
	startDate: Date;
	dueDate: Date;
}

1. 삽질

onChange{(e) => {
	const value = new Date(e.currentTarget.value)
	const form = {...props, date.startDate: value} // 여기서 안됨.
	propsHandler(form)
}}

전개구문에서 {...props, (props의 프로퍼티)}와 같이 작성해야 한다고 생각했는데 date.startDate가 오류가 있음. 왜 안되는지 한참 고민하다가, 그럼 전개구문을 두 번 빼보자 라고 생각함.

2. 일단 성공

onChange{(e) => 
	const value = new Date(e.currentTarget.value)
	const date = { ...props.date, startDate: value }	// 1.
	propsHandler({...props, date: date})				// 2.
}
  1. props의 date를 전개구문을 이용하여 date 오브젝트에 복사함.
  2. dateHandler에 전개구문을 이용하여 props의 date를 새로 만든 date오브젝트로 교체함.
  3. 잘 작동함.

3. 또 다른 솔루션

onChange{(e) => 
	const value = new Date(e.currentTarget.value)									
	const form = {...props, date: {startDate: value, dueDate: props.date.dueDate}}		  // 1.
	propsHandler(...form)	// 2.	
}
  1. props를 전개구문으로 얕은 복사를 한다. 첫 번째에서 제대로 안됐던 이유는 props의 한 뎁스 아래의 프로퍼티를 두 번째 밸류로 넣어야 했는데, 두 뎁스 아래의 밸류를 넣어서 안되었던 것. date는 startDate와 dueDate 두 종류가 있으니 바꿔줄 프러퍼티만 바꿔준다.
  2. 동일하게 form은 props와 같은 타입이기 때문에 dateHandler로 끌어올려준다.

4. function으로 뺀다.

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');
}
  1. props.date를 전개시켜 date오브젝트를 만들고, [dateType] 타입의 새 Date()를 만든다.
  2. props의 propsHandler에 전개구문을 이용해서 props의 date만 수정하고 끌어올려준다.
  3. onChange에 인라인으로 작성하는 것 보다 코드가 간결해졌다. 좀 더 선언형 프로그래밍에 가까워져 가독성이 좋아지고 디버깅이 쉬워졌다.

일하면서 알게된게 많다. 그래도 이거땜에 3시간 정도 낭비함...

0개의 댓글