메모이제이션은 컴퓨터 과학에서도 쓰이는 용어
컴포넌트가 실행될 때 안에 있는 내용이 싸악 그려진다.
use로 시작하는 것은 기록되어있지만, 나머지는 렌더링이 되면서 초기화된다.
부모컴포넌트가 새로 그려지면 자식 컴포넌트도 다시그려진다 —> 너~무 비효율
어떻게 최적화할것인가,, 그 전에
React Developer Tools - 개발자도구(profiler) - settings
컴포넌트가 렌더링되는 영역일 때 표시해줘~
렌더링이 많이 되면 노란색됨
-> 렌더링 되는 부분
렌더링 녹화
어떻게 하면 자식컴포넌트를 렌더링을 안할까!
자식 컴포넌트를 memo로 감싸주기!
이제 프리젠터 렌더링 안됨
컴포넌트를 여러개 사용하면 (서비스가 커지면) 효율이 떨어지니까 memo 기능을 잘 사용하자
Memo -> 컴포넌트 기억
useMemo -> 변수 기억
useCallback -> 함수 기억
컴포넌트 뿐 아니라 함수도 새롭게 실행된다
렌더링될때마다 컴퓨터 저장공간에 들어오기 때문에 비효율적이다
재생산을 막자!! -> useMemo, useCallback
const aaa = useMemo(()=> { 리턴을 기억 }, [])
-> useEffect처럼 쓴다
근데 useMemo는 거의 안쓴다 let 어쩌구~ 이건 거의 쓸 일 이 없어서…
언제 쓰는게 좋냐면~ 엄청나게 복잡한 수학적인 계산을 변수에 담았을때 쓰면 좋다 -> 복잡한 계산을 다시 안해도 되니까!
state에다가 useCallback 을 직접 적용하면 안되고
countLet도 useMemo처리
-> 이제 렌더링 되는 부분은 1,2,3
useMemo은 변수(값)를 기억하는데 ?? 값이 함수라면
useMemo로 useCallback 만들어보기! (그냥 만들어봄, 잘 안쓴다!)
다시 프리젠터로 넘어가서, memo 기능을 쓰면 항상 리렌더가 안될까?
넘기는 값이 있고, 값이 바뀌면 리렌더 된다!
useCallback, memo (react-memo)는 많이 쓰니까 포폴에 많이 써보자!
connectToDevTools: true
: 특정 사이트에 들어가면 무슨 기술을 썼는지 보여준다
How it works
Go to any website
Click the icon for a list of identified technologies
Click on a technology or category for more insights
브라우저 말고 사파리에서 작동되는지 확인해주는 폴리필