[프론트엔드] 리덕스를 사용하여 리액트 어플리케이션 상태 관리하기[7]

 

1. Todos  완성

 

이번에는 Todo 컴포넌트를 위한 TodosContainer 를 작성할 차례입니다.

 

 

1.1 Todos Container 만들기

 

src 디렉토리안에 containers 디렉토리를 생성하고 그 안에 TodosContainer 를 작성합니다.

 

 

 

- containers/TodosContainer.js

 

import React from "react";
import { connect } from "react-redux";
import { changeInput, insert, toggle, remove } from "../modules/todos";
import Todos from "../components/Todos";


const TodosContainer = ({
    input,
    todos,
    changeInput,
    insert,
    toggle,
    remove,
}) => {
    return (
        <Todos
            input={input}
            todos={todos}
            onChangeInput={changeInput}
            onInsert={insert}
            onToggle={toggle}
            onRemove={remove}
        />
    );
};

export default connect(
    // 비구조와 할당을 통해 todos를 분리
    // state, todos, input => todos, input 사용
    ({ todos }) => ({
        input: todos.input,
        todos: todos.todos,
    }),
    {
        changeInput,
        insert,
        toggle,
        remove,
    }
)(TodosContainer);

 

 

이전에 작성했던 todos 모듈에서 액션생성 함수와 상태 안의 값을 컴포넌트 props를 통해 전달해 줍니다.

작성한 컨테이너를 이제 App.js에 Todos 컴포넌트를 대신 교체해 줍니다.

 

 

- App.js

 

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

const App = () => {
  return (
    <div>
      <CounterContainer/>
      <hr/>
      <TodosContainer/>
    </div>
  )
}

export default App;

 

 

그리고 Todos 컴포넌트에서 받아온 props를 사용하도록 todos 컴포넌트를 수정합니다.

 

 

- components/Todos.js

 

import React from "react";

const TodoItem = ({ todo, onToggle, onRemove }) => {
    return (
        <div>
            <input 
                type="checkbox"
                onClick={() => onToggle(todo.id)}
                checked={todo.done}
                readOnly={true}
            />
            <span style={{ textDecoration: todo.done ? 'line-through' : 'none' }}>
                {todo.text}
            </span>
            <button onClick={() => onRemove(todo.id)}>삭제</button>
        </div>
    );
};

const Todos = ({
    input, //인풋창 입력 테스트
    todos, // 할일 목록을 저장 할 객체
    onChangeInput,
    onInsert,
    onToggle,
    onRemove,
}) => {
    const onSubmit = e => {
        e.preventDefault();
        onInsert(input);
        onChangeInput('');  // 등록 후 인풋 초기화
    };

const onChange = e => onChangeInput(e.target.value);

return (
    <div>
        <form onSubmit={onSubmit}>
        <input value={input} onChange={onChange} />
        <button type="submit">등록</button>
        </form>
        <div>
        {todos.map(todo => (
            <TodoItem
                todo={todo}
                key={todo.id}
                onToggle={onToggle}
                onRemove={onRemove}
            />
        ))}
        </div>
    </div>
    );
};

export default Todos;

 

이제 브라우저에서 할 일 목록 기능이 잘 작동하는지 확인해 봅시다.

새창 추가, 체크박스 체크, 삭제 등의 기능을 브라우저에서 동작하는지 확인해보시면 됩니다.

 

 

1.2 최종 결과