[React.js] 커스텀 훅 사용하기 (useInput, useToggle)

커스텀 훅이란?

커스텀 훅은 React에서 제공하는 기본 훅들을 기반으로 사용자 정의된 훅을 만들어내는 것을 의미합니다. 이를 통해 코드의 재사용성을 증가시키고, 관련된 로직을 효율적으로 관리할 수 있습니다.

 

커스텀 훅 사용하는 이유

• 로직의 중복 제거: 비슷한 로직을 여러 컴포넌트에서 사용해야 할 때, 커스텀 훅을 통해 중복된 코드를 효과적으로 제거할 수 있습니다.
• 가독성 향상: 특정 기능이나 상태를 훅으로 추상화하면, 컴포넌트 코드가 간결해지고 가독성이 향상됩니다.
• 재사용성 증가: 커스텀 훅을 사용하면 동일한 로직을 필요로 하는 여러 컴포넌트에서 쉽게 재사용할 수 있습니다.

 

사용 예시 (useInput 커스텀 훅)

커스텀 훅을 사용하지 않았을 때

import React, { useState } from 'react';

const LoginPage = () => {
  const [ID, setID] = useState('');
  const [Password, setPassword] = useState('');

  const onIDHandler = event => {
    setID(event.currentTarget.value);
  };
  const onPasswordHandler = event => {
    setPassword(event.currentTarget.value);
  };


  return (
      <div>
      <input type="text" id="id" value={ID} onChange={onIDHandler} />
      <input type="password" id="password" value={Password} onChange={onPasswordHandler} />
      </div>
  );
};

export default LoginPage;

onIDHandler 및 onPasswordHandler 함수를 사용하여 input 값의 상태를 변경하고 있습니다. 둘 다 똑같은 로직을 사용하는 중복되는 코드입니다.

 

중복을 줄이기 위해 두 함수를 useInput이라는 커스텀 훅으로 만들어보겠습니다.

 

useInput 코드 작성

import { useState } from 'react';

const useInput = initialValue => {
  const [value, setValue] = useState(initialValue);

  const handleChange = e => {
    setValue(e.target.value);
  };

  return [value, handleChange];
};

export default useInput;

useState 값을 handleChange라는 함수로 통해 변경하는 커스텀 훅입니다. return 값으로 value와 handleChange를 넘겨줍니다.

 

useInput 사용

import React from 'react';
import useInput from '../hooks/useInput';

const LoginPage = () => {
  const [idInput, handleChangeID] = useInput('');
  const [passwordInput, handleChangePassword] = useInput('');

  return (
      <div>
        <input type="text" id="id" value={idInput} onChange={handleChangeID} />
        <input type="password" id="password" value={passwordInput} onChange={handleChangePassword} />
      </div>
  );
};

export default LoginPage;

위와 같이 useInput을 사용하여 코드를 작성하면 중복 코드를 줄일 수 있고 재사용성이 증가합니다.

 

 

+ 번외) useToggle 커스텀 훅 구현

useToggle 코드 작성

import { useState } from 'react';

const useToggle = (initialValue = false) => {
  const [value, setValue] = useState(initialValue);

  const toggle = () => {
    setValue(prevValue => !prevValue);
  };

  return [value, toggle];
};

export default useToggle;

프론트엔드 개발에 주로 사용되는 toggle 이벤트도 위처럼 커스텀 훅으로 작성하여 사용하면 재사용성을 증가시킬 수 있습니다.

 

useToggle 사용

import useToggle from '../hooks/useToggle';

const TestPage = () => {
  const [isToggled, toggle] = useToggle(false);

  return (
    <div className="container">
      <button type="button" onClick={toggle}>
        {isToggled ? 'off' : 'on'}
      </button>
    </div>
  );
};

export default TestPage;

감사합니다.