React Hooks: 함수형 컴포넌트의 강력한 기능

개발팀
2분 읽기
ReactHooks상태관리

React Hooks: 함수형 컴포넌트의 강력한 기능

React Hooks는 함수형 컴포넌트에서도 상태와 다른 React 기능을 사용할 수 있게 해줍니다.

useState Hook

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        증가
      </button>
    </div>
  );
}

useEffect Hook

import { useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 마운트 시 실행
    fetchData().then(setData);

    return () => {
      // 언마운트 시 정리
    };
  }, []); // 의존성 배열

  return <div>{data && <p>{data}</p>}</div>;
}

useContext Hook

const ThemeContext = createContext();

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

function MyComponent() {
  const theme = useContext(ThemeContext);
  return <div className={theme}>Content</div>;
}

커스텀 Hooks

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const item = window.localStorage.getItem(key);
    return item ? JSON.parse(item) : initialValue;
  });

  const setStoredValue = (value) => {
    setValue(value);
    window.localStorage.setItem(key, JSON.stringify(value));
  };

  return [value, setStoredValue];
}

자주 사용되는 Hooks

  • useState: 상태 관리
  • useEffect: 부작용 처리
  • useContext: 컨텍스트 접근
  • useReducer: 복잡한 상태 관리
  • useCallback: 함수 메모이제이션
  • useMemo: 값 메모이제이션

React Hooks를 잘 이해하고 사용하면 더 깔끔하고 재사용 가능한 컴포넌트를 만들 수 있습니다.

React Hooks: 함수형 컴포넌트의 강력한 기능 | 블로그