[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 48회차 미션 - 35강 Redux 할일 목록 구현

할일 목록 구현

최소한의 UI로 그 전에 useReducer로 구현했었던 todoList를 다시 리덕스로 구현해보자.
TodoItem, TodoList, Todos를 이번엔 한 파일에 구현해볼 것이다. 먼저 components에 Todos를 생성해보자.

Todos.js

import React, { useState } from "react";

function TodoItem({ todo, onToggle }) {
  return (
    <li
      style=
      onClick={() => onToggle(todo.id)}
    >
      {todo.text}
    </li>
  );
}

function TodoList({ todos, onToggle }) {
  return (
    <ul>
      {todos.map((todo) => (
        <TodoItem key={todo.id} todo={todo} onToggle={onToggle} />
      ))}
    </ul>
  );
}

function Todos({ todos, onCreate, onToggle }) {
  const [text, setText] = useState(""); //모든 상태를 리덕스에서 관리할 필요는 없음
  const onChange = (e) => setText(e.target.value);
  const onSubmit = (e) => {
    e.preventDefault();
    onCreate(text); //새로운데이터 등록
    setText(""); //텍스트값 초기화
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          value={text}
          onChange={onChange}
          placeholder="할 일을 입력하세요.."
        />
        <button type="submit">등록</button>
      </form>
      <TodoList todos={todos} onToggle={onToggle} />
    </div>
  );
}

export default Todos;

자 이번엔 container에 TodosContainer를 만들어보자.

TodosContainer.js

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import Todos from "../components/Todos";
import { addTodo, toggleTodo } from "../module/todos";

function TodosContainer() {
  const todos = useSelector((state) => state.todos);
  const dispatch = useDispatch();

  const onCreate = (text) => dispatch(addTodo(text), [dispatch]);
  const onToggle = (id) => dispatch(toggleTodo(id), [dispatch]);

  return <Todos todos={todos} onCreate={onCreate} onToggle={onToggle} />;
}

export default TodosContainer;

이제 App.js를 최종 수정하고 돌려보자.

import React from "react";
import CounterContainer from "./containers/CounterContainer";
import TodosContainer from "./containers/TodosContainer";

function App() {
  return (
    <div>
      <CounterContainer />
      <hr />
      <TodosContainer />
    </div>
  );
}

export default App;

이렇게 하고 돌렸는데 에러가 난다. map이 자꾸 펑션이 아니라고.. 으 짜증나..
내일 고쳐보도록 하자…
역시나 이외의 자세하고 정확한 내용은 벨로퍼트의 위키를 참고하길 바라며..
오늘은 여기까지..
시청 영상 35강 08~09까지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp