useSyncExternalStore를 이용한 투두리스트(w/tdd)

[yoonminsang]

개요 및 변경 사항

• 코드스피츠 78강의 투두리스트와 fe-conf-2022의 상태관리 세션을 듣고 구현한 투두리스트
• Model
  • Model에 Folder와 Task 클래스 정의
  • Folder는 title과 task배열을 가지고 있다.
  • Task는 title과 isCompleted라는 값을 가지고 있다.
• Store
  • Store라는 추상 클래스를 만들고 Store를 상속받은 TodoStore 구현.
  • TodoStore는 Folder를 멤버변수로 이용, Folder는 Task를 멤버변수로 이용
• useTodoStore
  • useTodoStore라는 간단한 스토어 훅 생성
  • 리액트 자체적인 useSyncExternalStore을 사용
• 테스트
  • Model과 Store를 TDD로 구현.
  • ui, 컴포넌트 테스트 생략. 최대한 데이터에 집중해서 테스트 함.
  • 스토리북은 패스

참고사항

• 모노레포구조를 따르고 있기 때문에 외부 레포에서 import하는 코드가 일부존재(스타일적인 부분, 코드를 보는데는 지장 없음)

추가 구현 필요사항

• Folder와 Task에 id추가하고 map에 key를 index에서 id로 변경
• Folder와 TodoStore에서 Set을 상속받게 변경.
• 코드까보기 https://github.com/seed2whale/usestore-ts
• 마법을 부려서 store 훅을 만들고 리팩터링.
• redux로 구현
• react로만 구현

스크린샷 or gif

[yoonminsang]

https://github.com/yoonminsang/play-ground/tree/client-todo-list/feat-useSyncExternalStore