[React] 함수에 useCallback 사용하여 리팩토링 해보기

예전에 진행했던 맛피 프로젝트에서 팀원분의 코드를 보던 중, 팀원분께서 메서드에 useCallback을 사용하시는 것을 보았다. 그 팀원분이 왜 useCallback을 사용하는지 알아보고 나도 적용해보고 싶었는데, 그때 당시에는 시간도 너무 촉박했을 뿐더러 useCallback과 useMemo에 대해 대략적인 느낌만 알고 있었던 터라 사용해야겠다는 생각 자체를 못해서(?) 적용을 못해본채로 넘어가 아쉬웠었다. 기회가 된다면 코드를 다시 보고 useCallback을 사용할 수 있는 부분은 사용해보도록 리팩토링 하고 싶다(그래서 언제할건데^^?하긴 할거냐구.)

그래서 이번 프로젝트에서는 useCallback을 꼭 한 번 사용해보기로 했다. 작은 부분이라도!

 

먼저 useCallback이 무엇인지 알아보자.

useCallback은 리액트의 훅 중 하나로, 함수를 메모이제이션하여 동일한 함수 인스턴스를 유지하는 데 사용된다. 일반적으로 성능 최적화와 관련이 있으며, 콜백 함수가 자식 컴포넌트에 전달될 때 불필요한 렌더링을 방지하고자 할 때 사용된다.

useCallback의 주요 이점은 다음과 같다:

• 성능 최적화: useCallback을 사용하면 동일한 함수 인스턴스를 유지하기 때문에, 해당 함수를 사용하는 컴포넌트가 리렌더링될 때마다 새로운 함수를 생성하는 오버헤드를 줄일 수 있다. 이는 불필요한 렌더링을 방지하고 성능을 향상시킨다.
• 의존성 배열 제어: useCallback은 의존성 배열을 통해 함수의 의존성을 제어할 수 있다. 의존성 배열에 포함된 값이 변경되지 않는 한, 이전에 생성된 함수를 사용하게 된다. 이는 불필요한 함수 재생성을 방지하고 예상치 못한 동작을 방지하는 데 도움이 된다.

요약하자면 해당 함수가 자식 컴포넌트에 전달되거나, 의존성 배열에 있는 값이 자주 바뀌지 않는다면 useCallback이 최적화에 도움이 된다!

 

useCallback은 함수를 저장하는 개념이기 때문에 뭐가 됐든 작은 메모리라도 잡아먹을 것이고, 불필요한 곳에서까지 전부 사용한다면 코드가 무거워지지지 않을까? 라는 생각을 하였다. 찾아보니 useCallback을 사용하는 것이 무조건 좋은 방법만은 아니라고 한다. 계산이 복잡하거나 무거운 함수 등에 사용하면 좋다고 한다.

여하튼 곧 있을 프로젝트에서는 useCallback을 더욱 적극적으로 활용해볼 예정이다. 최적화에 대해 더 많은 지식을 얻고 싶다.

 

https://bbeeyaks-moment.tistory.com/entry/react%EC%B5%9C%EC%A0%81%ED%99%94-Reactmemo-useMemo-useCallback

[react] 최적화 - React.memo() & useMemo() & useCallback()

https://bbeeyaks-moment.tistory.com/entry/section4Unit3React-%EC%8B%AC%ED%99%941124

section4/Unit4/[React] 심화(11/25)