useReducer

import React, { useReducer } from 'react';

// 1. reducer 함수 정의: (state, action) => newState
function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    case 'RESET':
      return { count: 0 };
    default:
      throw new Error(); // 알 수 없는 액션 타입일 경우 에러 발생
  }
}

function CounterWithReducer() {
  // 2. useReducer 훅 사용: [현재 상태, dispatch 함수] = useReducer(reducer 함수, 초기 상태);
  const [state, dispatch] = useReducer(reducer, { count: 0 }); // 초기 상태는 객체 형태

  return (
    <div style={{ border: '1px solid #7B1FA2', padding: '20px', margin: '20px', borderRadius: '8px' }}>
      <h2>useReducer 카운터</h2>
      <p>카운트: {state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>증가</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })} style={{ marginLeft: '10px' }}>감소</button>
      <button onClick={() => dispatch({ type: 'RESET' })} style={{ marginLeft: '10px' }}>리셋</button>
    </div>
  );
}

export default CounterWithReducer;

// 이 파일은 src 폴더 안에 reducers 폴더를 생성하고 그 안에 저장하는 것을 권장합니다.

// 액션 타입 상수 정의 (오타 방지 및 가독성 향상)
export const ADD_TODO = 'ADD_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO';
export const DELETE_TODO = 'DELETE_TODO';

// (1) reducer 함수 정의: state와 action을 받아 새로운 state를 반환
function todoReducer(state, action) {
  switch (action.type) {
    case ADD_TODO: {
      // 새 할 일 ID 생성 (기존 최대 ID + 1)
      // case 안에서 const를 선언하므로 중괄호로 범위를 나눕니다.
      const newId = state.length > 0 ? Math.max(...state.map(item => item.id)) + 1 : 1;
      return [
        ...state, // 기존 할 일 목록 복사
        {
          id: newId,
          text: action.payload.text, // payload에서 텍스트 가져옴
          completed: false,
        },
      ];
    }
    case TOGGLE_TODO:
      return state.map((todo) =>
        todo.id === action.payload.id ? { ...todo, completed: !todo.completed } : todo
      );
    case DELETE_TODO:
      return state.filter((todo) => todo.id !== action.payload.id);
    default:
      // 알 수 없는 액션 타입을 발견하려고 이 예제에서는 에러를 발생시킵니다.
      throw new Error(`Unhandled action type: ${action.type}`);
  }
}

export default todoReducer;

import React, { useState, useReducer, useEffect } from 'react';
import todoReducer, { ADD_TODO, TOGGLE_TODO, DELETE_TODO } from '../reducers/todoReducer'; // 리듀서와 액션 타입 불러오기

// 초기 상태를 설정하는 함수 (지연 초기화와 로컬 스토리지 결합)
const init = (initialTodos) => {
  try {
    const savedTodos = localStorage.getItem('todoItems_reducer');
    return savedTodos ? JSON.parse(savedTodos) : initialTodos;
  } catch (error) {
    console.error("Failed to parse todos from localStorage", error);
    return initialTodos;
  }
};

function TodoListWithReducer() {
  // 1. useReducer 훅 사용: [현재 상태, dispatch 함수] = useReducer(reducer 함수, 초기 상태, 초기화 함수);
  // 두 번째 인자는 초기 상태, 세 번째 인자는 초기화 함수 (지연 초기화)
  const [todos, dispatch] = useReducer(todoReducer, [], init); // 빈 배열은 init 함수의 initialTodos로 전달

  // 새 할 일 입력 필드를 위한 useState (이것은 단순 상태이므로 useState 유지)
  const [newTodoText, setNewTodoText] = useState('');

  // 2. todos 상태가 변경될 때마다 로컬 스토리지에 저장 (useEffect 사용)
  useEffect(() => {
    localStorage.setItem('todoItems_reducer', JSON.stringify(todos));
  }, [todos]); // todos가 의존성 배열에 있으므로, 변경될 때마다 실행

  // 3. 새 할 일 입력 필드 변경 핸들러
  const handleInputChange = (e) => {
    setNewTodoText(e.target.value);
  };

  // 4. 할 일 추가 핸들러
  const handleAddTodo = (e) => {
    e.preventDefault();
    if (newTodoText.trim() === '') return;

    // dispatch 함수를 호출하여 ADD_TODO 액션 전달
    dispatch({ type: ADD_TODO, payload: { text: newTodoText } });
    setNewTodoText(''); // 입력 필드 초기화
  };

  // 5. 할 일 완료 상태 토글 핸들러
  const handleToggleComplete = (id) => {
    dispatch({ type: TOGGLE_TODO, payload: { id: id } });
  };

  // 6. 할 일 삭제 핸들러
  const handleDeleteTodo = (id) => {
    dispatch({ type: DELETE_TODO, payload: { id: id } });
  };

  // 7. JSX 렌더링
  return (
    <div style={{ maxWidth: '500px', margin: '30px auto', padding: '20px', border: '1px solid #7B1FA2', borderRadius: '10px', boxShadow: '0 2px 10px rgba(0,0,0,0.1)' }}>
      <h2>Reducer로 관리하는 Todo List</h2>
      {/* 할 일 추가 폼 */}
      <form onSubmit={handleAddTodo} style={{ display: 'flex', marginBottom: '20px' }}>
        <input
          type="text"
          value={newTodoText}
          onChange={handleInputChange}
          placeholder="새 할 일을 입력하세요..."
          style={{ flexGrow: 1, padding: '10px', fontSize: '16px', border: '1px solid #ddd', borderRadius: '5px 0 0 5px' }}
        />
        <button type="submit" style={{ padding: '10px 15px', fontSize: '16px', backgroundColor: '#7B1FA2', color: 'white', border: 'none', borderRadius: '0 5px 5px 0', cursor: 'pointer' }}>
          추가
        </button>
      </form>

      {/* 할 일 목록 */}
      {todos.length === 0 ? (
        <p style={{ textAlign: 'center', color: '#666' }}>아직 할 일이 없습니다. 새 할 일을 추가해 보세요!</p>
      ) : (
        <ul style={{ listStyle: 'none', padding: 0 }}>
          {todos.map((todo) => (
            <li
              key={todo.id}
              style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                padding: '10px',
                borderBottom: '1px dashed #eee',
                backgroundColor: todo.completed ? '#f0f4f8' : 'white', // 조건부 스타일링
              }}
            >
              <div style={{ display: 'flex', alignItems: 'center', flexGrow: 1 }}>
                <input
                  type="checkbox"
                  checked={todo.completed}
                  onChange={() => handleToggleComplete(todo.id)}
                  style={{ marginRight: '10px', transform: 'scale(1.2)' }}
                />
                <span
                  style={{
                    fontSize: '18px',
                    textDecoration: todo.completed ? 'line-through' : 'none',
                    color: todo.completed ? '#999' : '#333',
                  }}
                >
                  {todo.text}
                </span>
              </div>
              <button
                onClick={() => handleDeleteTodo(todo.id)}
                style={{
                  backgroundColor: '#dc3545',
                  color: 'white',
                  border: 'none',
                  padding: '5px 10px',
                  borderRadius: '5px',
                  cursor: 'pointer',
                  fontSize: '14px',
                }}
              >
                삭제
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default TodoListWithReducer;

import React from 'react';
import './App.css';
import TodoListWithReducer from './components/TodoListWithReducer'; // useReducer 버전 TodoList 불러오기

function App() {
  return (
    <div className="App">
      <h1>Reducer를 사용한 Todo List</h1>
      <TodoListWithReducer />
    </div>
  );
}

export default App;

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

import React, { createContext, useReducer, useContext, useEffect } from 'react';

// 1. AuthContext 생성
const AuthContext = createContext(null);

// 2. reducer 함수 정의
const authReducer = (state, action) => {
  switch (action.type) {
    case 'LOGIN':
      localStorage.setItem('isLoggedIn', 'true'); // 로그인 시 로컬 스토리지 업데이트
      localStorage.setItem('userToken', action.payload.token);
      return { ...state, isLoggedIn: true, user: action.payload.user, token: action.payload.token };
    case 'LOGOUT':
      localStorage.removeItem('isLoggedIn'); // 로그아웃 시 로컬 스토리지 제거
      localStorage.removeItem('userToken');
      return { ...state, isLoggedIn: false, user: null, token: null };
    case 'SET_INITIAL_STATE': // 초기 로드 액션
      return action.payload;
    default:
      return state;
  }
};

// 3. 초기 상태를 위한 초기화 함수
const initAuth = (initialState) => {
  const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
  const userToken = localStorage.getItem('userToken');
  // 실제 앱에서는 토큰으로 사용자 정보를 다시 불러와야 할 수 있습니다.
  const user = isLoggedIn ? { name: 'Logged In User' } : null; // 예시
  return { ...initialState, isLoggedIn, user, token: userToken };
};

// 4. AuthProvider 컴포넌트 생성
export const AuthProvider = ({ children }) => {
  const [authState, dispatch] = useReducer(authReducer, { isLoggedIn: false, user: null, token: null }, initAuth);

  return (
    <AuthContext.Provider value={{ authState, dispatch }}>
      {children}
    </AuthContext.Provider>
  );
};

// 5. useContext 훅을 사용하기 위한 커스텀 훅 (선택 사항이지만 유용)
export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
};

import React from 'react';
import './App.css';
import { AuthProvider, useAuth } from './contexts/AuthContext'; // AuthProvider와 useAuth 훅 불러오기

// 로그인/로그아웃 버튼을 표시하는 컴포넌트
function AuthButtons() {
  const { authState, dispatch } = useAuth(); // useAuth 훅 사용

  return (
    <div style={{ margin: '20px', padding: '15px', border: '1px solid #ddd', borderRadius: '8px', textAlign: 'center' }}>
      {authState.isLoggedIn ? (
        <>
          <p>환영합니다, {authState.user.name}님!</p>
          <button onClick={() => dispatch({ type: 'LOGOUT' })} style={{ padding: '10px 20px', backgroundColor: '#f44336', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}>
            로그아웃
          </button>
        </>
      ) : (
        <>
          <p>로그인이 필요합니다.</p>
          <button onClick={() => dispatch({ type: 'LOGIN', payload: { user: { name: '테스트유저' }, token: 'abc123def456' } })} style={{ padding: '10px 20px', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}>
            로그인
          </button>
        </>
      )}
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <h1>useReducer + useContext 예시</h1>
      <AuthProvider> {/* AuthProvider로 감싸서 모든 하위 컴포넌트에 인증 상태 제공 */}
        <AuthButtons />
        {/* 다른 컴포넌트들도 useAuth를 사용하여 인증 상태에 접근 가능 */}
      </AuthProvider>
    </div>
  );
}

export default App;

const authReducer = (state, action) => {
  switch (action.type) {
    case 'LOGIN':
      return { ...state, isLoggedIn: true, user: action.payload.user, token: action.payload.token };
    case 'LOGOUT':
      return { ...state, isLoggedIn: false, user: null, token: null };
    case 'SET_INITIAL_STATE':
      return action.payload;
    default:
      return state;
  }
};

useEffect(() => {
  try {
    if (authState.isLoggedIn) {
      localStorage.setItem('isLoggedIn', 'true');
      localStorage.setItem('userToken', authState.token);
    } else {
      localStorage.removeItem('isLoggedIn');
      localStorage.removeItem('userToken');
    }
  } catch (error) {
    console.error('Failed to persist auth state', error);
  }
}, [authState.isLoggedIn, authState.token]);