[⚛️] custom hook

custom hook

 

📍특징

• input의 갯수에 따라 useState와 e.handler가 늘어나기 때문에 이를 간단하게 처리하기 위해 사용
• 컴포넌트로 구현했던 useState와 handler를 따로 함수로 만듬

 

📍주의사항

• 함수 이름은 use로 시작
• 파일이름은 상관 X
• 보통 src 폴더 > hooks 라는 폴더로 커스텀 훅들을 보관
• 기능은 커스텀훅을 만들기전과 동일하게 작동하되, 중복코드가 사라지고 전체적인 코드의 양도 감소

📍적용 방법

• js 파일에서 use~ 함수 생성
• 이 훅은 [ ] 을 반환하는데, 첫번째는 value, 두번째는 핸들러를 반환함.
• value는 useState로 관리
• 핸들러 로직 구현 

// src/hooks/useInput.js

import React, { useState } from "react";

const useInput = () => {
	// 2. value는 useState로 관리하고, 
  const [value, setValue] = useState("");

	// 3. 핸들러 로직도 구현합니다.
  const handler = (e) => {
    setValue(e.target.value);
  };

	// 1. 이 훅은 [ ] 을 반환하는데, 첫번째는 value, 두번째는 핸들러를 반환합니다.
  return [value, handler];
};

export default useInput;