커스텀 훅

Question

이 커스텀 훅 부분이 잘 이해가 안가서요.. 재사용성을 위한것이라는 것과 중복을 줄였다는건 알겠는데 input에서 입력한 값들이 저기에 어떤식으로 들어가는건지 console.log로 찍어봐도 잘 이해가 안가요ㅠㅠ 제가 이해한걸 풀어보자면 input에서 changeId 등등 이벤트들이 발생하면 useInput()이 실행이 되고 실행될 때 useInput('') 이 매개변수로 input에서 입력한 값이 들어가고 useInput = (initValue = null) << 이부분에서 매개변수에 initValue가 처음엔 null이다가 이 부분에 input에서 입력한 값이 들어가서 useState를 실행하여 input에서 받아온 값을 setter로 해당하는 input란에 넣고 그 넣은 값을 henler에 저장하여 value와 함께 리턴해 주어서 value는 id에 handler는 onChangeId에 들어가는 게 맞는건가요? 여기에서 value, setter에 어떤값이 들어갈지 정확히 잘 모르겠어요..

제로초(조현영) · Answer

원래 const [id, setId] = useState(''); const onChangeId = useCallback((e) => {   setId(e.target.value); }, []) 이걸 useInput이라는 커스텀 훅으로 묶으셨다고 보시면 됩니다. id -> value, setId -> setter onChangeId -> handler 로 이름이 바뀐 겁니다.