• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

커스텀 훅

20.03.19 19:53 작성 조회수 125

0

이 커스텀 훅 부분이 잘 이해가 안가서요..

재사용성을 위한것이라는 것과 중복을 줄였다는건 알겠는데

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에 어떤값이 들어갈지 정확히 잘 모르겠어요..

답변 1

답변을 작성해보세요.

0

원래

const [id, setId] = useState('');
const onChangeId = useCallback((e) => {
  setId(e.target.value);
}, [])

이걸 useInput이라는 커스텀 훅으로 묶으셨다고 보시면 됩니다.

id -> value,

setId -> setter

onChangeId -> handler

로 이름이 바뀐 겁니다.