성능 최적화 팁

`renderItem` 함수는 `useCallback`으로 감싸서 불필요한 리렌더링을 방지하세요.

import { useCallback, useState } from 'react'; 
import { Image, Modal } from 'react-native';
import { GestureViewer } from 'react-native-gesture-image-viewer';

function App() {
  const images = [...];
  const [visible, setVisible] = useState(false);

  const renderImage = useCallback((imageUrl: string) => {
    return <Image source={{ uri: imageUrl }} style={{ width: '100%', height: '100%' }} resizeMode="contain" />;
  }, []);

  return (
    <Modal visible={visible} onRequestClose={() => setVisible(false)}>
      <GestureViewer
        data={images}
        renderItem={renderImage}
        onDismiss={() => setVisible(false)}
      />
    </Modal>
  );
}

대용량 이미지의 경우 `expo-image`나 `FastImage` 사용을 권장합니다.

import { Modal } from 'react-native';
import { GestureViewer } from 'react-native-gesture-image-viewer';
import { Image } from 'expo-image'; 

function App() {
  const images = [...];
  const [visible, setVisible] = useState(false);

  const renderImage = useCallback((imageUrl: string) => {
    return <Image source={{ uri: imageUrl }} style={{ width: '100%', height: '100%' }} contentFit="contain" />; 
  }, []);

  return (
    <Modal visible={visible} onRequestClose={() => setVisible(false)}>
      <GestureViewer
        data={images}
        renderItem={renderImage}
        onDismiss={() => setVisible(false)}
      />
    </Modal>
  );
}

인접 페이지를 더 많이 마운트해야 하는 경우가 아니라면 render window를 작게 유지하세요.

기본 windowSize는 3이며 이전, 현재, 다음 아이템을 마운트합니다. 더 큰 window는 인접 페이지를 더 빨리 보여줄 수 있지만 렌더링, 메모리, 이미지 디코딩 작업도 늘어납니다. 라이브러리는 windowSize에 하드 최대값을 두지 않으므로, 큰 값을 선택하는 것은 명시적인 성능 tradeoff입니다.

import { useCallback, useState } from 'react';
import { Image, Modal } from 'react-native';
import { GestureViewer } from 'react-native-gesture-image-viewer';

function App() {
  const images = [...];
  const [visible, setVisible] = useState(false);

  const renderImage = useCallback((imageUrl: string) => {
    return <Image source={{ uri: imageUrl }} style={{ width: '100%', height: '100%' }} resizeMode="contain" />;
  }, []);

  return (
    <Modal visible={visible} onRequestClose={() => setVisible(false)}>
      <GestureViewer
        data={images}
        renderItem={renderImage}
        windowSize={3} 
        onDismiss={() => setVisible(false)}
      />
    </Modal>
  );
}

#성능 최적화 팁

#renderItem 함수는 useCallback으로 감싸서 불필요한 리렌더링을 방지하세요.

#대용량 이미지의 경우 expo-image나 FastImage 사용을 권장합니다.

#인접 페이지를 더 많이 마운트해야 하는 경우가 아니라면 render window를 작게 유지하세요.

#디바이스에서 테스트하세요. (시뮬레이터에서는 성능이 제한될 수 있습니다.)

성능 최적화 팁

`renderItem` 함수는 `useCallback`으로 감싸서 불필요한 리렌더링을 방지하세요.

대용량 이미지의 경우 `expo-image`나 `FastImage` 사용을 권장합니다.

인접 페이지를 더 많이 마운트해야 하는 경우가 아니라면 render window를 작게 유지하세요.

디바이스에서 테스트하세요. (시뮬레이터에서는 성능이 제한될 수 있습니다.)