오늘 배울 내용!
state와 let을 이용해 버튼을 클릭하면 +1이 되는 함수를 만들었다.
let을 이용한 함수는 리렌더링이 안되기 때문에 올라가는게 안보이지만
useState를 이용한 함수는 State가 변하면서 리렌더링된다.
여기서 리렌더링 되기때문에 countLet은 0가 된다.
ect) useEffect도 결국 rerendering이 되기때문에 state는 감지하지만
let은 감지하지 못한다
자식컴포넌트를 불러와서 불러도 전부 리렌더링돼서 굉장히 비효율적이다.
1 useMemo를 이용하면 변수를 기억할 수 있다.
리렌더링이 되도 useMemo의 의존성 배열이 변하지 않는 이상 값을 기억해준다.
.
2.함수는 useCallback 사용!
3. react에서 제공하는 memo를 이용하면 자식컴포넌트를 저장하고 값이 변경되지 않으면 리렌더링되지않는다.
주의사항1) memo를 모든 컴포넌트에 걸게되면 컴퓨터가 어딘가에 저장을 하고 있어서 memo를 리렌더링 되는애들까지 불필요하게 걸어버리면 느려질 수밖에 없다.
주의사항2) 의존성배열에 많은 애들을 넣어버리면 유지보수가 힘들기때문에 차라리 없애서 전체적으로 리렌더링 되는게 낫다.
(pre-rendering을 끝내고 브라우저에 그리기 전.)
위치를 다시그리는건 다시 색칠하는 것보다 느리다.why? 색깔도 다시 또 칠해야된다!
이런원리를 알아야지 성능최적화를 어떻게할까를 생각할 수 있다.
download flow
<< 리소스 다운로드 순서 >>
1. HTML 파일의 모든 다운로드 주소를 읽어들인 후, background에서 6개씩 다운로드 요청 시도
2. <head /> 태그부터 읽기 시작
3. <script /> 태그의 "정지!" 라는 구문에서 화면은 멈췄지만, 이미 다운로드는 요청이 들어간 상태 Prefetch
link태그로 board.html에 가기도 전에 미리 다운로드를 받아서 링크 클릭을 하면 바로 페이지로 이동된다.
Preload
원래이미지가 가장 늦게 다운받아지고 파일크기가 가장 크기때문에 느린데 preload를 이용하여 먼저 다운받아 올 수있다.
.
한번에 6개씩 받아오므로, body태그의 이미지는 가장 마지막에 다운로드
눈에 보이는 이미지를 먼저 다운로드 받아서 보여주고, 클릭하면 실행되는 JS는 나중에 받아온다.
전체 모든 파일 총 다운로드 시간이 더 짧아진다.
프리페치는 다음을 위해서 받는 것이므로, 나중에 받는다.
