[React] 투두리스트

https://todo-list-brown-nu.vercel.app/

1. 완성본 GIF

2. 기능

1) 오늘 날짜
2) 할 일 입력
3) 할 일 체크 및 삭제
4) 남은 할 일 개수 표시

3. 기능 상세 설명

1) 오늘 날짜

new Date()

최상단 컴포넌트 파일인 index.js에서 불러온 후, 인자로 전달해줬다.
(하위 컴포넌트에서는 new Date 가 작동하지 않았음)

var now = new Date();
    <App
      year={now.getFullYear()}
      month={now.getMonth()}
      date={now.getDate()}
      day={now.getDay()}/>

2) 할 일 입력

• + 버튼을 누르면 입력창이 뜬다.
• 버튼에 애니메이션 넣음

styles 라는 객체에 버튼의 두 가지 상태를 정의
배경색, 변화속도(transition), 회전(transform: "rotate(45deg)")

const styles = {
  toRedButton: {
    backgroundColor: "#F78181",
    transition: ".1s all",
    transform: "rotate(45deg)",
  },

  toGreenButton: {
    backgroundColor: "#01dfa5",
    transition: ".1s all",
  },
};

return (
    <Container style={enableInput ? styles.toRedButton : styles.toGreenButton}>
      <PlusMark src={PlusImg} />
    </Container>
  );

3) 할 일 체크 및 삭제

체크

• todoList 배열은 { todo : string, done : bool} 를 담는다
• done : 할 일 완료 여부
• 체크 박스를 클릭했을 때, 해당 인덱스의 done을 바꿔준다. 1→0 , 0→1
  useState를 사용하는 배열 변경할 때는 카피배열을 만든 후 setter 객체로 바꿔준다.

let index = props.index;
let isDone = props.todoList[index].done;

const click = () => {
    let copiedTodoList = [...props.todoList];
    if (isDone === 1) copiedTodoList[index].done = 0;
    else copiedTodoList[index].done = 1;
    props.setTodoList(copiedTodoList);
  };

삭제

• 삭제버튼 클릭 시 index 전달
• filter 함수 사용 ⇒ 해당 index인 원소 제외한 배열 생성

const deleteTodo = (e) => {
    props.setTodoList(todoList.filter((todo, index) => index !== e));
  };

4) 남은 할 일 개수 표시

• todoList 배열은 { todo : string, done : bool} 를 담는다
• todoList의 객체들 중 done값이 0인 것의 개수를 찾기
  filter 함수 사용(조건에 해당하는 원소로만 이루어진 배열 생성)