32일차 / Memoization, @Media

김혜진·2022년 4월 27일

Memoization

새로 만들지 말고 메모해놓기

import { useState } from "react";

export default function MemoizationContainerPage() {
  console.log("컨테이너가 렌더링 됩니다.");
  let countLet = 0;
  const [countState, setCountState] = useState(0);

  const onClickCountLet = () => {
    // countLet = countLet + 1;
    countLet += 1;
    console.log(countLet + 1);
  };

  const onClickCountState = () => {
    setCountState(countState + 1);
    console.log(countState + 1);
  };

  return (
    <div>
      <h1>이것은 컨테이너 입니다</h1>
      <div>카운트(let): {countLet}</div>
      <button onClick={onClickCountLet}>카운트(let) + 1 올리기</button>
      <div>카운트(state): {countState}</div>
      <button onClick={onClickCountState}>카운트(state) +1 올리기</button>
    </div>
  );
}

다음과 같은 코드를 작성했을 때,

let은 렌더링 되지 않고, state는 렌더링되며 숫자가 올라간다.
그리고 렌더링이 되면서 let의 값이 초기화된다.

state가 렌더링을 하면 자식까지도 다시 만들어진다.

컨테이너와 프리젠터를 연결해서 리렌더하니 두 파일 모두 렌더링이 되는 모습.
규모가 크면 클수록 심해질 것이다.

크롬 확장프로그램 설치

체크박스를 체크

렌더링이 될 때마다 색깔이 바뀌는데, 노란색은 렌더링이 너무 많이 되고 있다는 의미

부모가 렌더링이 될 때, 자식은 렌더링 하고 싶지 않을 땐?

memo

=> memo를 사용한다.

memo 는 컴포넌트를 메모이제이션 하는 기능입니다.
memo 로 감싸진 컴포넌트의 결과를 저장시킨 후, 새로 렌더되는 결과가 저장된 결과와 같다면
해당 컴포넌트를 재렌더 하지 않게 합니다.
memo 로 적용된 컴포넌트는 상위 컴포넌트가 재렌더가 되더라도 넘어오는 props 의 값이 동일하다면 컴포넌트를 재렌더하지 않게 됩니다.

import { memo } from 'react'

function () {
  ...
  return ...
}

export default  memo(MemoizationPresenterPage)

컨테이너만 렌더링이 되는 모습

let이 렌더링 되면 값이 초기화 됐었는데, 값을 계속 유지시키고 싶다면 ?

UseMemo

=> useMemo를 사용한다.

useMemo 는 연산된 결과를 담는 변수의 값을 저장합니다.
useMemo 에는 총 두개의 인자값을 받아올 수 있습니다.
첫번째 인자로는 적용할 연산 함수를 넣어줍니다.
두번째 인자로는 적용할 변수를 배열로 감싸줍니다.

useEffect처럼 의존성 배열을 사용할 수도 있다.

props로 넘겨줘야하는 것은 꼭 필요한 것만 넘겨주기
(+)

렌더링이 되어도 aaa 값이 유지되는 모습

https://medium.com/@freshmilkdev/reactjs-render-optimization-for-collapsible-material-ui-long-list-with-checkboxes-231b36892e20

메모 남용X

useCallback

useCallback 은 함수를 메모이제이션 합니다.
메모이제이션된 함수는 재렌더 되더라도 함수를 새로 그려내지 않아 렌더 효율성을 올릴 수 있습니다.

useCallback의 잘못된 사용된 예
기억이 될 때 countState도 같이 기억이 되어버린다.
state 값이 증가되지 않음.
state까지 같이 기억을 해버렸다.
state를 직접적으로 사용하는 것은 피해주어야 한다.

그러면 값이 잘 변경된다.

언제 사용하지 말아야 하는가 ?

dependency array가 커지게 되면 차라리 새로 만드는 게 낫다.
없거나, 한 두개 있을 때 해주는 게 좋다.

실무에서 많이 사용하므로 많이 연습해볼 것!

Wappalyzer

크롬 확장프로그램 설치

사이트에 들어가면 와팔라이저에 불이 들어온다.

사용된 기술들을 확인할 수 있다.

@Media

내 사이트를 모바일에서도 보기

반응형 Web , 적응형 Web

반응형이 트렌드는 맞지만 모든 페이지가 반응형이어야 하는 것은 아니다.
한 페이지에 많은 것들을 보여주어야 하는 것은 적응형이 맞다.
많은 데이터가 반응형 처리를 했을 때 어떻게 처리해야할 지 난감하기 때문이다.

보통 적응형으로 만든다고 하면 가운데 사이즈를 먼저 정한다. (ex 1024 , 1080 )
그리고 나머지는 빈 공간으로 남겨두기
그래야 모니터가 작은 사람들도 한 페이지에 다 볼 수 있다.

부트스트랩의 그리드 옵션을 참고하여 pc, 모바일, 태블릿 사이즈에 맞게 보여주기
http://bootstrapk.com/css/

가로 픽셀에 따라 화면이 다르게 보여지게 된다.
@media의 조건을 충족한다면 Wrapper+@media가 되는 것이다.

전체사이즈를 줄이는 방법, 가로사이즈만 줄이는 방법 중 후자가 더 많이 사용된다.
일반적으로 세로는 스크롤을 통해 작용하고, 가로 스크롤을 사용하지 않기 때문이다.

그러면 가로사이즈는 어떻게 지정해줄까?

픽셀로 고정이 된다면 큰 기기나 작은 기기에서도 고정된 픽셀로 보이게 된다.
그래서 전체 가로폭만 px로 정해놓고 나머지는 %를 이용한다.

핸드폰마다 가로사이즈가 다른데 어떻게 할까?

=> 작은 것을 기준으로 맞춘다.
큰 것을 기준으로 만들어 놓고 줄이면 깨질 수가 있음.

ant design, material Ui 등의 태그는 반응형이 내장되어있는 경우도 있지만 너무 많이 사용하게 되면 태그 의존성이 높아져서 주의가 필요하다.

전체적으로 사이즈를 바꾸고 싶을 때?

rem 단위 사용 : body 태그의 font-size에 의존

px to rem
https://nekocalc.com/px-to-rem-converter

처음부터 rem으로 맞춰놓으면 전체 사이즈를 한번에 크게 하거나 작게 할 때 유용

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

=> Critical-Rendering-Path

css를 변경시킬 때 위치가 다시 바뀌면 색칠도 다시 일어난다.
위치를 재분배하는 것을 피할 수 있다면 성능에 도움이 된다.

https://csstriggers.com/

Blink 크롬
Gecko 파이어폭스
Webkit 사파리
..

HTML 마크업을 처리하고 DOM 트리를 빌드합니다.

Parse HTML
Build DOM Tree

CSS 마크업을 처리하고 CSSOM 트리를 빌드합니다.

Parse Stylesheet
Build CSSOM Tree

DOM 및 CSSOM을 결합하여 렌더링 트리를 형성합니다.

Calculate Style
Build Render Tree (DOM + CSSOM)

렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산합니다.

Layout
Update Layer Tree

개별 노드를 화면에 페인트합니다.

Paint
Raster
Composit Layer

페이지 초기 렌더링 이후 UI의 상태가 변경되어도 위 프로세스의 전체 혹은 일부를 거쳐 화면이 그려지게 됩니다. 따라서 Critical Rendering Path 를 최적화(1단계~5단계를 수행할 때 걸린 총 시간 최소화) 하면 초기 컨텐츠를 화면에 빠르게 렌더링할 수 있을 뿐만 아니라 초기 렌더링 후 화면 업데이트 시간도 줄일 수 있습니다.