Flutter vs React Native 성능 비교 2026: 벤치마크와 면접 질문

// Impeller 이전: 셰이더 워밍업이 필요했음
void warmUpShaders() async {
  // 오프스크린에서 애니메이션을 수동으로 트리거하여 셰이더 컴파일
  await precacheImage(AssetImage('heavy_animation.png'), context);
}

// Impeller 이후: 셰이더가 AOT 컴파일되므로 이 코드는 불필요
// 코드베이스에서 셰이더 워밍업 로직 삭제 가능

// TurboModule: 처음 호출될 때만 로드
import { TurboModuleRegistry } from 'react-native';

interface CameraSpec extends TurboModule {
  takePicture(): Promise<string>;
}

// 모듈은 첫 접근 시 초기화됨, 앱 시작 시가 아님
export const CameraModule = TurboModuleRegistry.getEnforcing<CameraSpec>('Camera');

// 기존 네이티브 모듈: 시작 시 모든 모듈 초기화
// import { NativeModules } from 'react-native';
// const { Camera } = NativeModules; // 앱 시작을 느리게 만들었음

ListView.builder(
  itemCount: 1000,
  itemBuilder: (context, index) {
    return ListTile(
      leading: CachedNetworkImage(
        imageUrl: items[index].imageUrl,
        width: 56,
        height: 56,
      ),
      title: Text(items[index].title),
      subtitle: Text(items[index].description),
      trailing: IconButton(
        icon: Icon(Icons.favorite),
        onPressed: () => toggleFavorite(index),
      ),
    );
  },
)

// React Native FlashList 구현
import { FlashList } from '@shopify/flash-list';

<FlashList
  data={items}
  estimatedItemSize={72}
  renderItem={({ item }) => (
    <View style={styles.listItem}>
      <FastImage
        source={{ uri: item.imageUrl }}
        style={styles.image}
      />
      <View style={styles.content}>
        <Text style={styles.title}>{item.title}</Text>
        <Text style={styles.description}>{item.description}</Text>
      </View>
      <TouchableOpacity onPress={() => toggleFavorite(item.id)}>
        <Icon name="heart" size={24} />
      </TouchableOpacity>
    </View>
  )}
/>

// Flutter 복합 애니메이션
class ComplexAnimation extends StatefulWidget {
  @override
  State<ComplexAnimation> createState() => _ComplexAnimationState();
}

class _ComplexAnimationState extends State<ComplexAnimation>
    with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _rotation;
  late Animation<double> _scale;
  late Animation<Offset> _position;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
    
    _rotation = Tween<double>(begin: 0, end: 2 * pi).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOutCubic),
    );
    _scale = Tween<double>(begin: 0.5, end: 1.5).animate(
      CurvedAnimation(parent: _controller, curve: Curves.elasticOut),
    );
    _position = Tween<Offset>(
      begin: Offset.zero,
      end: const Offset(100, 50),
    ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut));
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return Transform.translate(
          offset: _position.value,
          child: Transform.scale(
            scale: _scale.value,
            child: Transform.rotate(
              angle: _rotation.value,
              child: child,
            ),
          ),
        );
      },
      child: Container(width: 100, height: 100, color: Colors.blue),
    );
  }
}

// React Native Reanimated 4 구현
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withRepeat,
  withSequence,
  withTiming,
  Easing,
} from 'react-native-reanimated';

function ComplexAnimation() {
  const rotation = useSharedValue(0);
  const scale = useSharedValue(0.5);
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  useEffect(() => {
    rotation.value = withRepeat(
      withTiming(2 * Math.PI, { duration: 2000, easing: Easing.inOut(Easing.cubic) }),
      -1,
      true
    );
    scale.value = withRepeat(
      withTiming(1.5, { duration: 2000, easing: Easing.elastic(1) }),
      -1,
      true
    );
    translateX.value = withRepeat(
      withTiming(100, { duration: 2000, easing: Easing.inOut(Easing.ease) }),
      -1,
      true
    );
    translateY.value = withRepeat(
      withTiming(50, { duration: 2000, easing: Easing.inOut(Easing.ease) }),
      -1,
      true
    );
  }, []);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [
      { translateX: translateX.value },
      { translateY: translateY.value },
      { scale: scale.value },
      { rotate: `${rotation.value}rad` },
    ],
  }));

  return <Animated.View style={[styles.box, animatedStyle]} />;
}

// Flutter 메모리 프로파일링
import 'dart:developer';

void profileMemory() {
  final timeline = Timeline.startSync('MemoryProfile');
  
  // DevTools에서 메모리 사용량 추적
  debugPrint('Dart heap: \${(ProcessInfo.currentRss / 1024 / 1024).toStringAsFixed(2)} MB');
  
  timeline.finish();
}

// React Native 메모리 프로파일링
import { NativeModules } from 'react-native';

function profileMemory() {
  if (__DEV__) {
    const { JSMemory } = NativeModules;
    JSMemory?.getUsage().then((usage: number) => {
      console.log(`JS Heap: \${(usage / 1024 / 1024).toFixed(2)} MB`);
    });
  }
}