React Hooks 가이드

import React, { useState } from 'react';
 
function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>감소</button>
    </div>
  );
}

import React, { useState, useEffect } from 'react';
 
function DataFetcher() {
  const [data, setData] = useState(null);
 
  useEffect(() => {
    async function fetchData() {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    }
 
    fetchData();
  }, []); // 빈 의존성 배열: 최초 1회만 실행
 
  return <div>{/* 데이터 렌더링 */}</div>;
}

import React, { createContext, useContext, useState } from 'react';
 
const ThemeContext = createContext();
 
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
 
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}
 
function ThemedComponent() {
  const { theme, setTheme } = useContext(ThemeContext);
 
  return (
    <div>
      <p>현재 테마: {theme}</p>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        테마 전환
      </button>
    </div>
  );
}

import React, { useReducer } from 'react';
 
function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, { 
        id: Date.now(), 
        text: action.payload, 
        completed: false 
      }];
    case 'TOGGLE_TODO':
      return state.map(todo => 
        todo.id === action.payload 
          ? { ...todo, completed: !todo.completed }
          : todo
      );
    default:
      return state;
  }
}
 
function TodoList() {
  const [todos, dispatch] = useReducer(todoReducer, []);
 
  const addTodo = (text) => {
    dispatch({ type: 'ADD_TODO', payload: text });
  };
 
  return (
    <div>
      {/* Todo 목록 렌더링 로직 */}
    </div>
  );
}