[React] Hook 시작하기

Hook이란?

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다.

• hook으로 만들면 class component, didMount, render 같은 것들을 하지 않아도 된다.
  • 이 모든 것이 하나의 함수가 된다.
• fuctional component에서 state를 가질 수 있게 해준다.

Hook 종류

기본 Hook

• useState
• useEffect
• useContext

추가 Hook

• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue

Hook 규칙

• 최상위 레벨에서만 Hook을 호출해야한다.
  • 반복문, 조건문, 중첩된 함수 내에서 Hook을 호출하면 안된다.
    (반복문, 조건문을 사용하고 싶다면 이들을 Hook 내부에 넣으면 된다. )
• React 함수 내에서만 Hook을 호출해야한다.
  • custom Hook에서 Hook을 호출할 수 있다.

Hook 예시

import React, { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <div className="App">
      {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

• 카운트가 증가하는 일반적인 로직을 생각했을 때에 비해서 코드가 훨씬 간단해졌다.