[React] React 커스텀 hooks 만들어서 반복되는 코드 줄이기.

리액트 Customhooks 만들어서 반복되는 코드 줄이기.

---

커스텀 hook을 만들어서 반복되는 코드를 줄여줄 수 있다.

훅을 사용하지 않는다면 보통 Input의 onChange이벤트를 관리하기 위해 아래와 같이 코드를 작성 할 것이다.

const [password, setPassword] = useState('')
const onChangePassword = useCallback((e) => {
    setPassword(e.target.value);
  }, []);
  
const [id, setId] = useState('')
const onChangePassword = useCallback((e) => {
    setId(e.target.value);
  }, []);
  
const [name, setName] = useState('')
const onChangePassword = useCallback((e) => {
    setName(e.target.value);
  }, []);

이렇게 작성할 경우, 관리해야할 Input이 늘어날 때마다 비슷한 형태로 반복되는 코드를 작성해주어야 한다. 

반복이 많으면 코드가 길어질 뿐 아니라, 매우 비효율적인 형태로 보여진다.  

 

커스텀hook을 만들어 사용하면 비슷한 형태로 반복되는 코드를 줄여줄 수 있다.

아래 예시코드를 통해 커스텀hook을 만드는 방법과, 사용하는 방법을 확인해보자.

// useInput.js
// 아래와 같이 커스텀 훅을 작성할 수 있다.
export default (initialValue = null) => {
  const [value, setValue] = useState(initialValue);
  const handler = useCallback((e) => {
    setValue(e.target.value);
  }, []);
  return [value, handler];
};


// LoginForm.js
// 커스텀훅을 사용해 반복되는 코드를 줄여보자.
const [id, onChangeId] = useInput("");
const [password, onChangePassword] = useInput("");
const [name, onChangeName] = useInput("");

 위와 같이 커스텀 훅을 사용하면, 코드를 한층 간결하게 만들어 줄 수 있다.

 반복되는 형태의 함수가 있다면, 커스텀hook을 만들어서 사용해보자 !