https://github.com/fivethreeeo/react-practice-todolist

Last synced: 4 months ago
JSON representation

README

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

## 데모

## 프로젝트 실행 방법

```
yarn start
```

## 기능 구현

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

## 주요 작업 내용

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

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

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