React 컴포넌트 메모하기

메모이제이션은 React의 기능입니다. 라이브러리는 개체의 두 가지 버전을 (얕은 방식으로) 비교하고 동일한 경우 다시 렌더링(또는 다시 컴파일)하지 않아 성능과 메모리를 최적화합니다.

구성 요소에 사용되는 React.memo 고차 구성 요소(useMemo가 아니라 참고)는 구현하기가 매우 쉽지만 항상 효율적이거나 필요한 것은 아닙니다. React에서 메모이제이션에 대한 모든 것과 마찬가지로 무겁고 크거나 매우 자주 다시 렌더링되는 객체를 제외하고는 모든 것을 메모해야 합니다.

그래서 내 직업에서 흥미로운 사건이 일어났습니다. 작은 자식 구성 요소 안에 래핑되는 상당히 큰 부모 구성 요소가 있습니다. 주제 유형과 구성 요소 이름 만 변경하겠습니다.하지만 제가 제공하는 예는 제가 가지고있는 것과 동일합니다.

구성 요소를 어떻게 메모화합니까?

다음이 있다고 가정합니다.

  const BigComponent = ({...lots of props}) => {...lots of stuff done}

그런 다음 내보내기에 메모를 넣습니다.

  export default memo(BigComponent)

충분한가? 어쩔 땐 그래. 그러나 더 흥미로운 부분은 또 다른 부분입니다. React는 무엇을 비교할지 어떻게 압니까? 이전 버전과 다음 버전(새 소품으로 업데이트하는 버전)이 필요합니다. 같은 방식으로 memo는 이 두 버전을 콜백 인수로 사용할 수 있습니다. 더 빠른 비교를 위해 확인하여 메모 프로세스를 더욱 빠르게 할 수 있습니다.

BigComponent가 주로 학교 학생 카드를 관리하고 학생에 따라 자식 구성 요소가 표시된다고 가정합니다. 그런 다음 학생의 ID가 변경될 때 BigComponent가 변경되는 것으로 가정합니다(부모 구성 요소에서 매핑된 것으로 가정).

  const BigComponent = ({student, ...other props}) => {...lots of stuff done}

이제 학생의 ID를 비교하는 구성 요소를 메모할 수 있습니다. ID를 개체의 키로 생각할 수 있습니다. 동일하면 구성 요소가 동일하게 유지되고 그렇지 않으면 다시 렌더링됩니다.

하지만 보시다시피 저는 약간 다르게 했습니다!

  export default memo(BigComponent, (prev, next) => prev.student.id !== next.student.id)

위의 내용은 다음과 같습니다. 이전 ID가 다음 ID와 다른 경우 true를 반환합니다. 여기서 문제는 우리가 props를 가져오고 이를 자식 구성 요소에서 사용한다는 것입니다. 따라서 ID가 동일하면(===) 아무 작업도 수행하지 않습니다(카드를 열지 않음).

제 경우에는 ID가 다른지 확인하고 아무것도 하지 않습니다. 그러나 동일한 경우 다시 렌더링할 수 있습니다. 언제 다시 렌더링할지에 대한 조건을 제공하므로 ShouldComponentUpdate가 작동하는 방식과 유사합니다.

요약하자면 ID(키)가 변경될 때만 이 구성 요소를 반대 방향으로 메모라이즈(재렌더링하지 않음)하는 것입니다. 즉, 학생 카드를 열면 다시 렌더링됩니다. 그러나 더 많은 학생을 추가하거나 다른 학생 카드를 사용하면 페이지에서 다시 렌더링되지 않고 성능이 향상됩니다.