11. Hooks를 활용한 상태 관리 - 3

기타 사용 가능한 Hooks 소개 (useReducer, useContext 등)

React에서는 useState와 useEffect와 같은 기본 훅 외에도 다양한 커스텀 훅을 제공합니다. 이번 글에서는 주요 커스텀 훅 중에서 useReducer와 useContext를 중점적으로 다뤄보겠습니다.

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 (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

useContext 훅 소개

useContext 훅은 React의 Context를 활용하여 컴포넌트 간에 상태를 공유할 수 있도록 해줍니다.

import React, { useContext } from 'react';

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

function ThemeButton() {
  const theme = useContext(ThemeContext);
  return <button style={{ background: theme }}>Button</button>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemeButton />
    </ThemeContext.Provider>
  );
}

기타 사용 가능한 Hooks

1. useMemo: 성능 최적화를 위해 계산된 값을 캐싱할 때 사용됩니다.
2. useCallback: 메모이제이션된 콜백 함수를 생성할 때 사용됩니다.
3. useRef: 컴포넌트의 ref를 생성할 때 사용됩니다.
4. useLayoutEffect: 렌더링 직후에 동기적으로 특정 작업을 수행할 때 사용됩니다.
5. useImperativeHandle: 부모 컴포넌트에서 자식 컴포넌트의 인스턴스에 접근할 때 사용됩니다.

마무리

React의 훅을 활용하면 함수형 컴포넌트에서도 상태 관리와 라이프사이클 이벤트 처리 등의 작업을 효율적으로 수행할 수 있습니다. useReducer를 사용하면 복잡한 상태 관리 로직을 더 깔끔하게 작성할 수 있고, useContext를 사용하면 상태를 전역적으로 관리할 수 있습니다. 기타 다양한 훅들을 적절히 활용하여 코드를 더욱 간결하고 유지보수하기 쉽게 작성할 수 있습니다.