[TS/React] useState - set state 함수의 타입 : 콜백함수로 넣기

 

export interface Todo {

    id: string;

    title: string;

    content: string;

    deadline: string;

    isDone: boolean;

}

 

const [todoList, setTodoList] = useState<Todo[ ]>([ ]);   

 

일 때,   setTodoList 타입을  (cb: ..) 콜백함수 인자를 넣어주는 식으로 고쳤다.

export interface TodoSetList {
	todoList: Todo[];
	setTodoList: (todoList: Todo[]) => void;  // 이거를
}

// 이거로 고치자 ! 
(cb:(todoList:Todo[])=> Todo[]) => void

 

그럼

타입을 바꿔줘서 setTodoList( (prev) => prev. ... )  등으로 쓸 수 있게 된다.

 

 

*

그냥 setTodoList ( [...todoList, newTodo]  ) 

보다는

 

기존 previous 투두리스트를 유지하면서, 그걸 가져와서 업뎃해주는 게 좋기 떄문에 (그래야 사용자가 빠르게 여러번 버튼을 누른다든지 해서, 해당 함수를 연속으로 실행시켰을 때 누락되지 않고 업뎃됨)

 

setTodoList ((prev) =>  [...prev, newTodo]) 로 써주는 것.

이를 위해서는 타입을 위처럼 고쳐줘야 한다.