React Hooks 정리 (useState, useEffect, useCallback, useMemo, useRef, useReducer)

React Hooks

React에서 제공하는 주요 Hooks는 함수형 컴포넌트에서 상태 관리와 생명주기 관련 기능을 사용할 수 있도록 도와줌

useState

컴포넌트에서 상태(state)를 관리하기 위한 Hook

• state: 현재 상태 값
• setState: 상태를 업데이트하는 함수
• initialValue: 상태의 초기값

// 사용법
const [state, setState] = useState(initialValue);

// Example
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);

 

useEffect

• 컴포넌트의 부수 효과(side effects)를 처리하기 위한 Hook
• 데이터 가져오기, 구독 설정, DOM 업데이트 등

• dependencies: 의존성 배열. 배열 내 값이 변경될 때만 실행

// 사용법
useEffect(() => {
  // 실행할 코드
  return () => {
    // 정리(cleanup) 코드 (선택 사항)
  };
}, [dependencies]);

// Example 1
useEffect(() => {
  console.log('마운트 될 때만 실행');
}, []);

// Example 2
useEffect(() => {
  console.log('렌더링 될 때 마다 실행');
});

// Example 3
useEffect(() => {
  console.log('업데이트 될 때 실행');
  return () => console.log('Cleanup on unmount or dependency change');
}, [dependency]);

 

useCallback

함수를 메모이제이션하여, 동일한 함수 인스턴스를 재사용하도록 최적화

// 사용법
const memoizedCallback = useCallback(() => {
  // 함수 내용
}, [dependencies]);

// Example
const handleClick = useCallback(() => {
  console.log('Button clicked');
}, []);

useCallback을 사용하지 않으면 ParentComponent가 리렌더링 될 때마다 handleClick 함수가 새로 생성됨

 

useMemo

계산된 값을 메모이제이션하여, 불필요한 계산을 방지

// 사용법
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

// Example
const expensiveCalculation = useMemo(() => {
  return heavyComputation(data);
}, [data]);

 

useRef

• DOM 요소나 값을 저장하고 참조하기 위한 Hook
• 값이 변경되어도 컴포넌트가 리렌더링되지 않음

• ref.current: 저장된 값에 접근

// 사용법
const ref = useRef(initialValue);

// Example
const inputRef = useRef(null);

const focusInput = () => {
  inputRef.current.focus();
};

 

useReducer

• 복잡한 상태 로직을 관리하기 위한 Hook
• Redux와 유사한 방식으로 동작

• reducer: 상태를 업데이트하는 함수.
• initialState: 초기 상태 값

// 사용법
const [state, dispatch] = useReducer(reducer, initialState);

// Example
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 [state, dispatch] = useReducer(reducer, { count: 0 });

const increment = () => dispatch({ type: 'increment' });