React Hooks #6 커스텀 훅 만들기

eunji hwang·2020년 7월 13일
0

REACT

목록 보기
10/16
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;
}

만들기 규칙

  • 훅의 호출 순서는 동일해야 한다
    • 반복문/조건문/함수안에서 훅 호출은 순서를 변경 시킴으로 사용 금지
  • 훅은 커스텀 훅, 함수형 컴포넌트 안에서만 사용
profile
TIL 기록 블로그 :: 문제가 있는 글엔 댓글 부탁드려요!

0개의 댓글