룰렛 소스 class 형을 함수형 hook으로 변경

이 class 형의 소스를 함수형으로 바꿔 실행해 보는데 class형은 룰렛판이 앱을 껐다 키기 전에는 안바뀌는데 제가 임의로 바꾼 함수형은 바뀌더라구요… 혼자 공부해보는 중인데… 소스좀 봐주세요

const { width } = Dimensions.get('screen');
const numberOfSegments = 20; //조각수
const wheelSize = width * 1.5; //휠 넓이
const fontSize = 26;
const oneTurn = 360;
const angleBySegment = oneTurn / numberOfSegments; // 한조각 각도
const angleOffset = angleBySegment / 2; //한조각 각도 / 2
const knobFill = color({ hue: 'purple' });

export default function App (){
    const [enabled , setEnabled] = useState(true);
    const [finished , setFinished] = useState(false);
    const [winner , setWinner] = useState(null);
    const [homeData, getHomeData] = useState()
    angle = 0;
    const _angle = useRef(new Animated.Value(0)).current;

const makeWheel = () => {
  const data = Array.from({ length : numberOfSegments}).fill(1);
  console.log(data,"data");
  const arcs = d3Shape.pie()(data);
  const colors = color({
    luminosity: 'light',
    count: numberOfSegments
  });

  return arcs.map((arc, index) => {
    // padAngle 칸 간격 사이 공간 , innerRadius 가운데 공간.
    const instance = d3Shape
      .arc()
      .padAngle(0.01)
      .outerRadius(width / 2)
      .innerRadius(10);

    return {
      path: instance(arc),
      color: colors[index],
      value: Math.round(Math.random() * 10 + 1), //[200, 2200]
      centroid: instance.centroid(arc)
    };
  }); 
}
const _getWinnerIndex = () => {
  console.log(angle,"angle")
  const deg = Math.abs(Math.round(angle % oneTurn));
  // 시계 반대 방향으로 회전하는 
  if(angle < 0) {
    return Math.floor(deg / angleBySegment);
  }
  // 시계 방향으로 회전하는
  return (numberOfSegments - Math.floor(deg / angleBySegment)) % numberOfSegments;  
}
const _onPan = ({nativeEvent}) => {
  if (nativeEvent.state === State.END) {
    const { velocityY } = nativeEvent;

    // 점점 감쇄 초기 속도에서 0으로 값을 애니메이션.
    Animated.decay(_angle, {
      velocity: velocityY / 1000,
      deceleration: 0.999,
      useNativeDriver: true
    }).start(() => {

      _angle.setValue(angle % oneTurn);
      // snap 제공된 배열에서 가장 가까운순자 또는 일정한 간격으로 숫자를 스냅하는 함수를 만든다
      const snapTo = snap(oneTurn / numberOfSegments);
      Animated.timing(_angle, {
        toValue: snapTo(angle),
        duration: 300,
        useNativeDriver: true
      }).start(() => {
        const winnerIndex = _getWinnerIndex();
        setEnabled(true);
        setFinished(true);
        setWinner(makeWheel()[winnerIndex].value);
      });
      // do something here;
    });
  }
}
const _renderWinner = () => {
  console.log("실행2");
  return (
    <RNText style={styles.winnerText}>Winner is: {winner}</RNText>
  );
}
//  화살표 모양 
const _renderKnob = () => {
  const knobSize = 30;
  // [0, numberOfSegments]
  const YOLO = Animated.modulo(
    Animated.divide(
      Animated.modulo(Animated.subtract(_angle, angleOffset), oneTurn),
      new Animated.Value(angleBySegment)
    ),
    1
  );

  return (
    <Animated.View
      style={{
        width: knobSize,
        height: knobSize * 2,
        justifyContent: 'flex-end',
        bottom: '-50%',
        zIndex: 1,
        transform: [
          {
            rotate: YOLO.interpolate({
              inputRange: [-1, -0.5, -0.0001, 0.0001, 0.5, 1],
              outputRange: ['0deg', '0deg', '35deg', '-35deg', '0deg', '0deg']
            })
          }
        ]
      }}
    >
      <Svg
        width={knobSize}
        height={(knobSize * 100) / 57}
        viewBox={`0 0 57 100`}
        style={{ transform: [{ translateY: 8 }] }}
      >
        <Path
          d="M28.034,0C12.552,0,0,12.552,0,28.034S28.034,100,28.034,100s28.034-56.483,28.034-71.966S43.517,0,28.034,0z   M28.034,40.477c-6.871,0-12.442-5.572-12.442-12.442c0-6.872,5.571-12.442,12.442-12.442c6.872,0,12.442,5.57,12.442,12.442  C40.477,34.905,34.906,40.477,28.034,40.477z"
          fill={knobFill}
        />
      </Svg>
    </Animated.View>
  ); 
}
const _renderSvgWheel = () => {

  return(
    <View style={styles.container}>
      <_renderKnob/>
    <Animated.View
      style={{
        alignItems: 'center',
        justifyContent: 'center',
        bottom: '-50%',
        transform: [
          {
            rotate: _angle.interpolate({
              inputRange: [-oneTurn, 0, oneTurn],
              outputRange: [`-${oneTurn}deg`, `0deg`, `${oneTurn}deg`]
            })
          }
        ]
      }}
    >
      <Svg
        width={wheelSize}
        height={wheelSize}
        viewBox={`0 0 ${width} ${width}`}
        style={{ transform: [{ rotate: `-${angleOffset}deg` }] }}
      >
        {/* G  다른 svg 요소를 그룹화 하는데 사용되는 컨테이너 */}
        <G y={width / 2} x={width / 2}>
          {makeWheel().map((arc, i) => {
            const [x, y] = arc.centroid;
            const number = arc.value.toString();

            return (
              <G key={`arc-${i}`}>
                <Path d={arc.path} fill={arc.color} />
                <G
                  rotation={(i * oneTurn) / numberOfSegments + angleOffset}
                  origin={`${x}, ${y}`}
                >
                  <Text
                    x={x}
                    y={y - 70}
                    fill="white"
                    textAnchor="middle"
                    fontSize={fontSize}
                  >
                    {Array.from({ length: number.length }).map((_, j) => {
                      return (
                        <TSpan
                          x={x}
                          dy={fontSize}
                          key={`arc-${i}-slice-${j}`}
                        >
                          {number.charAt(j)}
                        </TSpan>
                      );
                    })}
                  </Text>
                </G>
              </G>
            );
          })}
        </G>
      </Svg>
    </Animated.View>
      <Svg style={{position:'absolute'}}>
          <Circle cx="50%" cy="105%" r="110" fill="#A1C98A" />
      </Svg>
  </View>    
  )
}
useEffect(()=>{
    LoadHome()
    _angle.addListener(event => {
      if(enabled){
        setEnabled(false);
        setFinished(false);
      }
       angle = event.value;
    });
    return () => {
      _angle.removeAllListeners();
    }
    },[enabled,finished])

  return (
    <PanGestureHandler
    onHandlerStateChange={_onPan}
    enabled={enabled}
  >
    <View style={styles.container}>
      {_renderSvgWheel()}
      {finished && enabled && < _renderWinner/>}
    </View>
  </PanGestureHandler>
  )
}

코드를 넣어주실 때 마크다운 양식에 맞춰 넣어주시면 다른 분들이 보기 수월할 거예요~