[Redux] 무작정 해보기 - Redux - Todo List #0 UI 만들기

Overview

---

리액트 관련 프로젝트에서 많이 사용하는 상태 관리 라이브러리로서 Redux(리덕스)를 사용해 보면서 정리하는 글을 작성해 보고자한다.
간단한 Todo List의 상태를 Redux로 상태 관리하는 것을 통해 정리해보고자한다.

먼저, Dummy data를 통해 초기 페이지 UI를 간단하게 만들어 본다.

Todo List UI 세팅

1. Data Structure

TodoList에 필요한 데이터는 아이디 , 제목, 내용, 생성날짜,완료 체크 이다. 추후에 추가될수도있지만, 우선은 이포맷으로 더미 데이터 3개 정도를 만들어 준다.

// ./data.js

export const dummy = [
  {
    id: 1,
    title: "블로그 작성",
    contents: "리액트 블로그 작성하기",
    done:false,
    regDate: "2022-08-10 11:12:23",
  },
  {
    id: 2,
    title: "스터디 참가",
    contents: "리액트 스터디 참가",
    done:true,
    regDate: "2022-08-10 11:13:23",
  },
  {
    id: 3,
    title: "이메일 보내기",
    contents: "고객사에게 이메일 보내기",
    done:false,
    regDate: "2022-08-10 11:14:23",
  },
];

최종적으로는 위와 같은 화면으로 나오게 됩니다.

 

2. 전체 코드 

 

// src/project/t/TodoList/index.js

import React from "react";

import Meta from "@components/meta/Meta";

import { meta } from "@project/t/TodoList/meta";
import { Section, TodoItem, TodoWrapper } from "@project/t/TodoList/style";
import { dummy } from "@project/t/TodoList/data";
import { dateToString } from "@project/t/TodoList/components/date";

import { Wrapper, Title, HLine } from "@resources/globalStyle";

const TodoList = ({}) => {
  return (
    <Wrapper>
      <Meta data={meta} />
      <Section>
        <Title>Todo List For Self</Title>
        <HLine />
        <TodoWrapper>
          {dummy.map((d) => {
            return (
              <TodoItem key={Math.random()}>
                <div>{d.id}</div>
                <div>{d.title}</div>
                <div>{d.contents}</div>
                <div>{dateToString(d.regDate)}</div>
                <input type="checkbox" defaultChecked={d.done} />
              </TodoItem>
            );
          })}
        </TodoWrapper>
      </Section>
    </Wrapper>
  );
};

export default TodoList;

 

import styled from "styled-components";
import { FlexLayout } from "@resources/globalStyle";

export const Section = styled.div`
  padding: 24px;
`;
export const TodoWrapper = styled(FlexLayout)`
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
`;
export const TodoItem = styled(FlexLayout)`
  width: 80%;
  gap: 8px;
  border-radius: 16px;
  box-shadow: 1px 1px 1px 1px rgba(200, 200, 200, 0.3),
    -1px -1px 1px 1px rgba(150, 150, 150, 0.3);
  padding: 8px 16px;
  font-size: 1.2rem;
  align-items: center;
  cursor: pointer;
  > div:nth-child(1) {
    width: 8px;
  }
  > div:nth-child(2) {
    width: 128px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
  }
  > div:nth-child(3) {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  > div:nth-child(4) {
    width: 64px;
  }
  > div:nth-child(5) {
    width: 12px;
  }
  :hover {
    background-color: rgba(165, 165, 165, 0.2);
  }
`;

export const dateToString = (date) => {
  const y = date.getFullYear(),
    m = date.getMonth() + 1,
    d = date.getDate(),
    H = date.getHours(),
    M = date.getMinutes(),
    S = date.getSeconds();
  return `${NumPadStart(y)}-${NumPadStart(m)}-${NumPadStart(d)} ${NumPadStart(
    H
  )}:${NumPadStart(M)}:${NumPadStart(S)}`;
};

export const NumPadStart = (num) => {
  return String(num).padStart(2, "0");
};