최적화란?
- 불필요한 렌더링을 발생시키지 않는 방법들
1 memo(React.memo) : 컴포넌트를 캐싱
2 useCallback : 함수를 캐싱
3 useMemo : 값을 캐싱
memo란
- 컴포넌트를 메모이제이션하는 것
export default 컴포넌트 -> export default React.memo(컴포넌트)
UseCallback이란
- 인자로 들어오는 함수 자체를 메모이제이션 함
useMemo와 useCallback을 사용하는 경우
- 자식컴포넌트에서 사용시 useEffect가 반복적으로 발생하여 무한 루프에 빠질 위험의 경우
- 복잡하고 계산비용이 많이드는 경우
- 사용자의 입력 없이 map 또는 filter등을 사용하는 렌더링에도 useMemo를 사용해서 메모이제이션 적용
-- useCallback: 의존성이 거의 없는 가벼운 기능
-- useMemo: 계산 집약적인 작업
DOM과 Virtual DOM
- 가상돔이란, react나 vue에서 사용하는 것으로 원하는 화면을 그려준다. (속도가 매우 빠름)
DOM이란, 컴포넌트로 구성된 웹페이지 -> 그 페이지를 문서(DOCUMENT) -> 페이지를 이루는 컴포넌트(element)라고 함
가상DOM이란, 실제 DOM을 조작하는 것보다, 메모리상에 올라와 있는 javascript객체를 변경하는것이 훨씬 가볍다. 실제 dom에 대한 복사본을 변경하느것이라고 보면된다.
차근차근