서로 다른 컴포넌트에서 호출한 커스텀 훅이 지니는 개별성

회원 가입 관련 form에서 동작하던 state와 통신 함수를

커스텀 훅으로 분리해 운영했을 때,

클릭 이벤트 핸들러에서는 state와 통신이 정상 동작했지만

키보드 이벤트 핸들러에서는 통신이 이뤄지고 state의 변경은 되지 않는 오류가 있었습니다.

---

문제 발생 이유

: 커스텀 훅의 mutation 함수를 서로 다른 곳에서 참조를 통해 사용했기 때문입니다.
한 마디로 하나의 함수로 동작한 것이 아닌 서로 다른 2개의 함수가 각자 동작한것인데요.

React 공식 문서의 커스텀 훅 만들기 파트를 보면 자세히 알 수 있습니다.

Q.사용자 정의 Hook은 어떻게 독립된 state를 얻는 건가요?

A. 각각의 Hook에 대한 호출은 서로 독립된 state를 받습니다.
useFriendStatus를 직접적으로 호출하기 때문에 React의 관점에서
이 컴포넌트는 useState와 useEffect를 호출한 것과 다름없습니다.

또한 우리가 이전에 배웠듯이, 하나의 컴포넌트 안에서
useState와 useEffect를 여러 번 부를 수 있고 이들은 모두 완전히 독립적입니다.

---

문제 해결

커스텀 훅을 호출한 컴포넌트에서 사용한 mutation 함수를
prop으로 전달해 사용해 두 함수가 동일한 함수로 처리되도록 하여
문제를 해결했습니다.

---

Reference

[React - 자신만의 Hook 만들기]