[TIL] Day33

은채·2022년 6월 22일

TIL 코드캠프

코드캠프 TIL

목록 보기

33/43

6월 22일 학습목표

Memoization

3가지 상황을 발생시켜서, 어떻게 막을 것인지 알아보기

1.State 변경으로 인한 재렌더링

state 변경을 하면, 컴포넌트가 재렌더링된다.
=> 컨테이너가 재렌더링되면서 ..

let 부분도 초기화가 되어 다시 0에서부터 시작된다.
let은 컴포넌트를 초기화시키지는 않음

계속해서 페이지를 다시 그리는 것은 낭비!

프리젠터까지 모두 재렌더링이 되고 있다

해결방법은?

설치하자

크롬탭에서 사용하자!

메모로 프리젠터를 감싸주자

memo로 프리젠터 리렌더링을 막았다!

memo를 해놔도, 변경된 state값이 넘어오게 되면 재랜더링이 된다

useMemo : 값을 메모

dependency array가 변경되어야만 Math.random()의 값이 바뀌게 된다.

그 전까지는 유지!

useCallback : 함수를 메모

useCallback()을 사용했다

state가 변하지 않는다...
useCallback()안에 state를 넣으면.. state까지 멈추었다
그 시점에서 이전값을 가지고 오는 방식으로 작성하자

jsx부분에 함수 넣기

간단하게 넣을 수 있지만....memo하기 힘들고, html구조를 보기 어려워 비추

useMemo가 useCallback의 역할을 할 수도 있다

메모
어디서 많이 사용할까?
admin page~~
관리자테이블에는 수많은 데이터 테이블이 있는데, 메모를 적용해야 속도가 빠르다!

반응형 웹

적응형 : 크기를 줄였을 때 사이즈가 같이 줄어들지 않고 덮이는 것 (네이버, 다음, 쿠팡, 옥션 등) => 많은 정보를 보여주는 사이트들은 대부분 적용형

작은 노트북에서도 보일 수 있게 중간 부분에 내용이 들어감
사이드에는 내용이 많지 않음

반응형 : 크기에 따라 이미지도 줄어드는것 (배민)

모바일

반응형 실습
3단계 : 모바일 - 태블릿 - Pc

import styled from "@emotion/styled";

const Wrapper = styled.div`
  width: 1000px;
  height: 1000px;
  background-color: #d1d1a7;

  @media (min-width: 768px) and (max-width: 991px) {
    width: 500px;
    height: 500px;
    background-color: #cdf4f6;
  }
  @media (max-width: 767px) {
    width: 100px;
    height: 100px;
    background-color: #eacdf5;
    /* display: none; */
  }
`;

export default function responsiveDesign() {
  return <Wrapper>상자</Wrapper>;
}

브레이크 포인트는 바뀔 수 있기 때문에 따로 두자

export const breakPoints = {
  tablet: "(min-width:767px) and (max-width:991px)",
  mobile: "(max-width: 767px)",
};

import 해서 사용하기

import { breakPoints } from "../../src/commons/styles/media";

 @media ${breakPoints.tablet} {
    width: 500px;
    height: 500px;
    background-color: #cdf4f6;
  }
  @media ${breakPoints.mobile} {
    width: 100px;
    height: 100px;
    background-color: #eacdf5;
    /* display: none; */
  }

반응형 웹을 만들때 크기에 따라서 늘었다 줄었다 할 수 있도록 가로 사이즈를 퍼센트로 주고,
세로사이즈를 고정하는 방법이 일반적