setState((prev)=>...)

Typescript 연습을 위해 여러 예제를 Typescript를 사용한 React로 구현 해봤습니다.

가장 기본이 되는 Todo list의 CRUD 구현했고, 피드백을 받았으며 useState훅 사용시 반환되는 setState의 새로운 기능에 대해 알게 되었습니다.

기존의 코드

빠른 이해를 돕기 위해 가장 간단한 함수인 Delete를 준비했습니다.

 const deleteTodo = useCallback(
    (id: number): void => {
      setTodos(todos.filter((todo: TodoItemType) => todo.id !== id));
    },
    [todos],
 );

해당 코드는 배열 내장 함수인 filter를 사용하여 Todo list의 삭제 기능을 구현한 것입니다.

useCallback을 사용하여 해당 함수를 메모아이징하여 사용할 수 있도록 나름 최적화에 신경을 써봤습니다.

하지만 피드백을 받은 결과 굳이 useCallback을 사용하며 deps 배열의 요소들이 변경되었는지를 감지할 비용이 소모될 필요가 없다는 것을 알았습니다.

이는 setState에서 자체적으로 콜백 인자를 받을 수 있으며 이는 해당 상태의 이전의 최신값을 가지고 있는 것입니다.

수정된 코드

  const deleteTodo = (id: number): void => {
    setTodos((prevTodos: TodoItemType[]) => prevTodos.filter((todo: TodoItemType) => todo.id !== id));
  };

코드가 훨씬 간결해지며 의존성을 갖는 외부 데이터가 없어서 useCallback을 굳이 사용할 필요가 없게 되었습니다.

이로 인해 deps 배열의 쇼소들을 감지하는 비용도 소모되지 않고, 코드도 더 보기 스마트하게 작성할 수 있었습니다.