[React] Custom Hook

Hook?

Closure의 개념을 활용. 함수형 컴포넌트에서 사용된다.
이 전 상태를 기억하여 컴포넌트의 생명주기를 다룰 수 있게 한다.

규칙

1. use~ 방식으로 작명해야 한다.
   ex) useState, useLogin ...
2. 최상위에서만 호출되어야 한다.
3. React 함수 내에서만 호출되어야 한다.

종류(기본으로 제공)

• useState
• useEffect
• useRef
• useMemo
• useCallback
  ...

Custom Hook

위와 같은 개념들을 갖고 직접 Hook을 제작하는 것이다.

필요성(장점)

1. 각 컴포넌트가 명확한 역할을 갖는 데 도움.
2. 선언형 프로그래밍에 용이.
3. 상태 관리 로직의 재활용.

example

...

ref.

• 가장 이해 잘 됨
• https://velog.io/@hae2ni/Custom-Hook%EC%97%90-%EA%B4%80%ED%95%98%EC%97%AC
• https://hong-jh.tistory.com/entry/React-Hook-%EB%8F%99%EC%9E%91%EC%9B%90%EB%A6%AC%EC%99%80-Custom-Hook%EC%82%AC%EC%9A%A9%EC%9D%B4%EC%9C%A0
• https://leego.tistory.com/entry/React-Custom-hook%EC%9D%84-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%A0%84%EC%97%90-%EA%B3%A0%EB%A0%A4%ED%95%B4%EC%95%BC-%ED%95%A0-%EA%B2%83%EB%93%A4