코드 캠프 31일차) 성능 최적화를 해보자

1. Memorization
2. Preload / Prefetch
3. Promise All

---

가비지 컬렉션..
게임을 하다 보면 가끔 끊기거나 중간에 멈추는 현상이 발생하는데, 메모리가 차서 발생하는 현상으로 메모리가 꽉 찰 때 마다 비워서 빈 공간이 생기는 시간 동안 멈추게 된다.

1. useMemo

   const aaa = useMemo(() => Math.random(), []);

2. useCallback

   const bbb = use
   

3. React.memo() HOC로 컴포넌트에 적용

   React.memo()를 사용하지 않았을 때 React.memo(자식 컴포넌트)를 사용했을 때React.memo()로 감싸진 컴포넌트 같은 경우 받아오는 props가 dependency array 역할을 하게 된다. 받아오는 props값이 바뀌면 리렌더링이 일어나고 바뀌지 않으면 리렌더링은 일어나지 않는다.

브라우저는 어떻게 그림이 그려질까?

참조하면 좋은 사이트
1. 다운로드
2. HTML 준비
3. CSS 준비
4. 두 개가 합쳐짐
5. 위치 그려짐 - Layout Reflow
6. 색칠하기 - Paint Repaint

5번과 6번 사이에 포토샵과 비슷한 작동 방식의 Composite 단계가 있음(합치는 과정)

어느 것이 더 많은 성능을 잡아먹는 괴물인가?
Reflow >>>>>>>>>>>>>>>>>>> Repaint

위치가 잡혀야 색칠을 할 수 있기 때문! 색칠은 그저 마지막 단계를 다시 하면 되지만, 위치가 바뀌면 바뀐 위치에 색칠까지 다시 해야 한다.

성능을 개선시키고 싶다면 Layout Reflow를 어떻게 하면 줄일 수 있을 것인가? 를 고민해보는 것이 좋다.

!!!!!!!!!!!!!! vs코드에 정리해놓은 내용 참고하기 !!!!!!!!!!!!!

---

반응형 BreakPoints 관리하는 방법

모바일, 태블릿

CSS 전역 스타일 관리 방법

1. JS 전역 상수로 관리(emotion)
2. ThemeProvider 사용하여 관리(emotion)
3. CSS Variable로 관리(CSS)

ThemeProvider가 강력하긴 하지만, CRP를 생각했을 땐 CSS Variable을 사용하는 것이 좋다.