[React] React 상태 관리 Hook 정리

1. useState

useState는 가장 기본적인 상태 관리 Hook으로, 컴포넌트 내에서 상태를 저장하고 업데이트하는 데 사용됩니다.

import { useState } from "react";

const MemoPad = () => {
  const [count, setCount] = useState(0);

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

export default MemoPad;

2. useEffect

useEffect는 컴포넌트가 렌더링될 때 특정 로직을 실행하고자 할 때 사용됩니다. 예를 들면 API 호출, 구독(subscription), DOM 업데이트 등의 작업이 가능합니다.

import { useState, useEffect } from "react";

const MemoPad = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    return () => clearInterval(interval); // cleanup 함수
  }, []);

  return <p>Seconds: {seconds}</p>;
};

export default MemoPad;

3. useContext

useContext는 전역 상태를 관리할 때 사용되며, React.createContext와 함께 사용됩니다. 전역 상태를 쉽게 공유할 수 있습니다.

import React, { createContext, useContext, useState } from "react";

const ThemeContext = createContext("light");

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState("light");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

const ThemedComponent = () => {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <div>
      <p>Current Theme: {theme}</p>
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>클릭</button>
    </div>
  );
};

const MemoPad = () => {
  return (
    <ThemeProvider>
      <ThemedComponent />
    </ThemeProvider>
  );
};

export default MemoPad;

4. useReducer

useReducer는 useState보다 복잡한 상태를 관리하는 데 유용합니다. 보통 Redux 패턴과 유사한 형태로 상태를 업데이트할 수 있습니다.

import { useReducer } from "react";

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const MemoPad = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </div>
  );
};

export default MemoPad;

5. useRef

useRef는 DOM 요소에 접근하거나 컴포넌트가 리렌더링될 때 값이 유지되도록 하는 데 사용됩니다.

import { useRef, useEffect } from "react";

const MemoPad = () => {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} type="text" placeholder="Text" />;
};

export default MemoPad;

6. useMemo

useMemo는 성능 최적화를 위해 특정 연산을 캐싱할 때 사용됩니다.

import { useState, useMemo } from "react";

const MemoPad = ({ num }) => {
  const result = useMemo(() => {
    console.log("Calculating...");
    return num * 2;
  }, [num]);

  return <p>결과:  {result}</p>;
};

export default MemoPad;

7. useCallback

useCallback은 함수가 불필요하게 다시 생성되는 것을 방지하는 Hook입니다.

import { useState, useCallback } from "react";

const MemoPad = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log("Button clicked!");
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>버튼</button>
      <ChildComponent on={handleClick} />
    </div>
  );
};

const ChildComponent = ({ on }) => {
  return <button onClick={on}>클릭</button>;
};

export default MemoPad;