ivorycode

useCallback 메모이제이션(Memoization) useCallback은 useMemo와 아주 비슷하다. 특히 둘 다 메모이제이션을 한다는 공통점이 있다. 지난 포스팅에서도 언급했었지만, 너무나도 중요한 개념이니 다시 한번 짚고 넘어가 보자!! 참고로 useCallback도 useMemo처럼 React의 렌더링 성능 최적화를 위해 사용하는 hook이다. 메모이제이션이란 프로그래밍을 할 때 반복되는 결과를 메모리에 저장해 두고, 다음에 같은 결과가 나올 때 다시 계산할 필요 없이 빨리 실행하는 기법이다. 일종의 캐싱과 같다. 🆘 캐싱(Caching) 캐싱이란 캐시(Cache)라고 하는 좀 더 빠른 메모리 영역으로 데이터를 가져와 접근하는 방식을 말한다. 캐싱은 오랜 시간이 걸리는 작업의 결과를 저장..

나는 종종 개인 프로젝트, 실무업무를 할 때, 상태 값 확인과 혹시 모를 오류를 대비하기 위해 console.log()를 자주 찍어두는 습관이 있다. 그러던 어느 날, 여느 때처럼 상태 값 확인을 위해 함수에서 console.log()을 출력하다가 불필요한 렌더링이 된다는 사실을 발견하였다. 처음엔 큰 오류도 없고 별 탈없이 state 값을 변경시킨다고 생각하여 괜찮다는 생각도 순간 했었다. 하지만 다시 냉정히 되돌아서서 고민해봤다. - ‘a만 바꾸고 싶은데, 필요 없는 부분도 리렌더링 되는 게 과연 효율적이고 좋은 렌더링 과정인가?’ - ‘이런 코드가 티끌 모아 태산이 되어버린다면? 혹시 성능에서도 문제가 발생하진 않을까?’ - 'React 프로젝트에서 최적화를 하려면, 어떤 방법이 있을까?' 위의 고..