[리액트] useCallback 사용

펑션을 자식에서 props로 내려 줄경우 부모가 리로딩 될 때 마다 자식도 같이 리랜더링이 되게 된다.

이를 피하기 위해서 useCallback함수를 사용해주면된다.

기존에 함수를 useCallback으로 감싸주고 변경 값이 변경될때에만 리렌더링이 될 값을 인자로 주면 된다.

적용전

const handleClick = (id)=>{    
  let newTodoData = todoData.filter((data) => data.id !== id);  
  setTodoData(newTodoData);
};

적용후

const handleClick = useCallback((id)=>{    
  let newTodoData = todoData.filter((data) => data.id !== id);  
  setTodoData(newTodoData);
},[todoData]);