[React] Custom Hook

---

1.Custom Hook

컴포넌트 로직을 재사용 가능하게 만들기 위해 사용되는 함수
내장 훅을 조합하여 더 복잡한 로직을 추상화할수도 있고 side Effect를 처리할때 사용할수도있다.

import { useState, useEffect } from 'react';

function useCustomHook() {
  const [state, setState] = useState(null);

  useEffect(() => {
    setState('Hello, world!');
  }, []);

  return state;
}

export default useCustomHook;

 

import React from 'react';
import useCustomHook from './useCustomHook';

function App() {
  const message = useCustomHook();  // Custom Hook 사용

  return (
    <div>
      <h1>{message}</h1> 
    </div>
  );
}

export default App;