useCallback

부모 컴포넌트에서 자식컴포넌트에 props 로 내려준다면 함수를 포함하고 있는 컴포넌트가 rerendering 될 때마다 자식 컴포넌트도 함수가 새롭게 만들어져서 계속해서 re-rendering 하게 된다.

이렇게 리렌더링 현상을 없애주기 위해 useCallback 함수를 사용한다.

const handleClick = useCallback((id) => {
 let newTodoData = todaData.filter((data)=> data.id !== id);
 setTodoData(newTodoData);
 localStorage.setItem("할일앱", JSON.stringify(newTodoData));
 }, [todoData]
)

위의 코드에서 useCallback으로 인해 todoData가 변하지 않는다면 새로운 함수를 생성하지 않게 되므로 리렌더링 현상이 사라지게 된다.