[프로젝트] 로컬스토리지를 활용한 투두리스트 앱 만들기 - React, JS, Styled-components (다중선택박스)

투두리스트는 밥먹듯이 할 줄 알아야 하는 기본 중에 기본이기때문에 간단한 투두리스트 앱을 주중에 매일 한번씩 만들어보고 있다.

 

기능:

- Add todo

- Delete todo (개별)

- Edit Todo (개별)

- Search Todo

- Done/Backlog Status Change (개별)

---

02/11

기존에는 투두리스트 아이템마다 체크박스를 넣어 삭제 버튼을 누르면 삭제되는 식으로 진행했는데, 전체선택/전체해제 기능이 있으면 편할것 같아 추가했다.

 

State 추가

  const [isSelectedAll, setIsSelectedAll] = useState(false);

 

 

JSX 프론트엔드

<MasterCheckBox
    onChange={handleCheckAll}
    checked={isSelectedAll === true}
    type="checkbox"
/>

 

 

로직

const handleCheckAll = () => {
    // Check if todoList exist
    if (!todoList) return;

    // Get all ids of todoList
    const allTodoIds = todoList?.map((todo) => todo.id);

    const isAllTodoChecked = allTodoIds?.every((id) =>
      selectedIdList.includes(id)
    );

    if (isAllTodoChecked) {
      // Empty All
      setSelectedIdList([]);
      setIsSelectedAll(false);
    } else {
      // Add All
      setSelectedIdList(allTodoIds);
      setIsSelectedAll(true);
    }
  };

 

몇번의 시행착오가 있었는데, setSelectedIdList(allTodoIds) 의 형태는 기존에 selectedIdList에 어떤 아이템들이 들어있건 그냥 allTodoIds로 전체를 새로 갈아끼는 방식. 내가 처음에 접근했던 방식은, 기존에 selectedIdList에 있던 아이템들을 제외하고 allTodoIds 중에서 없는 애들을 따로 spread operator로 넣어주는 생각을 했는데 아래 코드를 보면,,

 

 // 2nd try
const setAllTodoIds = new Set(allTodoIds);
const setSelectedIds = new Set(selectedTodoIdList);
const thingsToAdd = setAllTodoIds.intersection(setSelectedIds);
setIsAllTodosChecked(true);
setSelectedTodoIdList([...selectedTodoIdList, thingsToAdd]);

 // 3rd try
const thingsToAdd = allTodoIds.filter((id) => !selectedId.includes(id));
setIsAllTodosChecked(true);
setSelectedTodoIdList([...selectedTodoIdList, thingsToAdd]);

 

 

두번째는 javascript docs 보고 set 적용하려다가 실패.

 

세번째로도 구현이 가능했으나, 찾아보니

=> 리액트에서는 setState()를 최소한으로 호출하는 것이 중요하지만, 비교 연산이 비효율적이라면 차라리 한 번에 교체하는 게 낫다고 한다. thingsToAdd를 구하는 filter() 연산이 많아지면 오히려 성능이 떨어질 가능성이 크고 , 따라서 그냥 setSelectedTodoIdList(allTodoIds)를 사용하는 것이 성능적으로 더 효율적이다. 만약 성능 최적화가 정말 필요하면 React의 useMemo()나 useCallback()을 활용하는 방법도 고려할 수 있다고 한다.

---

 

Deployed URL

https://dailytodoapp-delta.vercel.app/

React App