TIL 24.12.02

📚 TIL

useReducer (별도 포스팅 예정)

• useReducer 예제 복습
• 당일 과제 TODO 만들기(등록, 추가, 삭제)

💬 마치며

TODO 과제 회고

id 값을 설정할 때 초기에는 배열의 마지막 인덱스를 기준으로 id를 설정했는데, 배열 변경이 일어날 경우 예상치 못한 충돌이나 변경 문제가 발생할 가능성이 있었다. 그래서 useRef를 활용해 id 값을 관리하는 방식으로 변경

기존 코드

// 마지막 배열 인덱스 번호로 id 설정
 const lastIndex = todos[todos.length - 1].id + 1;

변경 코드

 //id
  const idRef = useRef(0);

  // 투두리스트 추가 함수
  const addTodo = (value: string) => {
    if (value.trim() === "") {
      alert("내용을 입력해 주세요");
      inputRef.current?.focus();
    } else
      setTodos((todos) => [
        ...todos,
        { id: idRef.current++, content: value, completed: false },
      ]);
    setInput("");
    inputRef.current?.focus();
  };

분명 더 좋은 코드가 있겠지만... 이번 과제를 통해 useRef가 DOM 조작 외에도 다양한 상황에서 활용될 수 있다는 것을 알게 됐다