react Hook함수(2) UseRef, useMemo, useCallback

< useRef >

- js에서 getElementById, querySelector와 같은 DOM SELECTOR 함수처럼
- React에서 DOM에 접근하게 되는 일이 생긴다면 접근하게 해주는 Hooks 함수
- ref 객체 내부의 값은 render와 상관없이 유지된다(리랜더링 하지 않는다)

 

onClick이라는 속성의 태그 내에 "=" 표시가 있으면 무조건 속성은 속성값입니다

값에 대한 함수를 넣어줍니다

 

 

< use Memo >

- Memo는 Memoization이며 기존에 수행한 연산의 결과값을 저장했다가 같은 입력이 오면 재활용하는 

 프로그래밍 기법입니다

- 연산된 값(결과)를 반환하여 랜더링 되었을 때 재사용할 수 있도록 해주는 Hooks 함수

- 컴포넌트의 성능을 최적화 시킬 수 있습니다

 

useMemo에는 함수를 잘 담지 않고 값이 바로 선언되기 때문에 변수를 담습니다

즉, 해당값이 의존성 배열에 있는 값이 바뀌어야만 랜더링 시 재 호출되기 때문에 메모이제이션을 

실현할 수 있습니다

 

 

< useCallback >

- 특정 함수를 새로 만들지 않고 랜더링 되었을떄 재사용 할 수있게 해주는 Hooks 함수

- useMemo와 비슷한 Hook함수이지만, useMemo는 특정 결과값을 재사용할때 사용하여 좀 다릅니다

 

 

Q. useMemo useCallback을 사용해서 최적화를 진행한다고 했을 때
어떤 부분에서 최적화(전방면)가 가능할까요?

 

앞에 의존성 배열 값이 바뀔 때만 실행되게 되어있습니다

의존성 배열이 없는 다른 부분이 랜더링 되었을 때 useMemo나 useCallback에 영향을 주지 않기 때문에

불러올 필요가 없습니다

 

 

Memoization(메모이제이션)
- 어떤 함수가 생성되거나 해당 값이 연산되는 결과가 오래걸립니다 (30초)
- 리액트는 상태가 바뀌면 랜더링, 따라서 해당 함수나 값도 랜더링 시 재실행하는데
- 굳이 값이 바뀌지 않는 부분이 랜더링 되어야할 필요가 있을까?

 (값이 안바뀌는 연산인데 재선언 해야할 필요가 없는 함수를 랜더링이 되더라도
재생성 및 연산하지 않도록(랜더링 시 필요없는 연산이나 시간을 줄여주기 위해) 하기 위해 사용합니다)