useCallback의 기본형태!
- useMemo와 매우 흡사하지만!! memo는 어떠한 값을 메모이징 할때 사용하고 callback은 어떠한 함수를 메모이징 할때 사용한다!!
- useCallback의 기본형태 는 useEffect와 비슷하다!
- 첫번째 인자로 callback함수 형태를 받고 두번째 인자로 의존성 배열을 받는다.
- useCallback 역시 두번째 인자로 받은 값이 변경되어야만 다시 실행한다는 특징이 있다!!
예제로 알아보는 useCallback!!
- somefunction은 두번째 인자값으로 number를 받았으므로 그 값이 변할때 함수가 실행되도록 설계 되었다!
- 실행 결과를 확인해보자!
실행화면!
- 우리가 의도한대로 number 값이 변할때 useEffect가 호출되고 call 버튼을 눌렀을땐 실행되지 않는 것을 볼수있다.
두번째 예제!
모든 설명은 코드 중간 주석 처리로 대신하겠습니다!
결과화면!!!
- 우리가 의도한대로 값이 변할때 마다 useEffect가 실행되고 바뀐 값으로 도형의 size가 실시간으로 렌더링된다!
- Change Theme 를 통해 dark모드로 설정한것도 잘 실행되는 것을 알수 있다!!
본 페이지는 유튜브 별코딩님의 영상을 참고 하였습니다.
728x90
'REACT' 카테고리의 다른 글
| React! useState와 useEffect를 사용한 아주 아주 간단한 예제! (0) | 2022.11.29 |
|---|---|
| React Hooks 5.useMemo (0) | 2022.11.21 |
| React Hooks 4.useContext (0) | 2022.11.20 |
| React Hooks 3.useRef (0) | 2022.11.19 |
| React Hooks 2.useEffect (0) | 2022.11.17 |