React Redux TodoList -2

chu·2021년 3월 17일

TodoApp 두 번째 시간

추가적으로 작업한 내용!

첫 번째 - 완료한 리스트에 체크 표시하기.
두 번째 - 완료하지 못한 리스트 갯수 표기하기.
세 번째 - emotion을 사용한 css 작업

현재 state

// shortid를 사용하여 id값을 생성
// 이번 메인은 done
const initialState = {
  post: [
    {
      id: shortId.generate(),
      title: '자바스크립트 공부하기',
      done: true,
    },
    {
      id: shortId.generate(),
      title: '리액트 공부하기',
      done: false,
    },
    {
      id: shortId.generate(),
      title: '노드 공부하기',
      done: false,
    },
  ],
};

그럼 done값을 사용하여 몇개의 일이 남았는지 표기해보자.

components/Header.jsx

import React from 'react';
import dayjs from 'dayjs';

// emotion-styled로 css 작업을 진행
import { DateWrap } from '../style';
import { useSelector } from 'react-redux';

const Header = () => {
  // state의 done 중 false 값을 가진 리스트 필터링하기
  const done = useSelector((state) => state.post.filter((v) => v.done === false));
  // 이건 심심해보일까봐 dayjs로 현재 날짜 불러온 후 format
  const date = dayjs(new Date());
  return (
    <DateWrap>
      <h1>{date.format('YYYY년 MM월 DD일')}</h1>
      <p>오늘 할 일 {done.length}개 남음</p>
    </DateWrap>
  );
};

export default Header;

이제 체크박스를 활용한 작업을 진행해보자.

components/TodoItem.jsx

import React, { useState, useCallback } from 'react';
import { useDispatch } from 'react-redux';

import { 
  REMOVE_TODO_LIST,
  CHANGE_TODO_LIST,
  DONE_TOGGLE
} from '../reducers/index';

// styled 불러오기
import {
  RemoveButton,
  EditButton,
  CancelButton,
  EditSuccess,
  ButtonGroup,
  ListMode,
  EditMode,
  CheckInput,
} from '../style';

const TodoItem = ({ item }) => {
  const dispatch = useDispatch();
  const [mode, setMode] = useState(true);
  const [text, setText] = useState(item.title);
  // 각 리스트의 done값을 state로 넣어준 후 변경
  const [done, setDone] = useState(item.done);
	
  // 파라미터로 받아온 id값으로 필터링 후 done값을 변경
  // 함수에서는 done값을 모두 반대로 바꿔준다.
  const onChangeCheck = useCallback(
    (id) => {
      dispatch({
        type: DONE_TOGGLE,
        payload: {
          id: id,
          done: !done,
        },
      });
      setDone(!done);
    },
    [done],
  );

  // 여러 함수들 ...
  
  return (
    <li>
      {mode ? (
        <ListMode>
          <CheckInput type="checkbox" checked={done} onChange={() => onChangeCheck(item.id)} />
          {item.done ? <strike>{item.title}</strike> : <p>{item.title}</p>}
          <ButtonGroup>
            <RemoveButton onClick={() => onRemove(item.id)}>삭제</RemoveButton>
            <EditButton onClick={onClickChange}>수정</EditButton>
          </ButtonGroup>
        </ListMode>
      ) : (
        <EditMode>
          <input value={text} onChange={onChangeText} />
          <ButtonGroup>
            <CancelButton onClick={onCancleChange}>취소</CancelButton>
            <EditSuccess onClick={() => onChange(item.id, text)}>수정완료</EditSuccess>
          </ButtonGroup>
        </EditMode>
      )}
    </li>
  );
};

export default TodoItem;

style.jsx

import styled from '@emotion/styled';

// 전체 박스
export const Container = styled.div`
  position: relative;
  margin: 100px auto 0 auto;

  width: 375px;
  height: 667px;

  background: white;
  box-shadow: rgba(0, 0, 0, 0.4);
  border-radius: 16px;
`;