overview
등록된 store를 통해서 todolist의 상태를 관리할수 있습니다.
스토어에 등록된 상태를 가져오는 hooks인 useSelect와 상태 변화를 일으키는 hooks인 useDispatch를 사용해 보도록 합니다.
1. dummy data
UI를 만들기 위해 작성했던 dummy data를 우선 Redux-TodoList-index.js의 initialState로 옮겨 주고 TodoListReducer의 state의 default값으로 지정해 주겠습니다.
// src\Redux\TodoList\index.js
const CREATE = "todolist/ADD";
const READ = "todolist/READ";
const UPDATE = "todolist/UPDATE";
const DELETE = "todolist/DELETE";
export const onCreate = () => {
return {
type: CREATE,
};
};
export const onRead = () => {
return {
type: READ,
};
};
export const onUpdate = () => {
return {
type: UPDATE,
};
};
export const onDelete = () => {
return {
type: DELETE,
};
};
const initialState = [
{
id: 1,
title: "블로그 작성",
contents: "리액트 블로그 작성하기",
done: false,
regDate: new Date(2022, 8, 10, 11, 12, 24),
},
{
id: 2,
title: "스터디 참가",
contents: "리액트 스터디 참가",
done: true,
regDate: new Date(2022, 8, 10, 11, 13, 24),
},
{
id: 3,
title: "이메일 보내기",
contents: "고객사에게 이메일 보내기",
done: false,
regDate: new Date(2022, 8, 10, 11, 14, 24),
},
];
export const TodoListReducer = (state = initialState, action) => {
switch (action.type) {
case CREATE:
console.log("CREATE");
return state;
case READ:
console.log("READ");
return state;
case UPDATE:
console.log("UPDATE");
return state;
case DELETE:
console.log("DELETE");
return state;
default:
return state;
}
};
2. useSelector
react-redux 에서 제공하는 useSelector를 통해서 현재 리덕스 스토에서 등록된 TodoList의 상태값을 가지고 옵니다.
// src/project/t/TodoList/index.js
import React from "react";
import Meta from "@components/meta/Meta";
import { meta } from "@project/t/TodoList/meta";
import { dummy } from "@project/t/TodoList/data";
import { dateToString } from "@project/t/TodoList/components/date";
import { Wrapper, Title, HLine, Section } from "@resources/globalStyle";
import { useSelector } from "react-redux";
const TodoList = ({}) => {
const TodoListData = useSelector((state) => state.TodoListReducer);
console.log(TodoListData);
return (
<Wrapper>
<Meta data={meta} />
<Section>
<Title>Todo List For Self</Title>
<HLine />
<div
style={{
display: "flex",
flexDirection: "column",
width: "80%",
gap: "16px",
margin: "20px 0 0 0",
}}
>
<div>
<input type="text" />
<button>등록</button>
</div>
{dummy.map((d) => {
return (
<div style={{ display: "flex", gap: "8px" }}>
<div>{d.id}</div>
<div>{d.title}</div>
<div>{d.contents}</div>
<div>{dateToString(d.regDate)}</div>
<input type="checkbox" defaultChecked={d.done} />
<button>수장</button>
<button>삭제</button>
</div>
);
})}
</div>
</Section>
</Wrapper>
);
};
export default TodoList;
데이터가 잘 불어 와 졌습니다.
3. useDispatch
useDispatch hooks를 통해서 dispatch를생성하고, EventHandler를 생성합니다.
// src/project/t/TodoList/index.js
import React, { useCallback } from "react";
import Meta from "@components/meta/Meta";
import { meta } from "@project/t/TodoList/meta";
import { dateToString } from "@project/t/TodoList/components/date";
import { Wrapper, Title, HLine, Section } from "@resources/globalStyle";
import { useSelector, useDispatch } from "react-redux";
import { onCreate, onUpdate, onDelete } from "@Redux/TodoList";
const TodoList = ({}) => {
const TodoListData = useSelector((state) => state.TodoListReducer);
const dispatch = useDispatch();
const onItemAdd = useCallback(() => {
dispatch(onCreate());
}, [dispatch]);
const onItemUpdate = useCallback(() => {
dispatch(onUpdate());
}, [dispatch]);
const onItemDelete = useCallback(() => {
dispatch(onDelete());
}, [dispatch]);
return (
<Wrapper>
<Meta data={meta} />
<Section>
<Title>Todo List For Self</Title>
<HLine />
<div
style={{
display: "flex",
flexDirection: "column",
width: "80%",
gap: "16px",
margin: "20px 0 0 0",
}}
>
<div>
<input type="text" />
<button>등록</button>
</div>
{TodoListData.map((d) => {
return (
<div style={{ display: "flex", gap: "8px" }}>
<div>{d.id}</div>
<div>{d.title}</div>
<div>{d.contents}</div>
<div>{dateToString(d.regDate)}</div>
<input type="checkbox" defaultChecked={d.done} />
<button>수장</button>
<button>삭제</button>
</div>
);
})}
</div>
</Section>
</Wrapper>
);
};
export default TodoList;
이제 button 마다 onClick Event에 함수를 적용합니다.
// src/project/t/TodoList/index.js
import React, { useCallback } from "react";
import Meta from "@components/meta/Meta";
import { meta } from "@project/t/TodoList/meta";
import { dateToString } from "@project/t/TodoList/components/date";
import { Wrapper, Title, HLine, Section } from "@resources/globalStyle";
import { useSelector, useDispatch } from "react-redux";
import { onCreate, onUpdate, onDelete } from "@Redux/TodoList";
const TodoList = ({}) => {
const TodoListData = useSelector((state) => state.TodoListReducer);
const dispatch = useDispatch();
const onItemAdd = useCallback(() => {
dispatch(onCreate());
}, [dispatch]);
const onItemUpdate = useCallback(() => {
dispatch(onUpdate());
}, [dispatch]);
const onItemDelete = useCallback(() => {
dispatch(onDelete());
}, [dispatch]);
return (
<Wrapper>
<Meta data={meta} />
<Section>
<Title>Todo List For Self</Title>
<HLine />
<div
style={{
display: "flex",
flexDirection: "column",
width: "80%",
gap: "16px",
margin: "20px 0 0 0",
}}
>
<div>
<input type="text" />
<button onClick={onItemAdd}>등록</button>
</div>
{TodoListData.map((d) => {
return (
<div key={Math.random()} style={{ display: "flex", gap: "8px" }}>
<div>{d.id}</div>
<div>{d.title}</div>
<div>{d.contents}</div>
<div>{dateToString(d.regDate)}</div>
<input type="checkbox" defaultChecked={d.done} />
<button onClick={onItemUpdate}>수정</button>
<button onClick={onItemDelete}>삭제</button>
</div>
);
})}
</div>
</Section>
</Wrapper>
);
};
export default TodoList;
4. 버튼을 클릭해보자!
등록 , 수정,삭제 버튼을 클릭하면 console에 잘 찍히는 것을 확인할 수 있습니다.
이제 다음에는 console부분에 실질적인 todolist의 item을 등록 수정 삭제 해보는 기능을 추가해 보겠습니다.
