TIL 31

Memoization

state 등의 변경으로 페이지 리랜더링 시 모든 자식 컴포넌트까지 전부 리랜더링을 하는데 이게 비효율적

데이터가 변경되지않는 컴포넌트가 다시 랜더링되어 리소스 낭비를 막기 위해 사용하는 메모 기능

import { memo } from 'react'


 function MemoizationPresenterPage(){
    console.log("Presenter Rendering")

    return(
        <div>
            <div>-=-=-=-=-==-=-=-=-=-=-=-=--=-=-=-=--=</div>
            <h1>MemoizationPresenterPage</h1>
        </div>
    )
}
export default memo(MemoizationPresenterPage)

위의 코드처럼 리액트로부터 임포트를 해온 다음 페이지를 메모로 감싸주기
메모 기능을 사용하면 데이터가 변경되지 않는 컴포넌트는 리랜더링이 발생하지 않는다.
물론 props 등을 통해 부모 컴포넌트로부터 데이터가 넘어오고, 해당 데이터가 변한다면 메모 기능과 상관없이 리랜더가 발생한다.

변수 또한 메모 기능을 사용할 수 있다.

import { useMemo } from "react";
const aaa = useMemo(()=> 
          Math.random()
    , [])

이렇게 사용하면 변수 aaa는 변하지않고 초기 값으로 유지된다.
물론 특정 값이 변할 때 해당 변수가 변하고 리랜더링 되게끔 설정도 가능한데 이 부분은 의존성 배열에 값을 부여해 지정할 수 있다.

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

useMemo는 사실 잘 사용하지 않고 특정한 조건(계산식이 복잡하거나 리소스가 많이 필요하지만 값이 자주 변하지 않는 경우)에 사용한다.

함수 또한 비슷한 방식으로 리소스를 아낄 수 있는데

const [countState, setCountState]=useState(0)

const onClickState=useCallback(()=>{
        setCountState((prev)=> prev+1)
    }, [])

useCallback() 을 사용하면 페이지 리랜더링 시에도 함수가 다시 만들어지지 않고 재사용이 가능해지며 특정 조건에서 함수가 다시 만들어지게 하려면
의존성 배열에 조건을 넣어주면 된다.
단, useCallback을 사용하는 함수의 경우 state사용을 조심해야 하는데 state의 값을 바로 넣는게 아니라 prev를 사용해야 예상치 못한 오류를 방지할 수 있다.

@Media

+) 적응형 웹에서는 가로 사이즈를 보통 1024로 설정(1200px이 넘지 않도록)
다양한 디바이스에서 웹이 실행될 때 기준을 1024로 잡음

반응형 웹을 제작하기 위해서는
1. 반응형 기획
2. 반응형 디작인
이 선행되어야 한다. 또한 랜더페이지에 보여지는 데이터가 많을 경우 반응형 웹과는 맞지 않을 수 있다.

반응형 웹에서는 브레이크 포인트를 기준으로 화면을 전환하는데 예를 들어 가로 사이즈가 800px인 경우 화면 전환을 통해 보여주는 데이터를 바꾸게끔 설정하는 페이지가 있을 경우 브레이크 포인트는 800px이다.
또한 브레이크 포인트 기준으로 페이지를 전환할 때 사용하는 태그는 미디어 태그로 이를 미디어 쿼리라고 한다.

+) 가로 사이즈는 보통 %로 관리를 하는게 좋다. 따라서 가로 사이즈에 따라 그 안에 들어있는 폰트나 이미지의 크기 조정또한 필요하고
사이즈를 정하는데 출발하는 기준점은 작은 화면에서 큰 화면으로 늘려가는 방향으로 해주는게 좋다.
또한 사이즈를 정할 때 반응형 기준으로 정하기 위한 사이즈는 rem을 사용하며 px to rem converter 를 사용해 폰트, 화면 사이즈 등을 정확하게 지정해 줄 수 있다.