React 투두리스트 만들기

리액트로 투두 리스트 만들기

useState와 useRef 훅 만을 이용해서 투두 리스트를 만들었다. 배포된 주소는 아래.

 

https://todolist-phi-rouge.vercel.app/

 

다른 훅은 이용하지 않았기 때문에 새로고침을 했을 때 유지가 된다거나.. 이런 부분은 안되지만!

한동안 바닐라 자바스크립트만 하다가 리액트로 다시 돌아오니 State란 녀석이 새롭게 다가와서

투두 리스트를 만들며 좀 헤맨 부분을 정리해보려 한다.

 

 

투두 객체에 id값 넣어주기

투두마다 각각의 아이디를 달아주기 위해서 여러 방법이 있지만, useRef 훅을 이용해보았다.

useRef()

useRef는 current라는 속성을 가지고 있는 객체를 반환한다.

이때 인자를 갖고 있다면, 이 값을 초기값으로 current에 할당한다.

current 속성은 상태가 변경되어도 리렌더링이 되지 않기 때문에 유실되지 않는다!

 

암튼 이 current 값을 이용해서 객체마다 아이디를 지정해준다.

const newTodo = {
      id: id.current,
      title: title,
      body: text,
      isDone: false,
    };

 

 

렌더링 하기

진행중인 투두, 완료된 투두를 나누어서 렌더링 할 것이기 때문에 isDone의 값에 따라서 필터링된 배열을 넘겨주었다.
참고로 이 TodoList 컴포넌트는 진행 중, 완료 중 둘 다 같은 구조를 가지고 있어 하나의 컴포넌트로 재사용했다!

<TodoList
    todos={todos.filter((todo) => !todo.isDone)}
    listTitle={'🔥 진행중 🔥'}
    onToggle={onToggleHandler}
    onDelete={onDeleteHandler}
/>
<TodoList
    todos={todos.filter((todo) => todo.isDone)}
    listTitle={'🎉 완료 🎉'}
    onToggle={onToggleHandler}
    onDelete={onDeleteHandler}
/>

 

 

TodoList 컴포넌트에서 map 메서드로 렌더링 후에 isDone 값에 따라서 다른 배지를 보여줄 수 있도록 했다.
아래는 코드의 일부!.. react-icons 패키지를 이용했다.

const TodoItem = ({ title, body, id, isDone, onToggle, onDelete }) => {
  return (
    <TodoItemBlock key={id} isDone={isDone}>
      {isDone && <BsPatchCheckFill size={32} color={'#10c7a2'} cursor={'pointer'} onClick={() => onToggle(id)} />}
      {!isDone && <BsPatchCheckFill size={32} color={'#ddd'} cursor={'pointer'} onClick={() => onToggle(id)} />}
    </TodoItemBlock>
  );
};

 

 

진행 중, 완료 중 토글

진행 여부 토글은 클릭한 아이템의 id값을 받아와 해당 객체의 isDone을 변경해서 상태 변경을 해주는 것으로.
수정 기능을 추가한다면 비슷하게 할 수 있을 것 같다.

 const onToggleHandler = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id
          ? {
              ...todo,
              isDone: !todo.isDone,
            }
          : todo
      )
    );
  };

 

 

삭제

삭제하기 또한 id값을 받아와서 해당 아이템을 거르는 것으로 상태 변경!

  const onDeleteHandler = (id) => {
    if (window.confirm('해당 투두를 정말로 삭제하시겠습니까?')){
        setTodos(todos.filter((todo) => todo.id !== id));
    }
  };

오랜만에 '상태'에 대해 만지게 되니까 다시 처음 할 때로 돌아간 느낌이라 더 소모된 시간이 많았다 😇...
내일은 다시 처음부터 개념 정리를 해보는 시간을 가져야 할 듯하다.