리액트 미니 투두리스트 만들기

데모

프로젝트 실행 방법

  yarn start

기능 구현

• 할 일 추가
• 할 일 삭제
• 할 일의 진행 증, 완료 표시
• 로컬스토리지로 할 일 기억하기

주요 작업 내용

• 스타일링은 postcss(모듈객체를 활용)
  • 이전에는 주로 BEM방식으로 작성했는데, 모듈을 활용하니 className 짓기나 전체적인 class 구조를 덜 고민할 수 있어서 편했다.

• 로컬스토리지 사용
  • useEffect를 활용해 items 상태가 변경될 때마다 로컬스토리지에 추가하도록 했다.
  • 매번 로컬스토리지에 추가하는게 아니라, 언마운트될 때만 추가하는 것이 더 효율적일 것 같다.

• 상태 관리 고민
  • 필터와 할일 목록을 하나의 객체로 관리를 할지 분리할지 고민을 했다.
    • 두 개의 성격이 완전히 다른 것 같아서 분리했다.