Custom Hooks

✅ 관심사의 분리

코드가 한가지의 기능만 하도록 각 관심사에 따라 코드를 분리하는 기법이다. 특정한 변화에 대응하기 위해 수정해야 하는 코드의 단위가 줄어들어 유지 보수에 용이하게 된다.

✍️ 관심사 분리의 특징

• 하나의 기능을 담당하기에 단위별로 재사용하기 쉬워짐
• 변경사항이 발생했을 때 담당 코드만 수정하면 되기에 유지보수가 용이해짐
• 하나의 기능만 수행하기에 기능이 제대로 동작하고 있는지 테스트하기 쉬워짐
• 낮은 결합도 : 코드가 얽혀있지 않고 관심사별로 독립적으로 잘 분리되어있는 것
• 높은 응집도 : 동일한 목적을 가진 코드끼리 잘모여져 있는 것.
• 소프트웨어 개발 원칙 : KISS
  • Keep It Simple, Stupid
  • 하나의 코드에서 여러 기능을 담당하면 코드가 복잡해지고 변화와 확장이 어려움
  • 관심사 분리를 통해 하나의 코드가 하나의 기능을 담당하도록 구성
  • 코드가 간결해지고 목적이 명확히 드러남

✅ custom hook이란?

컴포넌트를 만들다보면, 반복되는 로직이 자주 발생한다. 예를 들어서 input 을 관리하는 코드는 관리 할 때마다 꽤나 비슷한 코드가 반복되곤 한다. 그러한 상황에서는 함수단위로 로직을 각각 분리 할 수 있는 custom hook을 만들어 사용하면 아래와 같은 장점을 얻을 수 있다

• 로직의 복잡한 내부 구조를 숨기고 단순한 함수의 호출 형태로 사용할 수 있다.
• 함수를 여러 컴포넌트에서 호출하는 방식으로 로직을 재사용 할 수 있다.

✅ custom hook 사용법

import { useState } from "react";

//hook의 이름은 꼭 use로 시작해야 된다.

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

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

  const handleSubmit = () => {
    setInputvalue("");
    submitAction(inputValue);
  };
  
//app.js에서 사용할 변수들은 return 안에 입력한다.

  return [inputValue, handleChange, handleSubmit];
  

App.js 파일

function displayMessage(message) {
  alert(message);
}

function App() {

//useInput 파일에서 return했던 변수들은  import 해준다.
  const [inputValue, handleChange, handleSubmit] = useInput(
    "안녕", (초기값)
    displayMessage,
  );

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

export default App;

https://dev.to/arafat4693/15-useful-react-custom-hooks-that-you-can-use-in-any-project-2ll8?utm_source=oneoneone