React Native 위젯 라이브러리 만들기 - 0. 위젯에 대해 알아보자

jiveloper·2025년 1월 17일

React Native 위젯 라이브러리 만들기

목록 보기

1/1

안녕하세요! 이번에는 React Native에서 위젯 라이브러리를 만드는 방법에 대해 포스팅을 하려고 합니다. 🤩
위젯 라이브러리를 단순히 만들면 기억에 남지 않을 것 같아 오래 기억하기 위해 라이브러리를 만들며 만든 내용을 블로그에 작성하려고 합니다. 이 포스팅은 긴 포스팅이 될 것 같고, 저 스스로에게도 장기 프로젝트가 될 것 같습니다.

배경

제가 곧 React Native 개발자 5년차에 접어드는데, 네이티브 언어를 아직 제대로 하지 못함에 스스로 아쉬움을 느끼고 있었고, 맨날 만들어진 라이브러리를 연동만 해봤지 직접 구현해본적이 없어서 직접 만들어 네이티브와 React Native간의 통신을 더 깊게 이해하고 싶었습니다.

저는 일단 React Native 라이브러리 중에서 활성화가 덜 됐거나 아직 존재하지 않은 라이브러리를 만들어 보고싶었고, 이왕이면 제가 실제로 앱에서 사용하는 기능을 구현해 보고 싶었습니다.

저는 평소에 앱 위젯 기능을 잘 사용합니다.

그래서 React Native에도 위젯 라이브러리가 있는지 찾아보았습니다. 찾아봤더니 Android용 위젯 라이브러리, iOS용 위젯 라이브러리가 각각 존재하였습니다.

Android용 위젯 라이브러리는 공식문서가 아주 친절하게 잘 되어있으나 다운로드 수가 적었고, iOS용 위젯 라이브러리는 Android용 위젯 라이브러리보다는 다운로드 수가 많았지만 4년 전에 올라온 커밋이 마지막 커밋이었습니다...⭐️

또한, 위 라이브러리가 한 라이브러리에서 관리 된다면 사용하기 더 편할 것 같기에 저는 이 둘을 한 라이브러리에서 쓸 수 있도록 구현해보려 합니다! 🤩

라이브러리를 처음 만들어보는 입장에서 마침 참고할 라이브러리가 있다니...!
이거슨 신이 주신 기회...?

위젯이란?

먼저, 라이브러리 개발을 들어감에 앞서 위젯에 대해 간단히 알아보겠습니다.

😎: 위젯이란, 앱을 열지 않아도 콘텐츠를 표시하고 특정 기능을 사용할 수 있도록 하는 기능입니다. 사람들은 위젯을 통해 기기를 구성하고 사용자화하여 필요한 정보 및 기능에 빠르게 접근할 수 있습니다.

위젯 종류

이제 앱에서 쓰이는 위젯의 종류에 대해 알아보겠습니다. 위젯의 유형은 일반적으로 다음 카테고리 중 하나에 속합니다.

정보 위젯

정보 위젯은 일반적으로 중요한 정보 요소를 표시하고 시간에 따른 정보의 변화를 추적합니다. 정보 위젯의 예로는 날씨 위젯, 시계 위젯, 스포츠 경기 점수 추적 위젯이 있습니다. 일반적으로 정보 위젯을 탭하면 연결된 앱이 실행되고 위젯 정보의 세부정보 뷰가 열립니다.

컬렉션 위젯

컬렉션 위젯은 갤러리 앱의 사진 모음, 뉴스 앱의 기사 모음, 커뮤니케이션 앱의 이메일 또는 메시지 모음과 같이 동일한 유형의 여러 요소를 표시하는 데 특화되어 있습니다. 컬렉션 위젯은 세로로 스크롤할 수 있습니다.

관리 위젯

관리 위젯의 기본 목적은 사용자가 앱을 열지 않고도 홈 화면에서 트리거할 수 있도록 자주 사용되는 함수를 표시하는 것입니다. 관리 위젯과 상호작용하면 앱에서 연결된 세부정보 뷰가 열릴 수 있습니다. 이는 검색 위젯의 경우와 같이 관리 위젯의 함수가 데이터를 출력하는지에 따라 다릅니다.

위의 위젯은 유튜브 앱과 지메일 앱의 위젯입니다.

유튜브 앱의 검색, 홈, 숏츠, 구독 화면으로 이동할 수 있는 버튼이 있고, 이동을 원하는 버튼을 누르면 앱이 열리면서 해당 화면에 도달합니다.

지메일 앱의 검색, 편지쓰기, 읽지 않은 메일 리스트 화면으로 이동할 수 있는 버튼이 있고, 이동을 원하는 버튼을 누르면 앱이 열리면서 해당 화면에 도달합니다.

하이브리드 위젯 (정보위젯 + 관리위젯)

일부 위젯은 앞의 섹션에 나온 유형(정보, 컬렉션, 관리) 중 하나를 나타내지만, 대부분의 위젯은 다양한 유형의 요소를 결합한 하이브리드 위젯입니다. 예를 들어 음악 플레이어 위젯은 기본적으로 관리 위젯이지만 정보 위젯과 마찬가지로 현재 재생 중인 트랙을 사용자에게 표시합니다.