Hook 이란?

Hook은 클래스 컴포넌트에서만 사용할수 있었던 state 관리와 lifecyle 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동(hook in)해주는 함수를 의미하며, 이러한 Hook 들의 모음을 Hooks라 한다

Hook 등장 배경

React에서 컴포넌트를 생성하는 방법은 두가지가 있다

• 클래스 컴포넌트
• 함수 컴포넌트
  React 초창기에 클래스 컴포넌트에서만 사용할 수 있었던 (상태관리, lifecyle 등) 기능이 있었기 때문에 클래스 컴포넌트를 사용을 해왔다.

  클래스 컴포넌트 단점 : 선언이 복잡, 직관적이지않음, 메모리 자원을 많이 사용함
  React 개발자들 사이에 함수 컴포넌트를 사용하고자 하는 니즈가 많아져서 클래스 컴포넌트의 장점을 함수컴포넌트에 적용할 수 있는 함수가 개발됨

Hook이 나오면서 클래스 컴포넌트에서만 사용할 수 있었던 (상태관리, lifecyle 등) 기능을 함수 컴포넌트 에서도 사용할 수 있게 되면서 이제는 함수 컴포넌트를 범용적으로 사용

Hook 특징

• 함수 컴포넌트에서만 사용이 가능
• hook 이름은 반드시 use- 로 시작한다
• 리액트에서 제공하고있는 내장 hook이 존재한다 (useState, useEffect, ...)
  이 hook들은 외부 라이브러리를 설치하지 않더라도 사용 가능
• 직접 hook을 만드는 것도 가능하다 : custom hook

Hook 사용규칙

1. Hook은 함수 컴포넌트 혹은 custom hook 안에서만 호출할 수 있다
   클래스컴포넌트는 물론이고 일반 자바스크립트 함수내에서도 호출불가

2. Hook은 함수 컴포넌트 내의 최상위 에서만 호출해야 한다
   최상위 : 함수 컴포넌트의 첫번째 중괄호 내부를 의미
   반복문, 조건문 등 중첩된 함수 내에서는 호출불가

//customhook : use 키워드를 사용해 camelcase로 작성한 함수
const useSomeFunction = ({someProps}) => {
  const [someState, setSomeState] = useState(0);
  
  useEffect(() => {
    setSomeState(someProps);
  },[someProps]);
  return someState;
}