React

성능최적화

let countLet = 0;
const [countState, setCountState] = useState(0);

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

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

countLet과 countState의 버튼을 누르게 되면 let 버튼을 누르면 콘솔의 값은 올라가지만 리렌더는 일어나지 않기 때문에 화면은 여전히 0인데
state 버튼은 누름과 동시에 리렌더되면서 값이 올라가고, 올려두었던 let의 count가 0으로 초기화된다.

=> useState을 제외한 모든 값이 다시 그려지고 있다!

presenter 페이지를 만들어서 container에서 import 해주게 되면
container의 state를 바꿨는데 자식컴포넌트인 presenter도 다시 렌더링 되는걸 확인할 수 있다.

이런 비효율적인 부분을 최적화 하기 위해서 Memoization을 사용 !

Memoization

1. memo

컴포넌트 memoization

import { memo } from "react";
// 메모 사용하려면 memo로 function 전체를 감싸줘야 함

function MemoizationPresenterPage() {
  console.log("프리젠터가 렌더링 됩니다");

  return (
    <>
      <div>=============================</div>
      <h1>여기는 프리젠터입니다 !</h1>
      <div>=============================</div>
    </>
  );
}

export default memo(MemoizationPresenterPage);

memo를 import 해주고 위에서 실습했던 presenter를 memo로 감싸주면 presenter는 리랜더가 일어나지 않고 container만 리랜더가 되는걸 확인할 수 있다.

2. useCallback(), useMemo()

변수 메모 useCallback, 함수 메모 useMemo

자식컴포넌트는 memo를 사용해서 불필요한 렌더링을 막아줬지만, 부모컴포넌트는 지속적으로 렌더링이 일어나는 상태기 때문에 부모컴포넌트에서도 렌더링이 일어나지 않아오 되는 부분은 렌더링되지 않도록 해주는 것이 useMomo(), useCallback()

2-1. useMemo()

const memo = useMemo(()=>{
	// return 값을 기억합니다.
	return Math.random()
	},[])
	console.log(`${memo}는 더이상 안 만들어`)

이렇게 하면 버튼을 계속 눌려도 Math.random() 으로 한번 만들어진 숫자가 계속해서 똑같이 나오는걸 확인 가능

2-2. useCallback()

  const onClickCountLet = useCallback(() => {
    console.log(countLet + 1);
    countLet += 1;
  }, []);

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

useCallback으로 함수를 감싸주게 되면 해당 함수를 다시 불러오지 않고 이전에 불러왔던 함수를 실행시키게 된다.
그런데 카운트 버튼을 누르면 카운트가 올라가지 않고 고정되어 있는걸 확인할 수 있는데,
useCallback이 함수를 memoization할 때 함수 안에 state가 들어가게 되면 state까지 함께 memoization하기 때문이다.

함수는 다시 불러오지 않지만 state는 사용하고 싶을 때는 prev 를 이용하면 된다

  const onClickCountState = useCallback(() => {
    console.log((prev) => prev + 1);
    setCountState((prev) => prev + 1);
  }, []);

setCountStte((prev) => prev+1) 로 작성해주면 함수는 새로 그리지 않지만, state값은 변경 가능하다

반응형 웹(미디어 쿼리)

사이트는 크게 반응형 사이트와 적응형 사이트로 나뉜다

1. 적응형 사이트
ex. 네이버
크기를 줄였을 때 사이즈가 같이 줄어들지 않는 것

2. 반응형 사이트
ex. 배달의민족, 코드캠프
크기에 따라 이미지도 같이 줄어드는 것

요즘 트렌드는 반응형 사이트지만, 모든 부분을 반응형으로 만들수는 없기 때문에 반응형이 들어가야 할 곳에만 적절하게 넣어줘야 한다 !

반응형 웹 만들어보기

1. 모바일 2. 태블릿 3. PC 세 가지로 나누기 부트스트랩 참고

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

breakPoints 따로 빼서 작성해주고, 사용할 때 import 해주기
import 하는 방법 : @media ${breackPoint.mobile}{ ...css코드... }

• 반응형 웹을 만들때는 가로사이즈를 퍼센트로 주기
• rem : body사이즈의 영향을 받음(body가 작아지면 폰트도 작아짐)
  (px to rem 구글링)
  em : 부모사이즈의 영향을 받음(부모가 작아지면 폰트가 일괄적으로 작아짐)