자바스크립트를 안다면 콜백지옥을 들어봤을 것이다. 나는 지금 useCallback지옥을 경험하고 있다. props로 전달되는 모든 함수를 useCallback으로 만들어뒀다.
[개념] 언제 사용할까?
- 사용하지 않을 때: 컴포넌트가 리랜더링될 때 함수가 새로 만들어진다.
- 사용할 때: 컴포넌트가 리랜더링될 때 함수가 새로 만들어지지 않고 기존에 있던 함수를 그대로 사용한다. 따라서 리랜더링되는 요소에 포함되지 않는다.
나는 이랬다.
useCallback을 사용해서 속도를 개선할 수 있다면 '함수 선언할 때는 useCallback을 꼭 넣으세요~'라고 말했을 텐데, 왜 아무도 언제 쓰지 말라고는 알려주지 않는 거지?🫡라고 생각했다.
useCallback으로 만든 함수는 전부 props로 들어가는 것이다. dependency에 아무것도 안 들어가도 잘 동작된다. 하지만 저렇게 빨갛게 에러가 뜬 걸 보고 참을 수 없는 나는 eslint 주석처리를 통해 무효화하거나 넣어도 괜찮겠다 싶은 것들을 넣어두었다. 에러창이 뜨는 건 무조건 지켜야 하는 건 아닌데 억압받는 기분이 든다.
어떻게 작동할까?
구글에 react usecallback props too much로 검색했다. 언제 사용하면 좋을지 알려주는 3개의 해외 게시글을 읽었다. 리액트 공식문서에서는 정확히 어떻게 동작하는지 찾지 못했다.
우리가 useCallback으로 함수를 감싼다고 해서 dependency에 따라 만들고 안 만들고의 여부를 정하는 것이 아니다. 함수를 일단 만들고 useCallback에서 "dependecy에 없네? 내가 갖고 있어야지!" 하고 저장하는 것뿐이다. 따라서 내부에 있는 함수가 무겁다면 재랜더링 했을 때 큰 영향을 주니 사용을 고려해 봐야 하지만, 반대로 정말 가벼운 경우라면 오히려 useCallback을 호출하는 것이 더 비효율적이지 않은지 생각해 봐야 한다.
[실전] 언제 쓸까?
useCallback을 써서 속도가 기존보다 2~3배 향상되었을 때
시간측정을 할 때는 캐싱이 없는 조건이어야 하기 때문에 command+shift+R을 누른다.
- 사용했을 때
- 위에 있는 useCallback 지웠을 때
- useCallback 있는 거 다 지웠을 때
결론적으로 정말~ 무거운 일을 하는 함수가 아니면 useCallback을 사용하지 않는 것이 오히려 속도를 줄일 수 있었다. 무슨 일을 하느냐에 따라 속도를 측정해서 확인해보는 것이 좋겠다. 내 느낌보다 브라우저가 측정하는 게 훨씬 정확하니까.
참고 자료
Dmitri Pavlutin
Ivan Kleshnin - useRef에 대한 이야기가 있다.
