state 렌더링 원리

state를 쓰면 리렌더링이 되기 때문에 위에서 똑같은게 다시 만들어진다.

이렇게 state할때마다 재렌더링 되는건 불필요하다.

불필요한 재렌더를 막는 방법 Memoization

Memoization이란?
컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술

1. useMemo라는걸 사용한다.

사용법
useMemo(() => Math.random(), []){}
의존성배열안에 [] 있는게 바뀌지않으면 재렌더할때도 기존값을 기억만 하고 유지한다.

• React.memo는 아예 렌더링을 시키지 않게 한다. 뒤에 해보겠다.

2. 함수를 유지시키는건 useCallback이 있다.

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

마찬가지로 의존성 배열을 넣어준다.

그런데 이렇게 사용하는건 잘못된 사용법이다.
countState가 0일때를 기억해서 매번 1만 나오기 때문이다.

이때는 setCountState((prev) => prev + 1); 이렇게 해줘야한다.
이전값은 매번 달라지기 때문이다!

그럼 모든 컴포넌트에 memo를 달아버릴까?

모든 컴포넌트에 memo를 굳이 거는건 별로 안좋다.
컴퓨터는 메모를 다 따로 기록하는데 이런것들이 많아지면 오히려 느려져서 좋지못하다. 렌더링 될 이유가 없는 페이지만 메모를 거는게 좋다.

그리고 의존성배열이 많으면 오히려 유지보수에 안좋다.