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

 

1. 할일 목록 컴포넌트 만들기

 

이번에는 해야 할 일을 추가, 체크, 삭제 할 수 있는 할 일 목록 컴포넌트를 제작할 예정입니다.

components 디렉토리에 Todos 컴포넌트를 작성합니다.

 

 

- components/Todos.js

 

두 컴포넌트를 선언합니다.

Todos, TodoItem 컴포넌트를 분리해도 좋고 하나의 파일에 아래와 같이 작성해도 좋습니다.

 

 

import React from "react";

const TodoItem = ({ todo, onToggle, onRemove }) => {
    return (
        <div>
            <input type="checkbox" />
            <span>예제 파일</span>
            <button>삭제</button>
        </div>
    );
};

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

return (
    <div>
        <form onSubmit={onSubmit}>
        <input />
        <button type="submit">등록</button>
        </form>
        <div>
        <TodoItem />
        <TodoItem />
        <TodoItem />
        <TodoItem />
        <TodoItem />
        </div>
    </div>
    );
};

export default Todos;

 

 

- App.js

 

 

위에서 작성한 Todos 컴포넌트를 import로 가져와서 노출합니다.

 

import React from "react";
import Counter from "./components/Counter";
import Todos from "./components/Todos";

const App = () => {
  return (
    <div>
      <Counter number={0} />
      <hr/>
      <Todos/>
    </div>
  )
}

export default App;

 

2. 화면 UI

 

할일 목록이 UI에 추가됩니다.