memoization/@media

Park Bumsoo·2022년 4월 27일

내용저장
Memoization
반응형 웹
@Media

Memoization

React페이지의 랜더는 랜더가 되었을 때 즉 부모가 렌더링 될 때
import 해서 가져온 자식 또한 같이 랜더링 된다는 특징을 가지고있다.

Memoization은 자식컴포넌트를 놔두고
부모만 랜더링을 하고 싶을 경우에 사용할 수 있는 기능이다.

// 부모가 되는 부분
import { useState } from "react";
import MemoizationPresenterPage from "./presenter";
export default function MemoizationContainerPage() {
  console.log("컨테이너가 렌더링 됩니다!!!");
  const [countState, setCountState] = useState(0);

  const onClickCountState = () => {
    console.log(countState + 1);
    setCountState(countState + 1);
  };
  return (
    <div>
      <div>=====================================</div>
      <div>카운트(state): {countState}</div>
      <button onClick={onClickCountState}>카운트(state) +1 올리기!!!</button>
      <div>=====================================</div>
      <MemoizationPresenterPage />
    </div>
  );
}

// 자식이 되는 부분
export default function MemoizationPresenterPage() {
  console.log("프리젠터가 렌더링 됩니다!!!");
  return (
    <div>
      <div>=====================================</div>
      <h1>이것은 프리젠터 입니다!!!</h1>
      <div>=====================================</div>
    </div>
  );
}

위 코드를 랜더하고 카운트 버튼을 누르게 된다면 콘솔에는

state의 카운터가 올라가며
console.log("컨테이너가 렌더링 됩니다!!!");
console.log("프리젠터가 렌더링 됩니다!!!");
두 부분이 같이 보이게 되며 두 페이지가 랜더가 되는걸 알 수 있다.

이 때 react에서 제공해주는 {memo}를 적용시키게 되면

import { memo } from "react";
function MemoizationPresenterPage() {
  console.log("프리젠터가 렌더링 됩니다!!!");
  return (
    <div>
      <div>=====================================</div>
      <h1>이것은 프리젠터 입니다!!!</h1>
      <div>=====================================</div>
    </div>
  );
}

export default memo(MemoizationPresenterPage);

이런식으로 작성이 가능하고,

count 부분이 있는 컨테이너 페이지에서만
렌더가 되게 된다.

useMemo

위 memo는 Hooks로도 존재하는데


import { useMemo } from "react";


const aaa = useMemo(() => {
    return Math.random();
  }, []);
  console.log(aaa);

위와 같은 형태로 작성을한다.

useEffect와 비슷한 형태를 가지며
안쪽의 부분을 return Math.random(); 저장해주게 되며,
의존성 배열 []을 이용하여 특정 상황에서는 함수를 다시 실행 시킬 수 있다.

위 사진처럼 랜덤값을 입력해야하는 return Math.random();가
같은값을 저장해 가져오는걸 볼 수 있다.

useCallback

useCallback은 함수를 memo해주는 Hooks 이다.

Memo처럼 하나의 값을 저장하는게 아닌 함수를 저장하기에

위쪽예제를 보면

 // countState가 같이 기억이되어 state가 저장이 되지 않는다.
 // useCallback 사용시 state를 사용하면 안된다.

 // 잘못된 함수
 const onClickCountState = useCallback(() => {
     console.log(countState + 1);
     setCountState(countState + 1);
   }, []);
 // 제대로 된 함수
 const onClickCountState = useCallback(() => {
     console.log(countState + 1);
     setCountState((prev) => prev + 1);
   }, []);

위쪽의 잘못된 함수를 입력하면
count는 최초한번 랜더가 된 +1 만 적용이되어
몇번을 눌러도 count는 1이 된다.

그래서 useCallback은 사용할 경우 state를 직접적으로 사용하면 안되기에
아래의 함수처럼 prev를 이용한다.

useCallback 또한 []을 사용할 수 있으며 특정 값에 반응하여 함수를 실행시킬 수 있다. 하지만

[]에 들어갈 상태값(state ...)이 많아지게 된다면,
useCallback을 사용해 함수를 저장하기보단 새로운 함수를 만드는 방법이 효율적이다.

@Media 반응형 웹

반응형 웹은 페이지의 크기에 따라 비율/구성이 바뀌게 되는 웹을 뜻한다.
이는 대표적으로 우리가 보는 웹/앱의 차이에서 느낄 수 있으며, 현 시점에서의 트랜드이다.

반대로 적응형 웹은 크기 비율이 고정되어있는 웹을 뜻하며
많은 데이터를 보여주는 네이버/다음/쿠팡... 같은 사이트들에서 사용하게 된다.

그중에서 @Media는 Bootstrap 의 @Media를 많이 사용한다.
(http://bootstrapk.com/css/)

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

기존의 스타일이 이렇게 주어졌다면

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

  @media (min-width: 768px) and (max-width: 991px) {
    width: 500px;
    height: 500px;
    background-color: green;
  }

  @media (max-width: 767px) {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
`;

@media로 범위를 지정해 특정크기에서 보여주는 style을 변경시켜 줄 수 있다.

이 때 주는 모바일/태블릿/pc 등의 크기들은 위 bootstrap 링크에 기재 되어 있다.

이 때는 pixels 보단 REM을 사용하여 안쪽 내용을 비율로 한번에 조정할 수 있어 최상위 영역에 많이 사용하게 되는데 이는 (https://nekocalc.com/px-to-rem-converter)에서 변환이 가능하다.