---

Hook

• function 컴포넌트를 위한 라이브러리. (function 컴포넌트만 사용 가능)
• Class 컴포넌트에서만 사용 가능하던 여러 기능을 함수 컴포넌트에 지원하기 위해,
• function 컴포넌트의 값을 유지하기 위해 "캐시"를 만들어 여러 API(React Hook)를 지원.
• Hook의 등장으로 function 컴포넌트가 여러 장점을 가지게 됨.
• 여러 번 호출 가능

function App() {
  const [value1, setValue1] = useState();
  const [value2, setValue2] = useState();
  return (
    <div>
      <div>{value1}</div>
      <div>{value2}</div>
    </div>
  );
}

• 실행문(return) 안에서는 사용 불가.
• 콜백 함수로 비동기 함수 사용 불가.

function App() {
  useEffect(async () => {
    await Promise.resolve(1);
  }, []);
  return (
    <div>
      <div>Test</div>
    </div>
  );
}

종류

useState

useEffect

useContext

useReducer

useRef

forwardRef

useImperativeHandle

useMemo

useCallback

useLayoutEffect

useDebugValue

---