캐싱, useCallback로 훅 시야 넓이기

내 리액트의 현재 수준은 기초에 머물러 있다. 기초에 머물러 있는 것은 문제가 되지 않는데 기초에서 몇 달째 좀처럼 나아가질 못하고 있어 문제이다. html, css, js는 강의를 듣다보면 어느 정도 코드를 쓰다보면 느는 것을 볼 수 있는데 리액트는 그게 되지 않는다. 그 이유는 훅의 사용 때문에 그렇다. 훅의 원리를 제대로 이해하지 못하면 훅을 사용할 수 없고 그 것은 우리가 자동차가 있어도 운전 방법을 몰라 걸어가는 것과 같다. 그래서 몇 달 째는 나는 useState, useEffect에서 벗어나지 못하고 있었다. 그래서 이제부터 좀 차근차근 정리해나가기로 한다.

 

사실 정리는 공식문서에 정연하게 되어있지만 난 아직 공식문서를 읽고 실행할 수 있는 단계에 이르지 못했다. 어느 정도 알아먹어야 공식문서를 보고 이러라는 구나 하는데 난 한 줄 읽고 이 용어가 뭐지? 하고 있어, 친절한 공식문서, 특히 정리가 잘되있기로 유명한 리액트 공식문서의 도움을 뿌리치고 있는 상황이다. 그래서 글을 써가며 나만의 말로 이해해 나가기로 한다. 이번 주제는 유즈콜백과 유즈메모이지만 캐싱을 모르면 이해할 수 없기에 캐싱부터 배워 본다.

 

썸내일은 밝은 모습이지만 설명은 약간 침울한 톤으로 해주신다. 하지만, 설명을 차근차근해주신다.

캐시의 어원은 물건을 일시적으로 저장하는 것이고 이를 사용하는 것이 캐싱이라고 한다.

 

이게 핵심 장면인 것 같다. 일일히 다 하드에서 가져오기에는 시간이 오래걸리니 캐시 메모리를 도입해 자주 쓰는 데이터는 빠르게 불러오는 것이다. 그럼 이 캐싱하고 useMemo하고 useCallback하고 무슨 연관이냐 묻는다면,

 

1. useMemo는 자주 쓰는 값을 캐싱해두어 값을 재사용하는 것이다.

2. useCallback은 자주 쓰는 함수를 캐싱해두어 함수를 재사용하는 것이다.

 

 

아래는 별코딩의 내용이다. 저의 유아 지적 수준인 나도 이해할 수 있을 정도로 친절하게 설명해주신다.

 

리액트는 함수형 컴포넌트 렌더링의 의미는 함수를 호출한다는 의미이고 모든 내부 변수가 초기화 된다는 의미이다. 

 

고로. 유즈 콜백에 캐싱해두면 컴포넌트 함수를 호출해도 함수를 다시 호출하지 않는다. (제사용은 귀여운 오타로 봐주자.) 다만, 의존성 배열에 있는 값이 변경되면 다시 함수를 호출한다.

 

와 여기서 설명 듣고 깨우친 리액트를 깨우친 기분이 들었다. 여기서 유즈 이팩트에 someFunction이 변경되었는지 확인해주는데 number 값을 변경하자마자 유즈 이팩트가 호출되었다. 이 말은 즉슨 someFunction에 변경사항이 생겼다는 것인데 논리 구조는 이러하다.

 

1. 숫자 값을 증가시키면 number state값이 변경된다. 

2. state, 즉 상태가 변경되면 컴포넌트 자체가 다시 렌더링된다.

3. 그럼 컴포넌트 안의 값은 초기화를 거치된다.

4. 그럼 someFunction을 저장하고 있는 참조값이 변경된다.

5. 그럼 유즈 이팩트의 의존성 배열에서는 someFunction의 참조값이 달라진 것을 것을 보고 유즈 이팩트가 실행된다.

 

의존성 배열에 number를 넣어서 number가 변경될 때만 함수를 호출하도록 만들어주었다.

 

이 예시로 완전히 이해한 느낌이 들었다. useCallback의 존재는 의존성 배열에 값 이외에 영향 받지 않도록 함수를 저장해두는 것이다. 리액트 상태 관리가 무엇인지도 가늠할 수 있게 되었다. 이런 훅을 통해서 상태, 즉 state에 따라 불필요한 렌더를 막아주어 효율적인 메모리 사용을 도모하는 것이다.