Day 32 )

송인호·2022년 6월 22일
0

dailyStudy

목록 보기
30/35

1교시 Memoization 실습

container 나 presenter로 페이지를 이동하고 싶으면

이런식으로 쓰면 페이지 이동이 가능하다.

  1. render 시, 변수가 새로 만들어지는 상황
  2. 함수가 새로 만들어지는 상황
  3. 부모 리렌더시, 자식도 리렌더되는 상황
    을 막기위해 어떻게 해야하는지 알아보겠다.

state는 페이지를 다시 만들어 진다.

let 을 올린 것도 state를 써 리렌더 시키면 다시 초기화된다.

컴포넌트를를 import한 페이지까지 리렌더가 된다.

해결방법:

  • 컴포넌트 메모 => memo
  • 변수 메모 => useMemo
  • 함수 메모 => useCallback
    등이 있다.

memo

memo 를 사용하면 Presenter의 리렌더는 발생하지 않는다.

memo를 사용해도 props를 넘겨주면 같이 렌더링 된다.

useMemo

useMemo를 써주면 컨테이너는 리렌더가 되지만 useMemo는 리렌더 되지 않는다.

useCallback

하지만 useCallback으로 메모이제이션을 하는데 안에 state가 있으면 state가 있어서 리렌더가 되지 않는다.


prev를 써줘야지 정상적으로 리렌더가 되는 것을 볼수 있다.


JSX 에서 바로 사용하는 방법, 간단하게 할 때는 쓰지만 추천하지 않는다.

useMemo를 useCallback처럼 사용하는 방법

반응형 웹

모바일에서는
정답은 아니지만
width는 %, height는 고정을시켜 준다.

em
rem 바디의 폰트사이즈가 바뀌면 자동으로 크기가 조절된다.

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

  1. 다운로드
  2. HTML 준비
  3. CSS 준비
  4. 두개 합치기
  5. 위치 그리기
  6. 색칠하기

Layout, Paint
브라우저에 따라서 Reflow, Repaint 처럼 다르게 부르기도 한다.

위치가 바뀌면 색이 다시 칠해지기 때문에
위치그리는 것이 오래걸리에 틀을 바꾸는 작업은 줄이는게 좋다.

profile
프론트엔드 개발자

0개의 댓글