onChange 함수 합치기

✔️ 오늘은 Westagram의 Login 페이지를 만들고 기능을 적용할 때, 모든 Input 필드에 onChange를 적용 시킨다면 동일한 함수가 중복되는 비효율 적인 상황이 발생하기 때문에 onChange 함수 합치기를 해보려고 한다.

✔️ PR에 질문사항으로 적어뒀었는데, 참고 사항이 잘 적혀있어 셀프 리팩토링으로 먼저 진행해보기로 했다.

✔️ 반복되는 코드가 있다면 꼭 유심히 살펴보자 !

1. Event Handler 만들기

✔️ 태그에 원하는 evnet를 적어주고, 그 Event Handler의 이름을 {} 안에 적어준다.

✔️ 실제 Event Handler 함수를 작성하기 전, console.log를 꼭 찍어보는 습관을 들이자. 제대로 이벤트가 호출 되는지 확인해보자!

✔️ Event Handler에 원하는 값을 작성한 뒤, 제대로 입력되는지 궁금하다면 render(){여기에!} console.log를 찍어서 정확한 값을 확인한다. (❗️ 단, return 전에 찍어야한다)

➡️ state가 업데이트 되면, render 함수가 자동으로 호출되기 때문이다.

2. onChange의 Event Handler 합치기 - 객체의 프로퍼티 변수 사용

• 객체의 특성을 사용하여 함수를 합칠 수 있다.
• 계산된 속성명 사용

✏️ 현재 나의 코드

➡️ 현재 Input을 다루는 Event Handler가 2개이다.

✏️ 하나로 합치기

1. 각 Input 태그에 name attribute를 사용한다.
2. 이때 name의 값은 state에 지정한 키 값과 동일하하게 해야 편하다.(그렇지 않을 경우 if 문을 써야한다.)

✨ [e.target.name] : 계산된 속성명을 사용한 것이다. 이것을 활용해서 여러개의 input 핸들러를 하나의 함수로 사용할 수 있다.