[React]todolist(reducer 사용)

 

 

 

components 폴더안에

Header.js 생성

import React from 'react';

const Header = ({input, onChange, addTodo}) => {
    return (
        <div>
            <h2>to do list</h2>
            <div>
                <input value={input} onChange={onChange}/>
                <button onClick={addTodo}>+</button>
            </div>
        </div>
    );
};

export default Header;

 

components 폴더안에

Todolists.js 생성

import React from 'react';

const TodoLists = ({todos, toggleTodo, removeTodo}) => {
    return (
        <div>
            <ul>
                {todos.map(todo=><li key={todo.id}><span onClick={()=>toggleTodo(todo.id)}>{todo.text}</span>
                <button onClick={()=>{removeTodo(todo.id)}}>삭제</button></li>)}
            </ul>
        </div>
    );
};

export default TodoLists;

 

 

App.js 생성

import './App.css';
import TodoLists from './components/TodoLists';
import Header from './components/Header';
import { useReducer } from 'react';



//사용할 상태 초기값 설정1
//초기상태를 컴포넌트 밖에 선언하기
const initialState = {
  input: "",
  todos: [
    {id: 1, text: "해야할일1", isDone: false},
    {id: 2, text: "해야할일2", isDone: false},
  ],
  id: 3
}

//reducer 함수선언2
function reducer(state, action){
  switch(action.type) {
    case "changeInput":
      return {
        ...state,
        input: action.payload   //action과 payload 우리가 만듬 
      };
    case 'addTodo':
      return {
        ...state,
        todos:[...state.todos, action.todo] ,
        id: state.id+1,
        input: ""
        //업데이트한 값들을 action으로 전달
      }
    case 'deleteTodo':
      return {
        ...state,
        todos: state.todos.filter(todo=> todo.id !== action.id)
      };
    case 'toggleTodo':
      return {
        ...state,
        todos: state.todos.map(todo =>
          todo.id === action.id ? {...todo, isDone: !todo.isDone}
          : todo)
      }  
      default:
          return state;
  }
}

function App() {
  //상태선언하기
  const [state, dispatch] = useReducer(reducer, initialState);
  const {todos, input, id} = state;
  //인풋값 업데이트 요청
  const onChange = (e) => {
    dispatch({
      type: 'changeInput',
      payload: e.target.value
    })
  }
  //할일항목 추가 업데이트 요청
  const addTodo = () => {
    dispatch({
      type: 'addTodo',
      todo: { id: id,text: input, isDone: false}
    })
  }
  //할일 항목 삭제 업데이트 요청
  const removeTodo = (id)=> {
    dispatch({
      type: "deleteTodo",
      id: id
    })
  }
  //리스트 색활성화 비활성화 요청
  const toggleTodo = (id)=> {
    dispatch({
      type: "toggleTodo",
      id: id
    })
  }
  return (
    <div className="App">
      <Header input={input} onChange={onChange} addTodo={addTodo}/>
      <TodoLists todos = {todos} toggleTodo={toggleTodo} removeTodo={removeTodo}/>
    </div>
  );
}

export default App;