[React] Custom hooks란

1. 인사

안녕하세요. 이번에는 Custom hooks에 대해 알아보도록 하겠습니다.

---

2. 소개 배경

여러 소스코드를 살펴보는 와중에 hooks라는 폴더가 눈에 계속 보이게 되었고, 해당 folder는 어떤 의미를 가지는 것인지 궁금하게 되었습니다. 이에 대해 알아본 결과 Custom hooks에 대해 이해하고 유용하게 사용할 수 있다면 앞으로 개발을 하는데 있어서 너무 효율적일것 같아서 글로 정리하는 시간을 가지게 되었습니다.

---

3. Custom hooks이란?

자신만의 hook으로 로직의 재사용을 높이기 위한 것으로 React 내부에 존재하는 useState, useContext, 그리고 useEffect 같이 몇몇 내재하고 있는 Hook을 더 구체적인 목적을 가진 Hook으로 만들어 주는 것을 말한다.

---

4. Custom hooks 적용하기

4.1 어떤 것을 Custom hooks로 뺄지 생각

• App.js

function App() {
  const [inputValue, setInputValue] = useState("");

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

    return (
      <div className="App">
        <input
          type="text"
          value={inputValue}
          onChange={handleInput}
        />      
      </div>
    );
}

export default App;

현재 App.js는 다음과 같이 되어있습니다. 이에 대해 앞으로 input에 대한 로직이 위의 소스코드와 동일하다면 재사용을 할 수 있도록 custom hooks로 빼면 좋을 것 같습니다.

---

4.2 hooks로 빼기

• useInput.js

import { useState } from "react";

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

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

    return [
        inputValue,
        handleInput
    ];
}

위에서 살펴보았던 App.js에서 input에 대한 소스를 useInput.js라는 hook으로 따로 빼보았습니다.

---

4.3 App.js에 적용하기

import './App.css'
import { useState } from "react";
import { useInput } from './useInput';

function App() {
  const [inputValue, handleInput] = useInput("");

  console.log(inputValue);

    return (
      <div className="App">
        <input
          type="text"
          value={inputValue}
          onChange={handleInput}
        />
      </div>
    );
}

export default App;

적용하면 위와 같습니다. 애초에 소스코드가 그리 복잡하지 않기 때문에 보기 좋아진 것이 잘 티가 나지 않을 순 있지만 소스코드가 복잡할 때 적용해보시면 얼마나 효율적인지 알게 되실겁니다.
console은 useInput이 잘 동작하는지 확인하기 위해 작성하였습니다.

결과적으로 아주 잘 동작하는 것을 확인할 수 있었습니다.