RN True Tabs: 네이티브 탭의 새로운 장

프론트엔드 개발자의 고민: React Native와 '진정한' 네이티브 경험

우리는 React Native로 모바일 앱을 만들면서 개발 속도와 크로스 플랫폼이라는 큰 장점을 누리고 있습니다. 하지만 때로는 ‘진정한 네이티브’ 경험에 대한 갈증을 느낄 때가 있죠. 특히 모바일 앱의 핵심 UI 요소 중 하나인 탭 바(Tab Bar)는 이런 고민을 깊게 만듭니다.

기존 React Native 환경에서 탭 내비게이션을 구현할 때는 주로 JavaScript 스레드 위에서 렌더링되거나, 네이티브 컴포넌트를 활용하더라도 JS 스레드의 영향을 받는 경우가 많았습니다. 이로 인해 미묘한 성능 저하, 애니메이션 버벅임, 그리고 무엇보다 ‘네이티브 앱다운 부드러움’이 부족하다는 인상을 주기도 했습니다.

lodev09/react-native-true-tabs 등장!

최근 GitHub Trending에서 흥미로운 프로젝트를 발견했습니다: lodev09/react-native-true-tabs. 이 라이브러리는 React Native 앱에서 완전히 분리된(Decoupled) 네이티브 탭 바를 구현하는 것을 목표로 합니다. Star 수가 아직 많지 않지만, 그 컨셉만으로도 우리의 주목을 끌기에 충분하다고 생각했습니다.

어떤 점이 특별할까요?

• JS 스레드 독립성: 기존 탭 내비게이션 라이브러리들은 대부분 JS 스레드에 의존합니다. 하지만 react-native-true-tabs는 탭 바를 네이티브 스레드에서 직접 관리하여 JS 스레드의 부하와는 독립적으로 작동합니다. 이는 곧 앱의 전반적인 반응성과 성능 향상으로 이어집니다.
• 진정한 네이티브 애니메이션: 탭 전환 시 부드러운 애니메이션과 제스처를 네이티브 수준으로 제공합니다. 사용자는 웹뷰 위에 덮인 느낌이 아닌, OS 기본 탭 바를 사용하는 듯한 경험을 하게 됩니다.
• 높은 유연성: 네이티브 컴포넌트를 기반으로 하면서도 React Native의 유연성을 잃지 않아, 탭 바의 디자인과 동작을 폭넓게 커스터마이징할 수 있을 것으로 기대됩니다.

간단한 설치 및 사용 (개념적 예시)

아직 초기 단계의 라이브러리이지만, 설치 과정은 React Native의 일반적인 네이티브 모듈과 유사할 것으로 보입니다. 사용법 또한 기존 내비게이션 패턴과 크게 다르지 않을 것입니다.

설치

npm install react-native-true-tabs
cd ios && pod install

개념적 사용 예시

import { createTrueBottomTabs } from 'react-native-true-tabs';
import HomeScreen from './HomeScreen';
import SettingsScreen from './SettingsScreen';

const Tab = createTrueBottomTabs();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} options={{ title: '홈' }} />
      <Tab.Screen name="Settings" component={SettingsScreen} options={{ title: '설정' }} />
    </Tab.Navigator>
  );
}

export default MyTabs;

마무리하며

react-native-true-tabs는 React Native 앱이 진정한 네이티브 경험에 한 걸음 더 다가설 수 있도록 돕는 흥미로운 시도라고 생각합니다. 물론 아직 초기 단계이고 Star 수도 적지만, 이런 시도들이 모여 React Native 생태계를 더욱 풍성하게 만들 것이라고 믿습니다.

우리 프론트엔드 개발자들이 성능 최적화와 사용자 경험 사이에서 고민할 때, 이처럼 새로운 대안들이 계속해서 등장하는 것은 매우 고무적인 일입니다. 여러분의 프로젝트에도 이 라이브러리가 새로운 가능성을 제시할 수 있기를 바라며, 함께 React Native의 미래를 지켜봤으면 좋겠습니다!