useCallBack 강의 질문

안녕하세요 이정환입니다.

먼저 이전 시간에 TodoItem 컴포넌트의 memo 함수에 직접 Props의 값을 비교하는 콜백함수(비교 함수)를 전달한 이유는 onUpdate, onDelete와 같은 객체 타입의 Props 들의 값이 변경되기 때문이었습니다. 따라서 비교 함수를 직접 제작하여 onUpdate나 onDelete를 제외한 Props가 변경되었을 때에만 컴포넌트를 리렌더링 하도록 처리를 해 주었었죠

그러나 이번 시간에는 useCallback을 사용하여 App 컴포넌트의 onUpdate와 onDelete 함수를 재생성 되지 않도록 방지해 주었습니다. 그리고 이렇게 되면 TodoItem 컴포넌트에게 Props로 전달되는 onUpdate, onDelete는 다시는 변경되지 않게 됩니다.

따라서 이렇게 되면 이제 이전 시간에 만들어둔 memo 함수의 콜백함수가 필요하지 않게 됩니다.
제는 onUpdate와 onDelete 함수가 변경될 일이 아예 없기 때문이죠 그래서 해당 함수들이 변경되었는지 비교하게 하더라도 전혀 아무런 문제가 발생하지 않습니다.

기존에는 onUpdate와 onDelete가 변경되는 상황에서 해당 함수들을 제외한 다른 Props들만 비교하도록 처리를 해주었어야 했는데 이제는 onUpdate와 onDelete 함수가 변경될 일이 아예 없으니 이런 별도의 처리가 필요하지 않은 것입니다.

다시 한번 쉽게 정리하자면 이렇습니다.

• 원래는 onUpdate와 onDelete 함수가 App 컴포넌트가 리렌더링 될 때 함께 변경되기 때문에 TodoItem의 memo 함수에 별도의 판별 함수인 콜백함수를 전달했었습니다.

• 그러나 이제는 onUpdate, onDelete 함수를 useCallback으로 최적화 했기 때문에 이 함수들이 다시 생성되지 않게 됩니다.

• 따라서 TodoItem 컴포넌트의 memo 함수에 전달되던 콜백함수는 이제 필요하지 않게 됩니다. onUpdate와 onDelete의 변경 사항을 무시하려고 만들었던건데, 이 함수들이 이제는 변경되지 않게 처리되었기 때문입니다.