꿈꾸는 개발자

의의 useCallback의 경우 함수를 메모제이션을 하기 위해 사용되는 hook으로 알려져 있다.공식문서에 따르면 re-render를 할 때 함수를 cache한다고 나와있다. 결국 위 두 말을 합쳐보면, 함수를 기억해 re-render 과정을 통해 동일한 함수를 사용하도록 최적화하는 기법이라고 보면 된다. const cachedFn = useCallback(fn, dependencies) 코드 구조는 위와 같다. parameter를 살펴보면 fn: cache 즉 기억/저장하고 싶은 함수를 의미한다. 공식문서에 따르면첫 render 때 fn은 호출되는 것이 아닌 반환이 되는 것이다. 그 다음 렌더링부터 만약 dependencies의 값이 변경되지 않는다면, react는 계속 같은 함수를 반환해줄 것이다...

redux-toolkit을 사용하다보면 가장 큰 단점이 새로고침을 했을 때 상태들이 초기화된 다는 것이다. plain JS에선 localstorage에 저장해서 상태를 유지할 수 있지만, redux에서 굳이 상태를 유지하기 위해 모든 상태를 일일이 다 localstorage 저장하는 것은 너무 힘들어 보인다....이런 문제를 간편하게 해결할 수 있는 것이 redux-persist이다 먼저 redux-persist를 사용하기 위해선 따로 redux-persist를 설치해줘야 한다 npm i redux-persist 사용법 redux-persist는 localstorage 뿐만 아니라, session storage, async storage 등 종류에 따른 storage를 제공한다. 하지만 본 글에서 주로 ..