<aside> ♻️ 시리즈

1. 네?? Component를 memoization해도 리렌더링이 발생한다구요..?? 💦 (feat. context)
2. Provider에 전달할 value를 memo하기
3. React.memo의 2번째 인자를 아시나요? </aside>

<aside> 💡 목차

</aside>

개요

Wabinar 는 워크스페이스 안에서 회의록을 자유롭게 이동할 수 있어요.

기능은 잘 작동하지만 아래 동영상을 보면 사이드바의 내용엔 변함이 없는데 매 클릭마다 계속 리렌더링이 발생하고 있어요.

https://user-images.githubusercontent.com/65100540/204973388-98f1a47e-0cf4-40d5-b0f6-930f0f2a004e.mov

그래서 불필요한 리렌더링을 막는 리팩토링을 진행했어요.

memoization

잦은 리렌더링은 서비스 사용에 불편함을 초래할 수 있어요. 따라서 동일한 계산을 반복해야할 땐 이미 계산한 값을 메모리에 저장해 동일한 계산을 하지 않도록 방지할 수 있어요.

• React에서 컴포넌트가 렌더링 될 때
  • state나 props가 변경될 때
  • forceUpdate()를 실행했을 때
  • 부모 컴포넌트가 렌더링 되었을 때

useCallback

• useCallback은 memoization된 callback을 반환해요.

const memoizedCallback = useCallback(() => {
	doSomething(state)
}, [state])

useMemo

• useMemo는 memoization된 값을 반환해요.

const memoizedValue = useMemo(() => getValue(state), [state])

React.memo