[React] TypeError: Cannot read properties of undefined (reading 'value')

호출 함수의 바인딩 문제!

이 오류를 만나면, 이것을 우선으로 의심해야 한다.
바인딩에 대한 내용은 다음 문서에서 참고할 수 있다.

https://ko.javascript.info/bind

1️⃣ case 1. 클래스형 컴포넌트

this.onChange= this.onChange.bind(this)

와 같이 this의 바인딩을 생성자(constructor)에서 해주면 된다.

2️⃣ case 2. 함수형 컴포넌트

해당 함수를 화살표 함수로 아래와 같이 작성하면 된다.

const onChange = () => { ... }

왜냐하면 화살표 함수는 this가 없다.
그러므로 this의 바인딩을 하지 않는다.

만약 화살표 함수 내부에서 this를 사용하면,
Execution Context(실행 컨텍스트)에 의해 외부에서 this를 가지고 온다.

https://ko.javascript.info/arrow-functions

🆖 case None. 번외

하지만 나의 경우는 위와 같은 바인딩 문제가 아니었다.
함수형 컴포넌트를 생성하여 화살표 함수로 잘만 만들었기 때문.
왜 자꾸 value에 대한 값이 'undefined'라고 하는 것인지 모르겠어서,
코드를 30분 동안 쳐다봤지만 문제를 발견하지 못했다.

원인은 위 코드 때문이었다.
뭐가 잘못됐는지 영영 모를 뻔했다.
e.target.value를 e.taget.value로 작성한 것.

사실 자신의 코드에 갇혀있다 보면,
다시 읽어도 똑같아 보이고 문제를 찾을 수 없는 경우가 많다.
이럴 땐 3자의 도움이나 휴식 후 다시보기가 해결 방법이 될 수 있을지도...
오늘의 삽질은 또 하나의 경험일 것이다.

결론 - 해당 부분의 코드 오탈자도 잘 검수하시길.