리랜더(rerender) 시 성능저하 처리

interpolate 값 설정 시 rerender 시 성능에 영향을 주고 있어 useMemo 처리

src/components/Player.js

@@ -13,7 +13,6 @@ import {
   Share
 } from 'react-native';
 import Modal from 'react-native-modal';
-
 import { Slider, Icon } from 'react-native-elements';
 import Animated, { Easing } from 'react-native-reanimated';
 import { State, PanGestureHandler } from 'react-native-gesture-handler';
@@ -161,13 +160,28 @@ export default props => {
   const destination = tabY - minHeight - getStatusBarHeight(true);
   const [currentPlayerValue, setCurrentPlayerValue] = useState(0);
   const [isPlay, setPlay] = useState(false);
-  const { onGestureEvent, translateY } = useMemo(() => {
+
+  const {
+    onGestureEvent,
+    translateY,
+    opacity,
+    playContainerWidth,
+    playerContainerHeight,
+    videoWidth,
+    videoHeight,
+    playerControlOpaciy,
+    playerBoderRadius,
+    mainPlayerContainerHeight,
+    PlayerHeadWidth,
+    PlayerHeadHeight,
+    PlayerHeadOpacity
+  } = useMemo(() => {
+
     const translationY = new Value(0);
     const velocityY = new Value(0);
     const offsetY = new Value(0);
     const offsetY2 = new Value(0);
     const gestureState = new Value(State.UNDETERMINED);
-
     const clockY = new Clock();
     const finalTranslateY = add(translationY, multiply(0.2, velocityY));
     /**
@@ -197,7 +211,7 @@ export default props => {
       ]
     );
 
-    // const translateY = add(ty, offsetY2);
+    const translateY = add(ty, offsetY2);
     // const onGestureEvent = event(
     //   [
     //     {
@@ -212,7 +226,7 @@ export default props => {
     // );
 
     return {
-      translateY: add(ty, offsetY2),
+      translateY,
       onGestureEvent: event(
         [
           {
@@ -224,72 +238,70 @@ export default props => {
           }
         ],
         { useNativeDriver: true }
-      )
+      ),
+      opacity: interpolate(translateY, {
+        inputRange: [0, midBound - 100],
+        outputRange: [1, 0],
+        extrapolate: Extrapolate.CLAMP
+      }),
+      playContainerWidth: interpolate(translateY, {
+        inputRange: [0, midBound],
+        outputRange: [width, width - 16],
+        extrapolate: Extrapolate.CLAMP
+      }),
+      playerContainerHeight: interpolate(translateY, {
+        inputRange: [0, midBound],
+        outputRange: [height, 0],
+        extrapolate: Extrapolate.CLAMP
+      }),
+      videoWidth: interpolate(translateY, {
+        inputRange: [0, midBound, upperBound],
+        outputRange: [width, width - 16, width / 4],
+        extrapolate: Extrapolate.CLAMP
+      }),
+      videoHeight: interpolate(translateY, {
+        inputRange: [0, midBound, upperBound],
+        outputRange: [width / 1.78, minHeight * 1.3, minHeight],
+        extrapolate: Extrapolate.CLAMP
+      }),
+      playerControlOpaciy: interpolate(translateY, {
+        inputRange: [midBound, upperBound],
+        outputRange: [0, 1],
+        extrapolate: Extrapolate.CLAMP
+      }),
+      playerBoderRadius: interpolate(translateY, {
+        inputRange: [midBound, upperBound],
+        outputRange: [0, 15],
+        extrapolate: Extrapolate.CLAMP
+      }),
+      mainPlayerContainerHeight: interpolate(translateY, {
+        inputRange: [0, midBound, upperBound],
+        outputRange: [height, minHeight * 1.3, minHeight],
+        extrapolate: Extrapolate.CLAMP
+      }),
+      PlayerHeadWidth: interpolate(translateY, {
+        inputRange: [0, width],
+        outputRange: [width, 0],
+        extrapolate: Extrapolate.CLAMP
+      }),
+      PlayerHeadHeight: interpolate(translateY, {
+        inputRange: [0, 50],
+        outputRange: [50, 0],
+        extrapolate: Extrapolate.CLAMP
+      }),
+      PlayerHeadOpacity: interpolate(translateY, {
+        inputRange: [0, minHeight],
+        outputRange: [1, 0],
+        extrapolate: Extrapolate.CLAMP
+      })
     };
   }, []);
 
-  const opacity = interpolate(translateY, {
-    inputRange: [0, midBound - 100],
-    outputRange: [1, 0],
-    extrapolate: Extrapolate.CLAMP
-  });
-  const statusBarOpacity = interpolate(translateY, {
-    inputRange: [0, statusBarHeight],
-    outputRange: [1, 0],
-    extrapolateLeft: Extrapolate.CLAMP
-  });
-  const playContainerWidth = interpolate(translateY, {
-    inputRange: [0, midBound],
-    outputRange: [width, width - 16],
-    extrapolate: Extrapolate.CLAMP
-  });
-  const playerContainerHeight = interpolate(translateY, {
-    inputRange: [0, midBound],
-    outputRange: [height, 0],
-    extrapolate: Extrapolate.CLAMP
-  });
-  const videoWidth = interpolate(translateY, {
-    inputRange: [0, midBound, upperBound],
-    outputRange: [width, width - 16, width / 4],
-    extrapolate: Extrapolate.CLAMP
-  });
-  const videoHeight = interpolate(translateY, {
-    inputRange: [0, midBound, upperBound],
-    outputRange: [width / 1.78, minHeight * 1.3, minHeight],
-    extrapolate: Extrapolate.CLAMP
-  });
-  const playerControlOpaciy = interpolate(translateY, {
-    inputRange: [midBound, upperBound],
-    outputRange: [0, 1],
-    extrapolate: Extrapolate.CLAMP
-  });
-
-  const playerBoderRadius = interpolate(translateY, {
-    inputRange: [midBound, upperBound],
-    outputRange: [0, 15],
-    extrapolate: Extrapolate.CLAMP
-  });
-  const mainPlayerContainerHeight = interpolate(translateY, {
-    inputRange: [0, midBound, upperBound],
-    outputRange: [height, minHeight * 1.3, minHeight],
-    extrapolate: Extrapolate.CLAMP
-  });
-  const PlayerHeadWidth = interpolate(translateY, {
-    inputRange: [0, width],
-    outputRange: [width, 0],
-    extrapolate: Extrapolate.CLAMP
-  });
-  const PlayerHeadHeight = interpolate(translateY, {
-    inputRange: [0, 50],
-    outputRange: [50, 0],
-    extrapolate: Extrapolate.CLAMP
-  });
   useEffect(() => {
     return () => {};
   });
 
   const slideUp = () => {};
-
   return (
     <>
       <PanGestureHandler
@@ -338,16 +350,13 @@ export default props => {
             </Animated.View>
             <Animated.View
               style={{
-                opacity,
+                opacity: PlayerHeadOpacity,
                 backgroundColor: 'rgba(255,255,255,0)',
                 width: PlayerHeadWidth,
                 height: PlayerHeadHeight
               }}
             >
-              <PlayerHeader
-                {...props}
-                visibleMenu={setModalVisible}
-              />
+              <PlayerHeader {...props} visibleMenu={setModalVisible} />
             </Animated.View>
             <Animated.View style={{ width: videoWidth, height: videoHeight }}>
               <Animated.Image
@@ -365,7 +374,7 @@ export default props => {
             }}
           >
             <Animated.View style={{ opacity }}>
-              <PlayerContents 
+              <PlayerContents
                 {...props}
                 currentPlayerValue={currentPlayerValue}
                 setCurrentPlayerValue={setCurrentPlayerValue}