렌더링 최적화에 대하여 (by 최적화무새)

1. React.memo 사용

• 최하위 컴포넌트들 (Button, Text 등)은 부모 컴포넌트가 바뀌었을 때에 무조건 렌더링된다.
• 자녀 컴포넌트가 변하지 않았는데 불필요한 렌더링을 계속 하는 문제를 React.memo로 해결할 수 있다.
• 최적화된 컴포넌트를 리턴하여 렌더링이 될 상황에 Prop check 수행, Props 변화가 있을 때만 렌더링하도록 설정함.

before

after

🧐 아주 미약하게 렌더링 범위가 축소된 것을 볼 수 있다.

하지만 최적화무새에게는 아직 부족하지..

문제 인식

• prop는 원시 타입이 아니면 함수형 컴포넌트(부모)가 렌더링될 때마다 prop이 새로운 object이기 때문에 memo(Child); 해도 제대로 작동 안 할 수 있다.
• 이러한 경우에는 useMemo Hook과 함께 써야 최적화가 가능하다.

2. useMemo Hook과 함께 쓰기

const startPauseButton = useMemo(() => {
    return <Button context={<Image src={buttonConfig.src} />} onClick={handleOnToggle} />;
  }, [buttonConfig.src]);

  const postponeDoneButton = useMemo(() => {
    return (
      <>
        <Button context={<Image src={Postpone} />} />
        <Button context={<Image src={Done} />} />
      </>
    );
  }, []);