useInput 커스텀 훅 동작 흐름 질문드립니다.

2021-06-09T15:25:12.182Z

0

답변 감사드립니다.

그런데 이해가 안가는 부분이 하나 더 있는데

질문탭에서 커스텀 훅 관련해서 찾아보니까 커스텀 훅을 사용하는 이유가 한 컴포넌트에서 여러개의 훅을 사용할 때 편리하게 사용하려고 한다는 답변을 봤는데

이 부분이 이해가 되질 않아서요..

어짜피 각각의 state마다 setState는 선언을 해 줘야하고 html에서는 그 선언된 각각의 setState를 호출할 텐데 왜 커스텀훅이 사용하기 편리한건가요??

0

useInput을 쓰면 훅이 두 개에서 하나로 줄어드는데요? useInput 내부의 5줄이나 되는 코드를 한 줄로 줄인 겁니다.

0

제가 이해가 안됐던 부분은

1. 기존 useState를 그대로 사용했을 때는 

const [email, setEmail] = useState(); 

로 선언하고 html에서는 이벤트 발생 시 setEmail을 호출

2. useInput을 사용했을 때는

const [email,onChangeEmail] = useInput('');

으로 선언하고 html에서 이벤트 발생시 onChangeEmail을 호출

여기까지는 코드가 간단해서인지는 몰라도 제가 생각하기에 로직 흐름이 달라지는게 없고 오히려 useInput을 작성함으로 코드 작성량이 늘어나는 것 처럼 보이는데

만약 강의상의 useInput의 예제가 간단해서 handler 내부에 setState만 써도 되는 상황이였고

handler에서 추가적인 로직을 사용해서 이 후 같은 데이터 가공처리를 하는 state에 적용을 하는것이라면 이해가 가긴 합니다만

혹시 이 이유가 아니라면 어떤 이유가 있을까요??

0

useCallback이 사라진만큼 코드가 줄어든거죠. 중복된 로직을 함수로 뺐으니까 줄거든겁니다.

useState + useCallback -> useInput 하나