React Hooks 실전 활용 가이드 – 초보자도 쉽게 따라하는 완벽 가이드

1. 도입 – 학습 목표 및 필요성

이 React Hooks 실전 활용 가이드는 React 개발자라면 반드시 알아야 할 Hooks의 모든 것을 다룹니다. React 16.8 버전에서 도입된 Hooks는 함수형 컴포넌트에서도 상태 관리와 생명주기 기능을 사용할 수 있게 해주는 혁신적인 기능입니다. 클래스 컴포넌트의 복잡성을 줄이고, 코드 재사용성을 높이며, 더 직관적인 컴포넌트 로직 구성이 가능합니다. 이 가이드를 통해 useState, useEffect, useContext, useMemo, useCallback 등 핵심 Hooks를 실전 예제와 함께 학습하고, 실무에서 바로 적용할 수 있는 패턴과 베스트 프랙티스를 익힐 수 있습니다. 초보자부터 중급 개발자까지 모두에게 유용한 실전 중심의 튜토리얼입니다.

2. 기본 개념 설명

React Hooks는 함수형 컴포넌트에서 React의 기능을 “갈고리처럼 연결(hook into)”할 수 있게 해주는 특별한 함수입니다. 기존 클래스 컴포넌트에서만 가능했던 state 관리, 생명주기 메서드, context 접근 등을 함수형 컴포넌트에서도 사용할 수 있게 되었습니다.

핵심 Hooks의 역할:

• useState: 컴포넌트에 상태 변수를 추가합니다. 배열 구조 분해를 통해 현재 상태값과 업데이트 함수를 받습니다.
• useEffect: 부수 효과(side effects)를 수행합니다. 데이터 fetching, 구독 설정, DOM 조작 등에 사용됩니다.
• useContext: Context API를 통해 전역 상태를 쉽게 공유합니다.
• useMemo: 계산 비용이 높은 작업의 결과를 메모이제이션합니다.
• useCallback: 함수를 메모이제이션하여 불필요한 재생성을 방지합니다.
• useRef: 렌더링 간에 유지되는 변경 가능한 참조를 생성합니다.

Hooks 사용 시 두 가지 규칙을 반드시 지켜야 합니다: (1) 최상위 레벨에서만 호출하고, (2) React 함수 컴포넌트나 커스텀 Hook 내에서만 호출해야 합니다.

3. 단계별 구현 가이드

3.1 useState로 상태 관리하기

useState는 가장 기본적인 Hook으로, 컴포넌트에 상태를 추가할 때 사용합니다. 첫 번째 단계는 초기값을 설정하는 것입니다.

단계 1: useState 임포트

import React, { useState } from 'react';

단계 2: 상태 변수 선언

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

여기서 count는 현재 상태값, setCount는 상태를 업데이트하는 함수입니다. 0은 초기값입니다.

단계 3: 상태 업데이트

setCount(count + 1); // 직접 값 전달
setCount(prevCount => prevCount + 1); // 함수형 업데이트 (권장)

3.2 useEffect로 부수 효과 처리하기

useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정합니다.

단계 1: 기본 useEffect 사용

useEffect(() => {
  // 실행할 코드
  document.title = `클릭 횟수: ${count}`;
});

단계 2: 의존성 배열 활용

useEffect(() => {
  // count가 변경될 때만 실행
  document.title = `클릭 횟수: ${count}`;
}, [count]);

단계 3: 정리(cleanup) 함수 사용

useEffect(() => {
  const subscription = subscribeToData();
  
  return () => {
    // 컴포넌트 언마운트 시 실행
    subscription.unsubscribe();
  };
}, []);

3.3 커스텀 Hook 만들기

반복되는 로직을 재사용 가능한 커스텀 Hook으로 추출할 수 있습니다.

단계 1: use로 시작하는 함수 생성

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });
  
  const setValue = (value) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error(error);
    }
  };
  
  return [storedValue, setValue];
}

단계 2: 커스텀 Hook 사용

const [name, setName] = useLocalStorage('name', '사용자');

3.4 useContext로 전역 상태 관리

단계 1: Context 생성

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

단계 2: Provider로 값 제공

function App() {
  const [theme, setTheme] = useState('light');
  
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <ChildComponent />
    </ThemeContext.Provider>
  );
}

단계 3: useContext로 값 사용

function ChildComponent() {
  const { theme, setTheme } = useContext(ThemeContext);
  return <div>현재 테마: {theme}</div>;
}

4. 실제 코드 예제와 설명

실전에서 자주 사용되는 Todo 애플리케이션을 Hooks로 구현해보겠습니다.

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

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');
  const [filter, setFilter] = useState('all');

  // 로컬 스토리지에서 todos 불러오기
  useEffect(() => {
    const savedTodos = localStorage.getItem('todos');
    if (savedTodos) {
      setTodos(JSON.parse(savedTodos));
    }
  }, []);

  // todos 변경 시 로컬 스토리지에 저장
  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos));
  }, [todos]);

  // 할 일 추가 (useCallback으로 최적화)
  const addTodo = useCallback(() => {
    if (input.trim()) {
      setTodos(prev => [...prev, {
        id: Date.now(),
        text: input,
        completed: false
      }]);
      setInput('');
    }
  }, [input]);

  // 할 일 토글
  const toggleTodo = useCallback((id) => {
    setTodos(prev => prev.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  }, []);

  // 할 일 삭제
  const deleteTodo = useCallback((id) => {
    setTodos(prev => prev.filter(todo => todo.id !== id));
  }, []);

  // 필터링된 todos
  const filteredTodos = todos.filter(todo => {
    if (filter === 'active') return !todo.completed;
    if (filter === 'completed') return todo.completed;
    return true;
  });

  return (
    <div className="todo-app">
      <h1>할 일 목록</h1>
      <div>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && addTodo()}
          placeholder="할 일을 입력하세요"
        />
        <button onClick={addTodo}>추가</button>
      </div>
      
      <div>
        <button onClick={() => setFilter('all')}>전체</button>
        <button onClick={() => setFilter('active')}>진행중</button>
        <button onClick={() => setFilter('completed')}>완료</button>
      </div>

      <ul>
        {filteredTodos.map(todo => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleTodo(todo.id)}
            />
            <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
              {todo.text}
            </span>
            <button onClick={() => deleteTodo(todo.id)}>삭제</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

이 예제는 useState로 상태를 관리하고, useEffect로 로컬 스토리지와 동기화하며, useCallback으로 함수를 최적화하는 실전 패턴을 보여줍니다.

5. 고급 활용 방법

useMemo로 성능 최적화: 계산 비용이 높은 작업의 결과를 캐싱합니다.

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);

useReducer로 복잡한 상태 관리: 여러 하위 값이 있거나 다음 상태가 이전 상태에 의존하는 경우 유용합니다.

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

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

useRef로 DOM 직접 접근: 포커스 관리, 애니메이션 등에 활용합니다.

const inputRef = useRef(null);

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

return <input ref={inputRef} />;

커스텀 Hook 패턴: useWindowSize, useFetch, useDebounce 등 재사용 가능한 로직을 추상화하여 코드 품질을 높일 수 있습니다.

6. 마무리 및 추가 학습 자료

이 React Hooks 실전 활용 가이드를 통해 Hooks의 핵심 개념부터 실전 활용법까지 학습했습니다. Hooks는 React 개발의 패러다임을 바꾼 강력한 도구이며, 지속적인 연습을 통해 더욱 효율적인 코드를 작성할 수 있습니다.

추가 학습 자료:

• React 공식 문서의 Hooks API Reference
• useHooks.com – 커스텀 Hook 예제 모음
• React Hook Form – 폼 관리 라이브러리
• SWR, React Query – 데이터 페칭 라이브러리

실전 프로젝트에서 Hooks를 적극 활용하며 베스트 프랙티스를 익혀보세요. 이 React Hooks 실전 활용 가이드가 여러분의 React 개발 역량 향상에 도움이 되길 바랍니다!