Hook과 함수는 무엇이 다를까

Hook은 기본적으로 Javascript 함수이다.

리액트에서 제공하는 useState, useEffect와 같은 기본 Hook과
직접 만드는 커스텀 Hook 모두 함수로 정의된다.

Hook은 일반 함수와 같이 useFunction() 형태로 사용한다.

다만,

1. 함수 밖에서 사용할 수는 없다.
2. Hook을 사용한 함수는 곧 Custom Hook이 된다.
3. 함수형 컴포넌트 역시 함수이므로, 내부에 Hook을 사용하면 컴포넌트인 동시에 Custom Hook이기도 하다. (use로 시작하는 네이밍 규칙은 이름만 보고도 함수의 성질을 알 수 있는 이름을 짓기 위함이고, Custom Hook의 기술적 조건은 아니다.)
4. 하지만 컴포넌트는 꼭 이름이 대문자로 시작해야 하기 때문에, 네이밍 규칙을 따른 Custom Hook은 컴포넌트가 될 수 없다.

function useUser(id) { // Custom Hook
  const [user, setUser] = useState(null);
  const login = (username, password) => {
    // ...
    if(로그인 성공) {
      setUser(userData);
  }
  const logout = () => {
    // ...
    setUser(null);
  }
  return [user, login, logout];
}

function Nav() { // 함수형 컴포넌트에서 일반 함수처럼 Custom Hook 사용
  const [user, login, logout] = useUser();
  // ...
}

• useUser(id), setUser, Nav 모두 함수이다.
• setUser는 리액트 Hook이다.
• useUser는 커스텀 Hook이지만 컴포넌트는 아니다.
• Nav는 컴포넌트이자 커스텀 Hook이다.