import React, {useState, useEffect} from 'react'

function useCustomHooksName() {
  const [state, setState] = useState('initState');
  useEffect(()=>{
    // ... 로직구현
    return //...
  },[])
  return //...
}

커스텀 훅 만들기

React에서 기본으로 제공하는 useState, useEffect 등의 훅을 사용해 새로운 훅을 만들어낸다.

• 창의 너비를 알려주는 훅
• 컴포넌트의 마운트 여부를 알려주는 훅(HOC보다 훨씬 간결하게 사용가능하며, 타입스크립트와의 호환도 좋다!)

function useHasMounted() {
  const [ hasMounted, setHasMounted ] = useState(false);
  useEffect(()=>{ setHasMounted(true)},[])
  return hasMounted;
}

만들기 규칙

• 훅의 호출 순서는 동일해야 한다
  • 반복문/조건문/함수안에서 훅 호출은 순서를 변경 시킴으로 사용 금지
• 훅은 커스텀 훅, 함수형 컴포넌트 안에서만 사용