React.memo 사용

PureComponent는 조기에 선택하지 않는 한 성능 최적화를 위한 적절한 접근 방식입니다. 기능적 대응물인 메모는 요즘 기능적 구성 요소와 함께 사용됩니다.

이제 내가 생각할 수 있는 메모화된 구성 요소로 구성 요소를 선언하는 두 가지 방법이 있을 수 있습니다.

인라인

import { memo } from 'react'

export const MyAwesomeFormWithInlineMemo = memo(() => (
  <form>
    <label>
      Hey

      <input type="text" />
    </label>
  </form>
))

인라인이 아님(이 접근 방식을 무엇이라고 부를지 모름):

import { memo } from 'react'

const MyAwesomeForm = () => (
  <form>
    <label>
      Yo!

      <input type="text" />
    </label>
  </form>
);

export const MemoedMyAwesomeForm = memo(MyAwesomeForm);

이제 둘 다 유사한 동작을 갖지만 두 번째 접근 방식은 브라우저 devtools에서 더 나은 DX를 제공합니다.

devtools의 구성 요소 탭에서 이들이 어떻게 보이는지 살펴보겠습니다.





memo는 반환된 구성 요소에 읽을 수 있는 displayName을 첨부하지 않는 HOC이기 때문입니다. 더 많은 인라인 메모 구성 요소를 자식으로 추가할수록 상황은 악화됩니다.

export const MyAwesomeFormWithInlineMemoX = memo(() => (
  <div style={{ padding: 20 }}>
    <fieldset>
      <MyAwesomeFormWithInlineMemo />
    </fieldset>
  </div>
));

이와 같이 인라인 접근 방식이 작동하는 동안 유지 관리에 마찰이 추가됩니다.

그러나 두 번째 접근 방식은 이미 암시적 이름이 있는 구성 요소 MyAwesomeForm을 래핑하는 것입니다. React는 이제 displayName을 올바르게 설정할 수 있으며 devtools에 예상대로 표시됩니다.

제안

가능하면 두 번째 방법을 사용하십시오. 구성 요소를 만든 다음 메모를 사용하여 내보냅니다. 이렇게 하면 devtools에서 구성 요소를 찾고 더 쉽게 유지 관리할 수 있도록 해당 구성 요소를 소스 코드에 매핑할 수 있습니다. :)

인라인 접근 방식을 사용해야 하는 경우 내부에 명명된 함수를 정의하여 메모를 지원하십시오.

import { memo } from 'react'

export const AwesomeComponent = memo(function AwesomeComponent() {
  return ...;
});

^ 이것은 devtools에서 같은 방식으로 AwesomeComponent로 표시됩니다.