Context API를 활용한 TodoList

설치한 라이브러리

yarn add react-icons styled-components

상태관리

ContextAPI + useReducer

hook

• createContext
• useContext
• useReducer
• useRef
  함수형 컴포넌트 + hook 으로 작업되었습니다.

component

• TodoTemplate
• TodoHeader
• TodoList
• TodoItem
• TodoCreate

리듀서 파일

src/TodoContext.js

context

• state
• dispatch
• next id (key값) => state, dispatch 따로 관리하여 불필요한 렌더링 방지

구현 기능

• 오늘 날짜, 요일 노출
• 할 일 count
• 체크리스트 체크 TOGGLE
• 체크리스트 삭제 REMOVE
• 체크리스트 추가 CREATE

to do list 결과

to do list context API 구조