U

Memoization는 결과를 캐싱하여 함수의 성능을 최적화하는 데 사용되는 기술입니다. ReactNative에서 Memoization는 함수형 컴포넌트의 렌더링 프로세스를 최적화하기 위해 상위 주문 컴포넌트(HOC)라는 메모와 함께 사용되는 경우가 많습니다.

ReactNative의 함수형 컴포넌트는 일반적으로 클래스 컴포넌트보다 읽기 및 쓰기가 쉽지만 불필요한 재렌더링을 유발하여 성능 저하를 초래할 수 있습니다. Memoization는 함수의 결과를 캐싱하고 동일한 인수로 함수가 호출될 때 캐시된 값을 반환함으로써 이러한 불필요한 재렌더링을 방지할 수 있습니다.

ReactNative에서 Memoization를 사용하려면 React에서 제공하는 메모 HOC를 사용하면 됩니다. 이 HOC는 함수형 컴포넌트를 받아들이고 Memoization된 새로운 컴포넌트를 반환합니다. 메모 HOC는 렌더링 간에 컴포넌트의 프로퍼티를 비교하고 프로퍼티가 변경된 경우에만 컴포넌트를 다시 렌더링합니다.

예를 들어, 아이템 목록을 소품으로 받고 지도 함수를 사용하여 아이템 목록을 렌더링하는 함수형 컴포넌트가 있다고 가정해 보겠습니다.

function MyList(props) {
  return (
    <FlatList
      data={props.items}
      renderItem={({ item }) => <ListItem title={item.title} />}
      keyExtractor={item => item.id.toString()}
    />
  );
}

Memoization이 없으면 이 컴포넌트는 항목 소품이 변경되지 않더라도 상위 컴포넌트가 다시 렌더링할 때마다 다시 렌더링됩니다. Memoization를 통해 이 컴포넌트를 최적화하려면 메모 HOC로 래핑하면 됩니다

const MemoizedList = React.memo(MyList);

이제 Memoization된 목록 컴포넌트는 소품이 변경된 경우에만 다시 렌더링하므로 성능이 향상됩니다.

사용메모 훅을 사용하여 동일한 MyList 컴포넌트를 메모하는 방법은 다음과 같습니다.

function MemoizedList(props) {
  const memoizedList = useMemo(() => <MyList {...props} />, [props.items]);

  return memoizedList;
}

이 예제에서는 MemoizedList라는 새로운 컴포넌트를 생성했는데, 이 컴포넌트는 useMemo 훅을 사용해 MyList 컴포넌트를 Memoization합니다. 사용메모 훅은 Memoization된 값을 반환하는 함수와 종속성 배열이라는 두 가지 인수를 받습니다. 배열의 종속성 중 하나라도 변경된 경우, 사용메모 훅은 메모된 값을 다시 계산합니다. 이 경우 종속성으로 props.items을 전달했기 때문에 사용메모 훅은 항목 소품이 변경될 때마다 MyList의 Memoization된 값을 다시 계산합니다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0