[React] To Do List 만들기 - 3

 

리액트로 To Do List 만들기

📖 사용 기술

Editor : VScode

Language

• html
• css
• React.js

배포: Github.io 클릭

 

📂 컴포넌트 구조

📂 src
    ├── 📂 components
    │   ├── 📄 AddTodo.js        # 할 일 추가 컴포넌트
    │   ├── 📄 Container.js      # 레이아웃을 담당하는 컨테이너 컴포넌트
    │   ├── 📄 Title.js          # 타이틀 컴포넌트
    │   ├── 📄 TodoList.js       # 할 일 목록 컴포넌트
    ├── 📄 App.js                # 메인 애플리케이션 컴포넌트
    └── 📄 App.css               # 글로벌 스타일

 

📖 기능

• 할 일 추가/수정/삭제
• 할 일 완료 여부 체크
• 할 일 목록 표시
• 할 일 분류 기능
• 로컬 스토리지 활용 : 페이지를 새로고침하거나 브라우저 닫아도 데이트가 유지된다.

📖 기능 구현

1. 할 일 추가

- 사용자가 입력 필드에 할 일을 작성하고, [추가] 버튼을 클릭하거나 엔터를 누르면 리스트에 새로운 할 일이 추가된다.

function AddTodo({ input, setInput, list, setList }) {
    const addTodo = () => {
        const updatedList = [...list, { text: input, completed: false }];
        setList(updatedList);
        setInput('');  // 입력 필드 초기화
    };
}

 2. 할 일 완료/삭제

- 체크박스로 할 일의 완료 여부를 표시하고, 완료된 할 일은 취소선이 그어진다.

- [삭제] 버튼을 클릭하면 특정 항목을 삭제할 수 있다.

function TodoList({ list, setList }) {
    const checkBoxChange = (index) => {
        let updatedList = list.map((item, i) => {
            if (i === index) return { ...item, completed: !item.completed };
            return item;
        });
        setList(updatedList);
    };
}

 3. 할 일 수정

- [수정] 버튼을 클릭하면 입력 필드로 전환되고, 변경 후 저장할 수 있다.

- editIndex로 현재 수정 중인 항목을 구분해서 관리한다.

function TodoList({ list, setList }) {
    const [editIndex, setEditIndex] = useState(null);
    const [editText, setEditText] = useState('');

    const saveEdit = (index) => {
        const updatedList = list.map((item, i) => {
            if (i === index) {
                return { ...item, text: editText };
            }
            return item;
        });
        setList(updatedList);
        setEditIndex(null);  // 수정 모드 종료
    };
}

 4. 할 일 분류

- 필터링 기능을 추가하여 사용자는 전체(all), 완료된 일(completed), 진행 중인 일(uncompleted) 상태에 따라 할 일을 분류할 수 있다.

const filterList = list.filter(function(item){
  if(filter === 'completed'){
    return item.completed;  // 완료된 항목만 반환
  }
  if(filter === 'uncompleted'){
    return !item.completed;  // 미완료된 항목만 반환
  }
  return list;  // 전체 목록 반환
});

<TabsUl>
  <TabsLi active={filter === 'all'} onClick={() => { setFilter('all') }}>전체 보기</TabsLi>
  <TabsLi active={filter === 'uncompleted'} onClick={() => { setFilter('uncompleted') }}>진행 중인 일</TabsLi>
  <TabsLi active={filter === 'completed'} onClick={() => { setFilter('completed') }}>완료된 일</TabsLi>
</TabsUl>

 

---

🌱 후기

이전에 만들었던 버전 2에서 분류 기능을 넣고 디자인을 살짝 바꿔서 다시 만들어 보았다.  styled-components를 계속 사용해서 만들었다.이전 버전에서는 할 일 완료 여부에 따라 텍스트에 줄이 그어지는 부분에서 속성을 인라인 스타일로 적용했는데, 이번에는 styled-components로 적용해 보았다. 확실히 스타일을 분리하니 코드의 가독성이 더 좋아졌고, styled-components를 사용하면 props로 더 간단하게 조건부 스타일을 적용할 수 있어서 편했다. 그리고 다시 만들어도 수정 기능에서 수 정할 항목의 인덱스로 수정 모드와 아닌 경우를 구분할 생각이 떠올리는 건 시간이 조금 걸리기는 했다.. ^^ 그리고 할 일 분류 기능도 useState로 상태 관리를 해야 한다는 건 바로 생각이 났지만 로직을 어떻게 짜야 할지 조금 애먹었다. 역시 쉬운 건 없다... 다시 만들어 보면서 익혀 보는 수밖에!!!