리액트를 다루는 기술-10 (일정 관리 애플리케이션)

책의 코드를 자세히 보지 않고, 기능만 정리하여 스스로 개발했다.

이후에 책의 코드와 비교하며 개선점을 찾아봤다.

기능

1. 할 일 입력

• • 버튼을 눌렀을 때, Enter를 눌렀을 때 입력 이벤트가 발생
• placeholder : 할 일을 입력하세요.

2. 리스트 추가

• 입력한 내용을 리스트에 추가 함
• 리스트 구성요소
  • 체크박스 ( 할 일을 다 했을 경우 체크 할 수 있도록)
  • 할일 내용 (체크박스 클릭 됐을 때 → 색깔 회색, 가운데 줄)
  • 삭제 버튼 ( 버튼 누를 경우 리스트에서 삭제)

---

사용 라이브러리

• react-icons

App.js

• useReducer 사용
  • 상태로 todoList를 가짐
    • {id, check, todo}
  • action
    • remove, check, add

TodoInput.js

• app에서 dispatch 함수를 props로 받음
• • 버튼을 눌렀을 때, Enter를 눌렀을 때 입력 이벤트가 발생
  • → dispatch({type: “add”, todo})
• input value 초기화

TodoList.js

• app에서 dispatch 함수, state 를 props로 받음
• TodoListItem onClick event listenner 생성
  • dispatch({type: “remove”}, todoId)
  • dispatch({type: “check”}, todoId)

TodoListItem.js

• TodoLIst 에서 todo, onClickCheck, onClickRemove props로 받음

---

개선할만한 코드

내가 구현한 TodoInput.js

import "./TodoInput.css";
import React, { useCallback, useRef, useState } from "react";

function TodoInput(props) {
  const { dispatch } = props;
  const $input = useRef(null);
  const [id, setId] = useState(1);

  const handleAddTodo = useCallback(
    (e) => {
      // eslint-disable-next-line no-unused-expressions
      if (e.key !== "Enter" && e.type !== "click") return;

      const newTodoInfo = { id, check: false, todo: $input.current.value };
      setId(id + 1);

      dispatch({ type: "add", payload: newTodoInfo });
      $input.current.value = "";
    },
    [id]
  );

  return (
    <section className="todo-input-wrapper">
      <input
        type="text"
        onKeyUp={handleAddTodo}
        placeholder="할 일을 입력하세요."
        ref={$input}
      ></input>
      <button onClick={handleAddTodo}>+</button>
    </section>
  );
}

export default TodoInput;

• useRef를 사용했던 부분을 useState로 input의 value만 유지하도록 변경 해야함
• 그 방식이 더 나은 이유
  • 프로젝트가 커지면 ref를 다른 컴포넌트로 전달하여 여러곳에서 수정가능하게 될 수도 있음
  • 어차피 안정성을 생가하면 ref를 감싸는 함수를 만들어야하는데 그럴바에는 value만 유지할 수 있는 useState를 사용하는 것이 나음

 💡 input , button 을 form 안에넣고 submit을 하면 enter , click 이벤트를 각자 지정할 필요가 없음

 

수정한

import "./TodoInput.css";
import React, { useCallback, useState } from "react";

function TodoInput(props) {
  const { dispatch } = props;
  const [id, setId] = useState(1);
  const [value, setValue] = useState("");

  const onChangeValue = useCallback((e) => {
    setValue(e.target.value);
  }, []);

  const handleAddTodo = useCallback(
    (e) => {
      if (e.key !== "Enter" && e.type !== "click") return;

      const newTodoInfo = { id, check: false, todo: value };
      setId(id + 1);
      dispatch({ type: "add", payload: newTodoInfo });
      setValue("");
    },
    [id, value]
  );

  return (
    <section className="todo-input-wrapper">
      <input
        type="text"
        onKeyUp={handleAddTodo}
        placeholder="할 일을 입력하세요."
        value={value}
        onChange={onChangeValue}
      ></input>
      <button onClick={handleAddTodo}>+</button>
    </section>
  );
}

export default TodoInput;