[React] 커스텀 Hooks - 중복되는 로직을 한줄로 처리하도록

🔎 커스텀 Hooks

---

우리는 중복된 코드를 보게 되면 재사용이 가능한 함수로 추출해서 중복 코드를 제거하고 싶어하죠?

React에서도 여러 개의 hook을 조합해서 기능을 만들게 되는데

여러 컴포넌트에서 동일한 기능에 대해 동일한 hooks를 복사 붙여넣기 하다보면

중복된 코드들을 볼 수 있을 것입니다.

 

이 중복된 hooks에 대해서도 따로 커스텀 훅을 통해 간결하게 관리할 수 있게 됩니다.

 

예를 들어 상태 관리를 하는 기능을 우리가 useState 한줄로 불러와서 사용하는 것처럼 말이죠!

우리가 만든 기능에 대해서도 하나의 hook으로 관리해서 어느 컴포넌트에서라도 바로 불러와서 사용할 수 있다면 말이죠?

 

React에서는 내가 원하는 인터페이스와 기능을 담은 나만의 커스텀 훅을 만들 수 있습니다.

커스텀 훅을 만들어 놓으면 useState나 useRef 처럼 바로 불러와서 사용이 가능합니다.

 

→ 커스텀 훅이란 우리의 입맛대로 직접 커스텀해서 만든 hook

 

❓ 커스텀 훅 만드는 방법

단순히 함수를 하나 만드는 것입니다.

우선 원하는 이름을 지어주고 그리고 원하는 기능을 함수 안에 구현만 해주면 됩니다.

그리고 매개변수나 리턴값도 마음대로 할 수 있습니다.

 

커스텀 훅이 유용한 이유는 커스텀 훅 함수 내부에서 다른 리액트 hook들을 자유롭게 사용가능하다는 이유인데요!

사용하는 컴포넌트마다 커스텀 훅이 가지는 state와 effect는 완전히 독립적이기 때문에 커스텀 훅은 엄청난 재사용성을 제공합니다.

 

📌 예제 코드

input 박스가 하나 있는 컴포넌트를 작성해 보았습니다.

const {useState} = require('react');

function Main() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };
  
  const handleSubmit = () => {
    alert(inputValue);
    setInputValue('');
  };

  return (
    <div>
      <h1>useInput</h1>
      <input value={inputValue} onChange={handleChange} />
      <button onClick={handleSubmit}>확인</button>
    </div>
  );
}
export default Main;

보통 input 값을 처리할 때 위 코드와 같이 input에 입력한 값을 관리할 useState 하나와 onChage로 input에 들어오는 값을 바로바로 setInputValues로 state를 업데이트 하기 위한 함수

이렇게 짜는 경우가 많은데요.

실행 화면

만약 여러 컴포넌트에서 위와 같은 로직을 처리한다고 하면

다른 컴포넌트에 해당 로직 부분을 복사 붙여넣기 해서 사용해야 할 것 같습니다.

그렇게 하게 되면 중복된 코드가 생기게 될 것입니다.

 

또한 같은 컴포넌트 내에서 input창이 여러 개라면 state도 3개 onChage함수도 3개씩 작성해야 할 것 같습니다.

 

이럴 때 input을 처리하는 기능을 담은 커스텀 훅을 만드는 것인데요!

위 기능을 커스텀 훅으로 담아놓게 되면

훅을 이용해 한줄로 input 관리할 수 있게 됩니다.

 

💡 커스텀 훅을 만든다 = 함수를 하나 만든다

 

커스텀 훅의 이름을 먼저 지어야 하는데, 우리가 만드는 커스텀 훅도 리액트 훅이니까 가능하면 앞에 use를 붙여줍니다.

그리고 이제 기능을 구현할 건데

아까 중복될 것 같은 로직에 해당하는 부분은 위와 같았습니다.

이 부분을 그대로 가져와서 커스텀 훅을 만들건데요.

 

📄 useInput.js 파일

import {useState} from 'react';

export function useInput(initialValue) {
  const [inputValue, setInputValue] = useState(initialValue);

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

  return [inputValue, handleChange];
}

초기값을 매개변수로 받고, 관리하고 있는 state값과 onChange함수를 리턴하도록 작성해 주었습니다.

 

이제 커스텀 훅을 사용해 봅시다.

import {useInput} from './useInput';

function Main() {
  const [inputValue, handleChange] = useInput('안녕');

  const handleSubmit = () => {
    alert(inputValue);
  };

  return (
    <div>
      <h1>useInput</h1>
      <input value={inputValue} onChange={handleChange} />
      <button onClick={handleSubmit}>확인</button>
    </div>
  );
}
export default Main;

우리가 커스텀한 useInput을 import해서 매개변수와 리턴값에 맞게 함수를 사용해주면 됩니다.

 

만약 input창이 여러 개가 되어도 useState와 onChange 함수 하나더가 아니라 useInput 단 한 줄로 로직처리가 가능해집니다.

import {useInput} from './useInput';

function Main() {
  const [inputValue, handleChange] = useInput('안녕');
  const [inputValue2, handleChange2] = useInput('123');

  const handleSubmit = () => {
    alert(inputValue);
  };

  return (
    <div>
      <h1>useInput</h1>
      <input value={inputValue} onChange={handleChange} />
      <input value={inputValue2} onChange={handleChange2} />
      <button onClick={handleSubmit}>확인</button>
    </div>
  );
}
export default Main;

실행 화면

이번에는 더 나아가서 확인 버튼을 누르면 alert 메세지가 뜨는 것까지 useInput에 포함 시켜 보겠습니다.

 

📄 useInput.js 파일

import {useState} from 'react';

export function useInput(initialValue, submitAction) {
  const [inputValue, setInputValue] = useState(initialValue);

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

  const handleSubmit = () => {
    setInputValue('');
    submitAction(inputValue);
  };

  return [inputValue, handleChange, handleSubmit];
}

더 추가한 점은 submitAction이라는 함수를 인자로 더 받습니다.

그리고 이제 handleSumbmit 함수가 실행되면 같이 submitAction 함수가 실행되도록 커스텀 훅 함수를 작성해 주었습니다.

그 후에 리턴값으로 이 input창을 clear해주고 받아온 함수를 같이 실행시켜주는 handleSubmit 함수를 리턴값에 추가해 주었습니다.

import {useInput} from './useInput';

const displayMessage = (inputValue) => {
  alert(inputValue);
};

function Main() {
  const [inputValue, handleChange, handleSubmit] = useInput('', displayMessage);

  return (
    <div>
      <h1>useInput</h1>
      <input value={inputValue} onChange={handleChange} />
      <button onClick={handleSubmit}>확인</button>
    </div>
  );
}
export default Main;

그러면 이제 Main.js에서 커스텀 훅에 alert를 띄워주는 함수를 넘겨주고

버튼에는 누르게 되면 input창을 clear하고 커스텀 훅의 2번째 인자로 들어온 함수를 같이 실행해주는 handleSumit을 클릭 이벤트를 달아줍니다.

실행 화면

그러면 처음과 동일하게 기능이 잘 작동하는 것을 확인할 수 있습니다.