docs: create a performance optimization tips documentation (#60)

Author: saseungmin

docs/docs/en/guide/_meta.json

@@ -8,5 +8,6 @@
     "type": "dir",
     "name": "usage",
     "label": "Usage"
-  }
+  },
+  "performance-optimization-tips"
 ]

docs/docs/en/guide/performance-optimization-tips.mdx

@@ -0,0 +1,91 @@
+# Performance Optimization Tips
+
+#### Wrap the `renderItem` function with `useCallback` to prevent unnecessary re-renders.
+
+```tsx
+import { useCallback, useState } from 'react'; // [!code highlight]
+import { ScrollView, Image, Modal } from 'react-native';
+import { GestureViewer } from 'react-native-gesture-image-viewer';
+
+function App() {
+  const images = [...];
+  const [visible, setVisible] = useState(false);
+
+  // [!code highlight:3]
+  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}
+        ListComponent={ScrollView}
+        onDismiss={() => setVisible(false)}
+      />
+    </Modal>
+  );
+}
+```
+
+#### For large images, we recommend using [`expo-image`](https://docs.expo.dev/versions/latest/sdk/image/) or [`FastImage`](https://github.com/DylanVann/react-native-fast-image).
+
+```tsx
+import { ScrollView, Modal } from 'react-native';
+import { GestureViewer } from 'react-native-gesture-image-viewer';
+import { Image } from 'expo-image'; // [!code highlight]
+
+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" />; // [!code highlight]
+  }, []);
+
+  return (
+    <Modal visible={visible} onRequestClose={() => setVisible(false)}>
+      <GestureViewer
+        data={images}
+        renderItem={renderImage}
+        ListComponent={ScrollView}
+        onDismiss={() => setVisible(false)}
+      />
+    </Modal>
+  );
+}
+```
+
+#### For handling many images, we recommend using [`FlashList`](https://shopify.github.io/flash-list/).
+
+- [FlashList Performance Guide](https://shopify.github.io/flash-list/docs/fundamentals/performance)
+
+```tsx
+import { useCallback, useState } from 'react';
+import { Image, Modal } from 'react-native';
+import { GestureViewer } from 'react-native-gesture-image-viewer';
+import { FlashList } from '@shopify/flash-list'; // [!code highlight]
+
+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}
+        ListComponent={FlashList} // [!code highlight]
+        onDismiss={() => setVisible(false)}
+      />
+    </Modal>
+  );
+}
+```
+
+#### Test on actual devices (performance may be limited in simulators).

docs/docs/ko/guide/_meta.json

@@ -8,5 +8,6 @@
     "type": "dir",
     "name": "usage",
     "label": "사용법"
-  }
+  },
+  "performance-optimization-tips"
 ]

docs/docs/ko/guide/performance-optimization-tips.mdx

@@ -0,0 +1,91 @@
+# 성능 최적화 팁
+
+#### `renderItem` 함수는 `useCallback`으로 감싸서 불필요한 리렌더링을 방지하세요.
+
+```tsx
+import { useCallback, useState } from 'react'; // [!code highlight]
+import { ScrollView, Image, Modal } from 'react-native';
+import { GestureViewer } from 'react-native-gesture-image-viewer';
+
+function App() {
+  const images = [...];
+  const [visible, setVisible] = useState(false);
+
+  // [!code highlight:3]
+  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}
+        ListComponent={ScrollView}
+        onDismiss={() => setVisible(false)}
+      />
+    </Modal>
+  );
+}
+```
+
+#### 대용량 이미지의 경우 [`expo-image`](https://docs.expo.dev/versions/latest/sdk/image/)나 [`FastImage`](https://github.com/DylanVann/react-native-fast-image) 사용을 권장합니다.
+
+```tsx
+import { ScrollView, Modal } from 'react-native';
+import { GestureViewer } from 'react-native-gesture-image-viewer';
+import { Image } from 'expo-image'; // [!code highlight]
+
+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" />; // [!code highlight]
+  }, []);
+
+  return (
+    <Modal visible={visible} onRequestClose={() => setVisible(false)}>
+      <GestureViewer
+        data={images}
+        renderItem={renderImage}
+        ListComponent={ScrollView}
+        onDismiss={() => setVisible(false)}
+      />
+    </Modal>
+  );
+}
+```
+
+#### 많은 수의 이미지를 다룰 때는 [`FlashList`](https://shopify.github.io/flash-list/) 사용을 권장합니다.
+
+- [FlashList Performance 가이드](https://shopify.github.io/flash-list/docs/fundamentals/performance)
+
+```tsx
+import { useCallback, useState } from 'react';
+import { Image, Modal } from 'react-native';
+import { GestureViewer } from 'react-native-gesture-image-viewer';
+import { FlashList } from '@shopify/flash-list'; // [!code highlight]
+
+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}
+        ListComponent={FlashList} // [!code highlight]
+        onDismiss={() => setVisible(false)}
+      />
+    </Modal>
+  );
+}
+```
+
+#### 디바이스에서 테스트하세요. (시뮬레이터에서는 성능이 제한될 수 있습니다.)