React Hook 종류 정리

React Hook 이미지

Hook 종류 설명

useState	컴포넌트 상태를 관리	카운터, 폼 입력 값 관리	const [count, setCount] = useState(0);
useEffect	컴포넌트의 사이드 이펙트를 관리	데이터 페칭, 구독, DOM 업데이트	useEffect(() => { document.title = count; }, [count]);
useContext	컴포넌트 트리 전체에서 전역 데이터를 공유	테마, 사용자 인증 정보	const theme = useContext(ThemeContext);
useReducer	복잡한 상태 로직을 관리	복잡한 상태 로직, 여러 하위 값 관리	const [state, dispatch] = useReducer(reducer, initialState);
useCallback	메모이제이션된 콜백을 반환	자식 컴포넌트에 콜백 전달 시 성능 최적화	const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);
useMemo	메모이제이션된 값을 반환	비용이 많이 드는 계산의 성능 최적화	const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
useRef	변수가 아닌 값이나 DOM 엘리먼트를 저장	DOM 엘리먼트 접근, 이전 값 저장	const inputEl = useRef(null);
useImperativeHandle	부모 컴포넌트가 자식 컴포넌트의 인스턴스 값을 참조할 수 있게 함	자식 컴포넌트에서 부모 컴포넌트에 특정 기능 노출	useImperativeHandle(ref, () => ({ customMethod }));
useLayoutEffect	DOM 업데이트 후 동기적으로 실행	레이아웃 측정, DOM 조작	useLayoutEffect(() => { measureLayout(); });
useDebugValue	커스텀 훅에 대한 디버그 정보를 표시	커스텀 훅 디버깅	useDebugValue(isOnline ? 'Online' : 'Offline');

 

Hook 예제 코드

useState

useState는 React에서 상태를 관리하기 위한 Hook 중 하나입니다. 함수형 컴포넌트에서 상태를 추가하고 관리할 수 있게 해줍니다. useState는 상태 변수와 상태를 갱신할 수 있는 함수를 반환합니다. 이를 통해 컴포넌트가 상태 변화에 따라 다시 렌더링될 수 있습니다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

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

useEffect

useEffect는 React에서 부수 효과(side effects)를 처리하기 위해 사용되는 Hook입니다. 주로 데이터 가져오기, 구독(subscription) 설정, DOM 조작 등을 수행할 때 사용됩니다. useEffect는 컴포넌트가 렌더링된 후에 특정 작업을 수행하도록 합니다.

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

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

useContext

useContext는 React의 Context API를 사용하는 Hook입니다. Context를 통해 전역적으로 상태를 관리하고 하위 컴포넌트로 전달할 수 있습니다. 예를 들어, 테마나 사용자 인증 정보 같은 것을 Context로 관리할 수 있습니다.

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button style={{ background: theme === 'dark' ? '#333' : '#fff' }}>Themed Button</button>;
}

useReducer

useReducer는 상태와 상태를 갱신하는 로직을 분리하여 복잡한 상태 관리를 할 수 있도록 해줍니다. useReducer는 useState의 대안으로, 특히 상태가 여러 개의 하위 값으로 구성되어 있을 때 유용합니다.

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

useCallback

useCallback은 콜백 함수의 메모이제이션을 위해 사용됩니다. 함수 컴포넌트가 렌더링될 때마다 콜백 함수를 새로 생성하지 않도록 해주어 성능을 최적화할 수 있습니다.

import React, { useState, useCallback } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const memoizedCallback = useCallback(() => {
    console.log(count);
  }, [count]);

  return (
    <div>
      <button onClick={memoizedCallback}>Log Count</button>
    </div>
  );
}

useMemo

useMemo는 값의 메모이제이션을 위해 사용됩니다. 주어진 함수가 반환하는 값을 캐싱하여, 의존성이 변경되지 않는 한 이전에 계산된 값을 반환합니다. 주로 성능 최적화를 위해 사용됩니다.

import React, { useState, useMemo } from 'react';

function ExpensiveComponent({ a, b }) {
  const memoizedValue = useMemo(() => {
    console.log('Calculating...');
    return a + b;
  }, [a, b]);

  return <div>Result: {memoizedValue}</div>;
}

useRef

useRef는 컴포넌트의 DOM 요소나 어떤 값을 지속적으로 유지하고 싶을 때 사용됩니다. 초기값을 받아 current라는 프로퍼티를 가지는 객체를 반환합니다.

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </div>
  );
}

useImperativeHandle

useImperativeHandle은 부모 컴포넌트가 자식 컴포넌트의 인스턴스를 통해 특정 함수를 호출할 수 있도록 합니다. 이 Hook은 주로 라이브러리를 만들 때 사용됩니다.

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} />;
});

function ParentComponent() {
  const inputRef = useRef();

  return (
    <div>
      <FancyInput ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus Input</button>
    </div>
  );
}

useLayoutEffect

useLayoutEffect는 useEffect와 비슷하지만, 모든 DOM 변화를 적용한 후에 동기적으로 실행됩니다. 주로 레이아웃을 측정하거나 DOM을 직접 조작해야 할 때 사용됩니다.

javascript코드 복사
import React, { useLayoutEffect, useRef } from 'react';

function LayoutComponent() {
  const ref = useRef();

  useLayoutEffect(() => {
    const rect = ref.current.getBoundingClientRect();
    console.log(rect);
  });

  return <div ref={ref}>Hello, world!</div>;
}

useDebugValue

useDebugValue는 사용자 정의 Hook을 디버깅할 때 유용합니다. 개발자 도구에서 Hook의 상태를 쉽게 확인할 수 있도록 해줍니다.

javascript코드 복사
import React, { useState, useEffect, useDebugValue } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    // Assume there's a ChatAPI.subscribeToFriendStatus method...
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  }, [friendID]);

  useDebugValue(isOnline ? 'Online' : 'Offline');

  return isOnline;
}