Custom Hook

 

1. Custom Hook 과 일반 함수의 차이

 

커스텀 hook 과 일반 함수 모두 function 선언으로 시작한다.

하지만 일반 함수는 react 의 상태(state) 나 효과(effect) 를 그냥 함수안에 넣을 수는 없다.

그리고 use 라고 시작해야  custom hook 을 만들어서 사용이 가능 하다. 

 

 

2. Coustom Hook 예제 

 

useCounter 라는 커스텀 훅을 만들면 아래와 같이 값만 받아와서 증가 감소 버튼을 만들 수 있다.

const [count, increment, decrement] = useCounter();

 

<div>counter : {count}</div>              
<button onClick={increment}>증가</button>  // 클릭 시 increment 함수 실행
<button onClick={decrement}>감소</button>  // 클릭 시 decrement 함수 실행

 

 

 

 

<useCounter 커스텀 훅> 

기본값으로 0 과 올리고 싶은값 step을 기본값으로 1로 하였고

 

increment 함수가 실행 되면 count + 1

devrement 함수가 실행되면 count -1

 

반환값으로 counter 와 함수 2개를 주었다. 이렇게 하면 함수 2개를 실행만 하면 counter 값을 조정이 가능하다. 

function useCounter(initialValue = 0, step = 1) {
  const [counter, setCounter] = useState(initialValue);

  function increment() {
    setCounter(counter + step);
  }

  function decrement() {
    setCounter(counter - step);
  }
  return [counter, increment, decrement];
}