React Hooks

Hooks는 함수 컴포넌트에서 state, 생명주기, ref 등 React의 기능을 사용할 수 있게 해주는 함수이다.

기존에는 state나 생명주기 메서드 같은 기능을 사용하려면 클래스 컴포넌트를 사용해야 했다. 하지만 Hooks가 등장하면서 함수 컴포넌트에서도 상태 관리, 렌더링 이후 작업, DOM 접근 등의 기능을 사용할 수 있게 되었다.

Hooks를 사용하는 이유

Hooks를 사용하면 함수 컴포넌트 안에서 React의 다양한 기능을 더 간단하게 다룰 수 있다. 대표적인 Hooks는 다음과 같다.

• useState : 컴포넌트 내부에서 상태를 관리할 때 사용
• useEffect : 렌더링 이후 특정 작업을 실행할 때 사용
• useRef : 렌더링과 상관없이 값을 저장하거나 DOM 요소에 접근할 때 사용
• useMemo : 계산된 값을 재사용할 때 사용
• useCallback : 함수를 재사용할 때 사용

Hooks의 특징

Hooks는 일반 JavaScript 함수처럼 보이지만, React의 렌더링 흐름과 연결되어 동작한다.
따라서 사용할 때 몇 가지 규칙을 지켜야 한다.

• 함수 컴포넌트 또는 커스텀 Hook 내부에서 호출해야 한다.
• 조건문이나 반복문 안에서 호출하면 안 된다.
• 커스텀 Hook을 만들 수 있다.

Hooks의 규칙

Hooks는 컴포넌트가 렌더링될 때마다 항상 같은 순서로 호출되어야 한다.

React는 Hook이 호출되는 순서를 기준으로 각 Hook의 상태를 기억한다.
따라서 조건문이나 반복문 안에서 Hook을 호출하면 렌더링마다 Hook의 호출 순서가 달라질 수 있고, React가 상태를 올바르게 연결하지 못할 수 있다.

// 잘못된 예시
function App({ isLogin }) {
  if (isLogin) {
    const [user, setUser] = useState(null);
  }

  return <div>App</div>;
}

Hook은 조건문이나 반복문 안이 아니라, 컴포넌트의 최상위에서 호출해야 한다.

// 올바른 예시
function App({ isLogin }) {
  const [user, setUser] = useState(null);

  if (!isLogin) {
    return <div>로그인이 필요합니다.</div>;
  }

  return <div>{user}</div>;
}

Custom Hook

반복해서 사용하는 로직은 직접 Hook으로 분리할 수 있다.
이렇게 직접 만든 Hook을 Custom Hook이라고 한다.

Custom Hook의 이름은 반드시 use로 시작해야 한다.

function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  const onChange = (e) => {
    setValue(e.target.value);
  };

  return { value, onChange };
}

use로 시작하는 이름을 사용하면 해당 함수가 Hook의 규칙을 따르는 함수라는 것을 명확하게 표현할 수 있다.