mogiyoon-react-native-simple-grid

React Native를 위한 간단하고 가벼운 그리드 컴포넌트

개요

React Native 환경에서 간단하게 그리드 UI를 구현할 수 있는 라이브러리

주요 기능

컬럼 수 지정, 데이터 매핑 렌더링, 높이 조절 옵션

사용 기술

TypeScript

구현 기능 및 개발 과정

Test Maker에 필요한 그리드 라이브러리가 npm에서 구버전이거나 기능·설명이 부족해, 직접 구현해 배포하기로 함.

문제

'Test Maker' 프로젝트에서 간단한 그리드 컴포넌트의 필요성을 느낌.

문제

라이브러리를 찾아봤으나, 현재 npm의 react native grid 컴포넌트는 6년 전 업데이트가 마지막으로 다른 라이브러리와 호환이 안됨. 굉장히 많은 그리드 라이브러리가 있었지만 원하는 기능이 없거나 설명이 부족하여 직접 구현하고 배포하고자 결심함.

renderItem으로 만든 컴포넌트 리스트를 열 수로 묶어 그리드로 렌더함.

해결

renderItem 함수가 컴포넌트를 하나씩 반환하며, 반환된 컴포넌트로 리스트를 먼저 생성함.

해결

열 수에 따라 컴포넌트를 행으로 묶은 배열을 생성함. isFull 옵션을 활성화하면 마지막 행의 빈칸을 빈 View로 채움. 채울 개수는 열 수에서 나머지를 뺀 값임.

타입 안정성을 위해 TypeScript로 개발하고, 다른 개발자가 활용할 수 있도록 NPM 공개 패키지로 배포함.

타입 안정성 확보를 위한 TypeScript 기반 개발, 다른 개발자 활용을 위한 NPM 공개 패키지 배포

Test Maker 내부의 styled-components 의존을 StyleSheet 전환으로 걷어내고, 제네릭 타입과 isFull 옵션을 더해 독립 패키지로 배포함.

문제

Test Maker 안에서는 styled-components로 그리드를 구현했으나, 패키지로 배포하려면 외부 스타일 라이브러리 의존을 제거해야 했음.

분석

NPM 배포 절차와 TypeScript 라이브러리 번들링 문서를 확인함.

해결

Create React Native Library로 패키지 구조를 잡고, 스타일을 StyleSheet로 전환해 외부 의존성을 제거함. 제네릭 타입과 isFull 옵션을 추가해 사용처를 넓힘.

결과

Test Maker 내부 구현에 있던 스타일 의존을 걷어내고 독립 패키지로 배포함.

NPM에 컴포넌트 라이브러리를 성공적으로 개발하고 배포

ScrollView 속성을 그대로 전달받아 사용처에서 기존 ScrollView와 같은 방식으로 사용할 수 있게 함

기획부터 공개까지 라이브러리 개발의 전 과정을 경험

라이브러리 사용자를 위한 명확한 문서화의 중요성을 깨달음

라이선스

MIT에 따라 라이선스가 부여되었습니다.