#6

RN에서 사용할 수 있는 네이티브 모듈을 제작하기 위한 튜토리얼 웹사이트입니다. 단순한 네이티브 앱 정보 조회 API를 호출하는 간단한 예제부터, 네이티브 플랫폼 내장 파일 선택기를 불러 파일을 불러오는 예제, 슬라이더 UI를 네이티브 UI 컴포넌트로 제작하는 예제 등을 수록하고 있습니다. 튜토리얼을 통해 모듈 제작에 대한 이해도를 높인 뒤 react-native-builder-bob을 사용해 보일러플레이트를 자동 생성하여 자신만의 네이티브 모듈을 구현하면 더 완성도 있는 모듈을 만들 수 있으리라 생각됩니다.

과거 아이폰의 잠금화면에 사용되어 당시 아이폰의 상징과도 같았던 ‘밀어서 잠금 해제’ UI를 React Native 내장 Animated, Pan Responder API를 사용해 구현해 보는 튜토리얼입니다. 내장 API만을 사용하여 구현해 보는 것도 학습 차원에서 의미 있지만, 적절한 추상화를 통해 직관적인 API를 제공하는 react-native-gesture-handler를 사용해 이해하기 쉬운 코드로 구현해 보아도 좋을 것 같습니다.

react-navigation v7에는 ‘static API’가 추가됩니다. 기존의 동적 API 방식은 내비게이터를 먼저 생성한 후 화면들을 런타임에 등록하므로 타입 시스템의 정적 분석에 기댈 수 없었습니다. 새로운 정적 API를 사용하면 내비게이션 구성 데이터를 내비게이터 생성 시 전달합니다. 타입 추론을 통해 타입 안정성을 보장하고 수동 관리 지점을 제거하는 이득을 기대할 수 있습니다. 딥링킹 API도 개선되어 필요하면 모든 화면에 대한 경로를 자동으로 생성할 수 있습니다.

Yoga는 CSS와 흡사한 API로 각 모바일 네이티브 플랫폼 화면을 그려낼 수 있도록 추상화된 API를 제공하는 레이아웃 시스템 구현체입니다. React Native에서 빼놓을 수 없는 핵심 구성요소로, RN 0.74 부터는 Yoga 3.0을 사용할 예정입니다. (New Architecture 활성화 필요.) Yoga 3.0은 CSS의 position: ‘static’ 속성을 지원하여, 중첩된 뷰 계층구조에서 ‘absolute’ position 레이아웃 구성에 유용하게 사용될 것으로 보입니다.

RN 생태계에서 기술적인 측면 외에도 컨퍼런스 주최로 활발히 기여하고 있는 Infinite Red 팀이 운영 중인 웹사이트입니다. RN 프로젝트 셋업 및 운영에 도움이 될 만한 팁들이 모여있습니다. (일부 팁들은 Ignite를 사용해 보일러플레이트를 구성한 프로젝트를 기준으로 설명하고 있으므로 독자의 적절한 해석이 필요합니다.)

Apple VisionOS는 하나의 앱이 여러 개의 윈도우를 띄울 수 있습니다. @callstack/react-native-visionos을 사용해 프로젝트를 생성하고 네이티브 윈도우 구현을 추가한 뒤 전역 상태를 참조하며 두 윈도우에 걸쳐 동작하는 Counter 앱을 만들어봅니다.

RN 생태계에서 오랜 시간 동안 널리 사용된 react-native-fast-image의 유지보수 중단으로 인해 대체제의 필요성이 커져 만들어진 이미지 라이브러리입니다. 네이티브 구현체로는 Nuke(iOS) 및 Coil(Android)를 채택하였으며, 각각이 준수한 성능을 보이는 경량 라이브러리이면서 네트워크 이미지 로딩, 캐싱, 다운샘플링 등 기본적인 기능은 모두 지원하고 있다고 합니다. 또 다른 대체제로 expo-image도 있으니, 교체를 검토하시는 분들께서는 참고하시면 좋겠습니다. (bare RN 프로젝트에서도 사용 가능)

자식 컴포넌트를 핀치 줌 등으로 확대하는 등의 기능을 부여하는 라이브러리입니다. 주로 이미지 컴포넌트를 확대하는 용도로 사용되겠지만 자식 컴포넌트의 종류에는 제한이 없다고 합니다. 라이브러리의 쓰임을 잘 설명하고 있는 예제들이 인상적입니다.

Editor.js 계열의 에디터로 만든 JSON 데이터를 React Native 앱의 화면에 그려내기 위한 라이브러리입니다. Editor.js는 오픈소스 block-style 에디터로, 다양한 기술 스택의 오픈 소스 구현들이 존재합니다. CMS를 직접 구현할 때 활용해 보면 좋겠네요.

따끈따끈한 네이버 지도 라이브러리입니다. 거의 유일한 네이버 지도 구현체로써 유용하게 사용되었던 react-native-nmap의 유지보수가 중단된 뒤로 많은 fork 버전이 생겨날 수밖에 없었는데요. 이 라이브러리는 해당 라이브러리의 구현을 참고하여 fork 대신 새로 개발되었습니다. 기존 라이브러리의 버그를 수정하고 성능을 개선했으며, RN New/Old Architecture 모두 호환됩니다. 또한 최신 네이버 지도 SDK를 사용합니다. (3.18.0 버전. 24년 4월 15일 기준)

• Github : https://github.com/getgrit/gritql
• 문서 : https://docs.grit.io/language/overview

코드를 정적 분석하여 얻은 구문 구조를 Query Language를 사용해 검색하고 변경할 수 있는 도구입니다. (Grit이라는 소프트웨어 유지 관리 도구를 구성하는 하위 도구입니다) 쿼리 문법을 익히는 것이 러닝 커브로 느껴지지만 간단한 검색 문법은 쉽게 익힐 수 있습니다. 단순히 코드를 찾아 바꾸는 용도로도 사용할 수도 있지만 특정 구조의 코드를 검색하고 변경하는 대규모 작업을 해야 할 때 특히 유용합니다. VSCode extension도 제공하므로 CLI 보다 편리하게 사용할 수도 있습니다. JS/TS 및 Python, JSON을 지원합니다. (그 밖에 알파버전 지원 목록은 이곳을 확인하세요.)

이번 소식이 유용하다면? 다음 소식도 받아보세요! 😊