https://ko.reactjs.org/docs/hooks-overview.html

**근데 Hook이 뭔가요?**
Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 
“연동(hook into)“할 수 있게 해주는 함수입니다.

import React, { useState } from 'react';

function Example() {
  // "count"라는 새 상태 변수를 선언합니다
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState는 인자로 초기 state 값을 하나 받습니다. 
카운터는 0부터 시작하기 때문에 위 예시에서는 초기값으로 0을 넣어준 것입니다.
이 초기값은 **첫 번째 렌더링에만 딱 한번 사용**됩니다.

**Effect Hook**
React class의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 
목적으로 제공되지만, 하나의 API로 통합된 것입니다.

useEffect를 사용하면, React는 DOM을 바꾼 뒤에 “effect” 함수를 실행할 것입니다. 
Effects는 컴포넌트 안에 선언되어있기 때문에 props와 state에 접근할 수 있습니다. 
기본적으로 React는 매 렌더링 이후에 effects를 실행합니다. 첫 번째 렌더링도 포함해서요.

Hook을 사용하면 구독을 추가하고 제거하는 로직과 같이 서로 관련 있는 코드들을 한군데에 모아서 
작성할 수 있습니다. 
반면 class 컴포넌트에서는 생명주기 메서드(lifecycle methods) 각각에 쪼개서 넣어야만 했습니다.

**Hook 사용 규칙**
최상위(at the top level)에서만 Hook을 호출해야 합니다. 
반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요.

React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다. 
일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다. 
(Hook을 호출할 수 있는 곳이 딱 한 군데 더 있습니다. 바로 직접 작성한 custom Hook 내입니다. 이것에 대해서는 나중에 알아보겠습니다.)