[React] 간단한 TodoList 만들기 🍃

가장 흔하지만 알차고 기본기를 익히기에 좋은 것 같은 투두리스트를 리액트로 만들어보았다.

자바스크립트로는 그동안 2-3번 정도 만들어본 것 같은데..🤔
리액트로는 강의 따라 친 기억만 나고 혼자 힘으로는 만들어본 기억이 없는 것 같았다.
이렇게 된거 간단한 투두 앱을 만들면서 리액트 기본기를 다시 잡고 싶다는 생각이 들었다!

🎨 디자인

기능 구현이 더 중요한 것 같아서 디자인은 초초초 깔끔하게✨ 해야지 생각했다.
피그마를 잘 다루지는 못하지만 아예 모르는 건 아니기에 피그마를 이용해 디자인 시안을 잡아보았다.
(여백의 미-!ㅎㅎㅎ)

⚙️ 기능

기능 구현에 앞서서 컴포넌트를 기능별로 나누어 주었다.
공통 컴포넌트 (버튼, input)를 만들까 생각했는데 여기에서는 그정도까진 필요하지 않은 것 같다고 판단했다.
반복해서 사용할만한게 버튼말고는 없는듯한..?ㅎㅎ
그래서 그냥 위와 같이 기능별로 나누어주었다. 연습하는거니까 가볍게하자!

등록하기

등록 기능은 등록 버튼을 눌렀을 때 할일이 추가되도록 구현했다.

📍 할 일 등록과정

1. input에 onChange이벤트가 일어날 때마다 그 값을 setInputValue함수에 넣어 useState로 관리한다.

   const onChangeInput = (e) => {
    const { value } = e.target;
    setInputValue(value);
   };

2. 등록 버튼 클릭 시, 입력한 값이 있다면 setTodoList함수에 다음과 같은 객체형태의 todo를 넣어 useState로 상태를 관리해주도록 한다.

   const [todoList, setTodoList] = useState([]);
   const [todoId, setTodoId] = useState(0);
   
   const onClickAddTodo = () => {
    if (inputValue) {
      setTodoList((prev) => [
        ...prev,
        {
          id: todoId,
          text: inputValue,
          done: false,
          isUpdating: false,
        },
      ]);
      setTodoId((prev) => prev + 1);
      setInputValue("");
    }
   };

3. todoList 상태가 업데이트 될 때마다 해당 값을 localStorage에 저장해준다.

   useEffect(() => {
    localStorage.setItem("todoListData", JSON.stringify(todoList));
   }, [todoList]);

4. 최초 렌더링 시, 로컬 스토리지에 저장된 투두리스트를 가져와서 출력해준다.

   useEffect(() => {
    const localTodoList = localStorage.getItem("todoListData");
    if (localTodoList) {
      setTodoList(JSON.parse(localTodoList));
    }
   }, []);

   

수정하기

📍 할 일 수정과정

1. 수정 버튼 클릭 시 todo의 id와 수정 버튼이 눌린 todo의 id가 같다면, todoList 객체에서 isUpdating을 ture로 바꾸어준다.

   const onEdit = (id) => {
    setTodoList(
      todoList.map((todo) =>
        todo.id === id ? { ...todo, isUpdating: !todo.isUpdating } : todo
      )
    );
   };

2. 수정 중인 상태가 되면 todoItem이 span에서 input으로 변경된다.
   이때, input의 value는 원래 입력되었던 값을 가지고 있어야 하고 수정을 통해 변경되어야하기 때문에 useState를 통해 상태를 관리하도록 한다.

const [newText, setNewText] = useState(text);
{isUpdating ? (
  <input
    type="text"
    onKeyDown={(e) => onEnterEdit(e, id)}
    onChange={(e) => onChangeEditInput(e)}
    value={newText}
    className="updateTodoInput"
  ></input>
) : (
  <span className={done ? "checked checkedText" : ""}>{text}</span>
)}

3. input에서 onChange 이벤트가 생기면 해당 값을 setNewText함수를 통해 새로운 값의 상태로 업데이트 시켜 관리한다.

   const onChangeEditInput = (e) => {
    setNewText(e.target.value);
   };

4. 수정 후 엔터를 누르면 onKeyDown 이벤트가 발생하고, setTodoList함수를 통해 todoList 객체에 text가 새로운 텍스트 값으로 업데이트되고 수정 중인 상태(isUpdating)가 false로 변경된다.

   const onEnterEdit = (e, id) => {
    if (e.key === "Enter") {
      setTodoList(
        todoList.map((todo) => {
          if (todo.id === id) {
            return { ...todo, text: newText, isUpdating: false };
          }
          return todo;
        })
      );
    }
   };
   

5. 추가로, 수정중일 때에는 ✅ 또는 ☑️ 아이콘이 뜨지 않도록 하기 위해 다음의 코드를 추가하였다.
- 수정 중일 경우 : ""
- 수정 중이 아닐 경우
  - 완료 상태라면 : ✅
  - 완료 상태가 아니라면 : ☑️

```jsx
<span
  className={done ? "checked" : ""}
  onClick={() => checkToggle(id)}
>
 {isUpdating ? "" : (done ? "✅ " : "☑️ ")}
</span>

삭제하기

할 일 삭제과정

1. 할 일을 완료하면 체크박스를 클릭한다.
   todo의 id와 체크 버튼이 눌린 todo의 id가 같다면, 해당 todoItem에 대해 done 상태를 true로 변경시킨다.

   const checkToggle = (id) => {
    setTodoList(
      todoList.map((todo) => {
        if (todo.id === id) {
          return { ...todo, done: !done };
        }
        return todo;
      })
    );
   };

2. 할 일이 완료된 상태(done: true) 이거나 수정중이라면 수정 버튼이 나타나지 않도록 하기 위해 다음의 코드를 추가했다.

   {done || isUpdating ? ( <></> ) : 
   ( <button onClick={() => onEdit(id)} className="todoitemBtn">
      수정
    </button>
   )}

3. 삭제 버튼 클릭 시, 삭제 버튼을 누른 todoItem의 id를 제외한 todoList를 setTodoList함수를 통해 상태를 업데이트 시켜준다.

   const onRemove = (id) => {
    setTodoList(todoList.filter((todo) => todo.id !== id));
   };

투두 카운트 세기

완료된 할 일(done: true)과 아직 완료되지 않은 할 일(done: false)에 대해 필터링을 하여 그 길이를 보여주도록 했다.

const unDoneTodoList = todoList.filter((todo) => !todo.done);
const doneTodoList = todoList.filter((todo) => todo.done);

<span>☑️ {unDoneTodoList.length}개 남음 </span>
<span>✅ {doneTodoList.length}개 완료</span>

👿 트러블 슈팅

[오류1] - useState 초기화로 인한 오류

todo 등록 시에 useState로 관리되는 id 값을 함께 저장하는데 여기서 오류가 생겼다.

const [todoList, setTodoList] = useState([]);
const [inputValue, setInputValue] = useState("");
const [todoId, setTodoId] = useState(0);

const onClickAddTodo = () => {
    if (inputValue) {
      setTodoList((prev) => [
        ...prev,
        {
          id: todoId,
          text: inputValue,
          done: false,
          isUpdating: false,
        },
      ]);
      setTodoId((prev) => prev + 1);
      setInputValue("");
    }
};

최초 렌더링 후 todo를 등록하면 잘 되는데 새로고침을 한번 해주면 todo의 id 값이 0으로 다시 초기화가 되는 것이다.

내가 생각한 해결방법은 이렇다.

1. todoList를 로컬스토리지에 저장하기 때문에 거기서 id값을 가져오기
2. todoList의 길이를 id 값으로 쓰기
3. id 값도 따로 로컬스토리지에 저장하고 가져와서 사용하기
4. Date.now() 사용하기

1로 해볼까 고민을 했다가...🤔 3은 id값을 로컬스토리지에 넣어도 되는건가? 라는 생각이 들었고
2도 같은 오류가 생기는 것 같아서 4번으로 최종 결정하게 되었다.

근데 뭔가 찜찜하게 해결한 기분이라 좀 더 알아봐야겠다🥲

[오류2] - input 입력 시 모든 컴포넌트 리렌더링

input에 할 일을 입력할 때 모든 순간마다 렌더링이 일어나는 것을 확인했다.
input에 대한 최적화...🤔 디바운스? 이건 아닌 것 같고..

그러다 문득 리액트를 처음 배울 때 들었던 강의에서도 input 입력 시 렌더링이 일어나는 예제를 본 기억이 났다!! 얼른 그 당시 배운 교재를 다시 찾아보았는데 React.memo를 쓰면 된다고 했다.

React.memo

React.memo는 고차 컴포넌트(Higher Order Component, HOC)로 컴포넌트가 동일한 props로 동일한 결과를 렌더링하면, React.memo를 호출하고 결과를 메모이징하도록 래핑하여 경우에 따라 성능을 향상시킬 수 있다.
즉, React는 컴포넌트를 재렌더링하지 않고 마지막으로 렌더링된 결과를 재사용한다.

정말 간단하게 컴포넌트를 내보낼 때 React.memo로 감싸주기만 하면 됐다.

{...코드}
export default React.memo(CreateTodo);

다른 컴포넌트들도 모두 React.memo를 추가해주었다.
이렇게 되면 각 컴포넌트의 props 데이터들이 변경되지 않는다면 기존의 값을 그대로 출력해준다.

결과

(처음에 렌더링 콘솔이 두번 찍히는 것은 strict 모드 때문이다.)

콘솔창을 보면 입력할 때 렌더링이 일어나지 않는 것을 확인할 수 있다!🤩

---

📚 참고

리액트 공식문서 - React.memo
벨로퍼트와 함께하는 모던 리액트 - 19. React.memo 를 사용한 컴포넌트 리렌더링 방지