custom hook

처음 hook 을 보았을 때, 기존 함수와 무슨 차이점이 있나 헷갈렸다. 정리하자면 hook은 react 의 hooks 을 사용할 수 있게 해주는 custom hook 이다. React에서 Linter 가 네이밍 컨벤션을 지켜 사용하도록 가이드를 한다.

사용방법

function useCustomHook () {
	const [data, setData] = useState(true);
	useEffect( () => {}, [] );

	return data;
}

• Hook 이름은 항상 use 로 시작한다.
  • ReactComponent 는 항상 대문자로 시작한다. (ex. StatusBar) 그리고 JSX를 return 해야 한다.
  • ReactHook은 use 로 시작하고 그 뒤에 대문자가 와야 한다. (ex. useState) Hook 은 임의의 값은 리턴할 수 있다.
  • linter 가 React 용으로 되어있다면, hook의 네이밍 컨벤션을 안따르고 useState 나 useEffect를 사용하면 컴파일 에러를 낼 것이다. Hook 과 컴포넌트만 다른 hook 을 부를 수 있다.

주의해야 할 custom hook 의 특성

Custom Hook 은 state 자체가 아닌 logic 을 공유한다.

hook 안에 쓰인 state는 하나의 공통 state 가 아니다. hook 인스턴스마다 개별적인 자신의 state가 생성된다.

(아래 링크 예제)

https://react.dev/learn/reusing-logic-with-custom-hooks#custom-hooks-let-you-share-stateful-logic-not-state-itself

Hook은 rendering 할때마다 다시 동작한다. (pure function)

Custom Hook 을 썼을 때 장점

• 데이터 흐름과 Effect를 명확히 사용할 수 있다.
• 컴포넌트가 Effect 의 정확한 구현보다 동작 의도(intent)에 집중할 수 있게 한다.
• React가 새로운 feature 를 추가했을 때 컴포넌트를 변경하지 않고 effect 를 지울 수 있다.

Effect는 최소화하고, 외부 system 로직을 쓸 때는 관련 코드를 외부 system 코드화 하는 것이 좋다.

ref: https://react.dev/learn/reusing-logic-with-custom-hooks