U

React Native에서 UI 라이브러리를 사용하면 React Native 애플리케이션을 개발하는 데 필요한 시간과 노력을 절약할 수 있습니다. 하지만 특정 라이브러리 사용을 결정하기 전에 장단점과 프로젝트 요구 사항 및 디자인 요구 사항을 신중하게 고려해야 합니다.

UI 라이브러리 사용의 장점

더 빠른 개발: UI 라이브러리는 미리 빌드된 컴포넌트 세트를 제공하므로 개발 시간을 크게 단축할 수 있습니다.

일관성: UI 라이브러리는 앱의 디자인과 스타일에 일관성을 유지하여 더욱 전문적으로 보이도록 합니다.

사용 편의성: 대부분의 UI 라이브러리에는 명확한 문서와 사용하기 쉬운 API가 제공되므로 개발자가 프로젝트에 쉽게 통합할 수 있습니다.

크로스 플랫폼 지원: 많은 UI 라이브러리가 iOS와 Android 플랫폼을 모두 지원하므로 각 플랫폼에 맞는 별도의 UI 컴포넌트를 빌드하는 데 필요한 시간과 노력을 절약할 수 있습니다.

UI 라이브러리 사용의 단점

학습 곡선: 새로운 UI 라이브러리를 사용하려면 개발자가 새로운 API와 규칙을 배우는 데 시간을 투자해야 할 수 있습니다.

제한 사항: UI 라이브러리는 특정 디자인 요구 사항에 맞게 컴포넌트를 사용자 지정하는 데 필요한 유연성을 제공하지 못할 수 있습니다.

오버헤드: UI 라이브러리를 사용하면 추가 코드와 리소스를 로드해야 할 수 있으므로 앱 크기와 성능에 오버헤드가 추가될 수 있습니다.

종속성 관리: 타사 라이브러리와 마찬가지로 종속성 및 업데이트 관리가 어려울 수 있으며, 오래된 버전으로 인해 보안 문제나 버그가 발생할 수 있습니다.

인기있는 UI Libarary 목록

React Native Paper

공식 페이지: React Native Paper

React Native Elements

공식페이지: React Native Elements

NativeBase

NativeBase: Universal Components for React & React Native

Shoutem UI

Introduction - UI toolkit - Shoutem Developers

UI Kitten

UI Kitten - React Native UI Library based on Eva Design System

Ant Design Mobile RN

Ant Design Mobile - Mobile Design Specification

Material Kit React Native

Material Kit React Native: Premium React Native App Template @ Creative Tim

React Native Paper 예시

다음은 React Native Paper를 사용하여 간단한 버튼을 만드는 방법의 예시입니다.

위의 예시에서는 먼저 react-native-paper 라이브러리에서 Button 컴포넌트를 임포트합니다. 그런 다음 몇 가지 프로퍼티와 함께 Button을 렌더링하는 간단한 함수형 컴포넌트 MyComponent를 정의합니다. 아이콘 프로퍼티는 버튼에 표시할 아이콘(이 경우 카메라 아이콘)을 지정하고, 모드 프로퍼티는 버튼 스타일(이 경우 포함된 버튼)을 지정하며, onPress 프로퍼티는 버튼을 눌렀을 때 호출할 함수(이 경우 간단한 콘솔 로그)를 지정합니다. 마지막으로, React Native 앱의 다른 부분에서 사용할 수 있도록 MyComponent를 내보냅니다.

React Native Paper는 카드, 다이얼로그, 텍스트 입력 등 다양한 UI 요소를 만드는 데 사용할 수 있는 다른 많은 컴포넌트와 스타일을 제공합니다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0 

React Native의 스타일시트 컴포넌트는 빌트인 스타일링 시스템으로, 개발자가 CSS를 사용하지 않고 자바스크립트 객체 형식으로 컴포넌트의 스타일을 정의할 수 있도록 해줍니다. 이 접근 방식은 처음에는 성능을 개선하고 런타임에 스타일을 파싱하고 적용하는 오버헤드를 줄이기 위해 채택되었습니다. 스타일시트는 플랫폼별 스타일 지정 및 자동 공급업체 접두사 추가와 같은 추가 기능도 제공합니다.

Inline CSS

Module CSS

CSS-in-JS

CSS 방법론에 대한 발전 알아보기

ITCSS

ITCSS(Inverted Triangle CSS)는 해리 로버츠가 2013년에 제안한 CSS 아키텍처를 구성하는 방법론입니다. CSS 코드를 구조화하고 구성하는 확장 가능하고 유지 관리 가능한 접근 방식입니다.

ITCSS의 주요 아이디어는 CSS 코드를 특수성과 종속성에 따라 구성하는 것입니다. 저수준 설정부터 고수준 추상화까지 CSS 코드를 여러 계층으로 나눕니다. 레이어는 스타일이 올바른 순서로 적용되고 특이성이 항상 유지되도록 하는 방식으로 배열됩니다.

ITCSS의 레이어는 다음과 같습니다

설정: 이 레이어에는 글꼴 패밀리, 글꼴 크기, 색상 등과 같은 변수, 기본값 및 전역 구성이 포함됩니다.

도구: 이 레이어에는 재사용 가능한 코드를 만드는 데 사용되는 믹스인 및 함수가 포함됩니다.

일반: 이 계층에는 상자 크기 재설정, 정규화.css 및 CSS 재설정과 같은 전역 규칙이 포함됩니다.

요소: 이 계층에는 제목, 단락, 링크 및 목록과 같은 기본 HTML 요소에 대한 스타일이 포함됩니다.

객체: 이 계층에는 그리드, 미디어 개체 및 카드와 같은 재사용 가능한 디자인 패턴이 포함됩니다.

컴포넌트: 이 계층에는 탐색, 양식, 버튼과 같은 특정 UI 구성 요소가 포함됩니다.

유틸리티: 이 레이어에는 여백, 패딩 및 텍스트 정렬과 같은 유틸리티 클래스가 포함됩니다.

ITCSS는 관심사를 명확하게 분리하여 CSS 코드를 쉽게 유지 관리, 확장 및 수정할 수 있도록 합니다. 또한 스타일을 효율적으로 정리하고 재사용할 수 있으므로 CSS 부피를 줄이는 데 도움이 됩니다.

ITCSS는 BEM, SMACSS 또는 OOCSS와 같은 다른 CSS 방법론만큼 대중적이지는 않지만 대규모 애플리케이션 및 조직에서 널리 사용됩니다. CSS 아키텍처에 대한 체계적이고 통합된 접근 방식을 제공하므로 여러 팀과 개발자가 참여하는 프로젝트에 특히 유용합니다.


본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0 

React Native에서 제공되는 컴포넌트 중에는 스크롤 콘텐츠를 표시하기 위한 두 가지 기본 컴포넌트가 있습니다. ScrollView와 FlatList입니다. 이 글에서는 두 컴포넌트에 대한 간략한 소개와 비교 내용을 정리해봅니다.

ScrollView

ScrollView는 화면 크기를 초과하는 콘텐츠를 스크롤할 수 있는 간단하면서도 강력한 컴포넌트입니다. 긴 항목 목록이나 화면의 크기에 맞지 않는 다양한 유형의 콘텐츠를 표시하는 것이 필요할 때 사용할 수 있습니다.

장점:

• 임의의 보기 및 구성 요소 지원
• 사용 및 사용자 지정이 간편함
• 중소규모 목록에 적합

단점:

• 모든 항목을 한 번에 렌더링하므로 큰 목록의 경우 속도가 느릴 수 있음
• 대량의 데이터를 렌더링할 때 성능 문제가 발생할 수 있음
• 지연 로딩 및 항목 재사용과 같은 최적화를 위한 기본 지원이 제한됨

https://reactnative.dev/docs/scrollview

FlatList

플랫리스트는 목록의 내용이 더 길수록 더 나은 성능과 최적화를 제공하는 고급 스크롤 컴포넌트입니다. 현재 화면에 표시되는 항목만 렌더링하여 긴 데이터 목록을 효율적으로 렌더링하는 것이 필요할 때 사용할 수 있습니다.

장점:

• 보이는 항목만 효율적으로 렌더링하여 성능 향상
• 항목 재사용 및 지연 로딩 기본 지원
• 가시성 및 스크롤 자동 관리

단점:

• 스크롤뷰보다 사용 및 사용자 지정이 더 복잡할 수 있음
• 임의의 뷰 및 컴포넌트에 대한 제한적인 지원

https://reactnative.dev/docs/flatlist

어떤 것을 사용하면 좋을지 고민해보고 적절한 선택을 하는 것이 중요합니다. 목록의 내용이 그리 길지 않고, 일정량으로 정해져 있다면 ScrollView가 적합하며, 큰 목록과 최적화된 성능을 원한다면 FlatList가 더 좋습니다. 긴 데이터 목록을 표시해야 하고 성능을 최적화하려면 FlatList를 사용하세요. 뷰의 구성 요소나 유형에 더 많은 유연성이 필요한 경우 스크롤뷰가 더 나은 옵션일 수 있습니다.

지연 로딩이란?

지연 로딩은 소프트웨어 개발에서 중요하지 않은 리소스의 로딩을 필요할 때까지 연기하는 데 사용되는 기술입니다. 이는 애플리케이션의 성능을 저하시킬 수 있는 대량의 데이터나 리소스를 처리할 때 특히 유용할 수 있습니다.

전반적으로 지연 로딩은 특정 시간에 로드해야 하는 리소스의 양을 줄이고 앱의 반응성과 속도를 높여 사용자 경험을 향상시킴으로써 React Native 앱의 성능을 최적화하는 데 도움이 될 수 있습니다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0

SafeAreaView는 앱의 콘텐츠가 기기의 노치, 물리적 버튼 또는 사용자 경험을 방해할 수 있는 기타 요소와 겹치지 않도록 도와주는 React Native의 기본 제공 컴포넌트입니다.

개발자가 SafeAreaView를 사용하면 컴포넌트 내의 콘텐츠가 사용자에게 표시되도록 보장되는 화면의 지정된 영역인 안전 영역 내에 유지되도록 합니다.

최신 스마트폰은 화면 크기와 모양이 다양하고 기기마다 노치, 곡선 모서리 및 기타 디자인 특징이 있어 콘텐츠가 화면에 표시되는 방식에 영향을 줄 수 있기 때문에 SafeAreaView가 필요합니다. 개발자는 SafeAreaView를 사용하여 앱이 실행되는 기기에 관계없이 앱의 콘텐츠가 항상 명확하고 읽기 쉬우며 사용자 친화적인 방식으로 표시되도록 할 수 있습니다.

안드로이드 디바이스의 용어

안드로이드 디바이스의 경우 디스플레이 컷아웃이라는 용어가 사용되고 있습니다.

Support display cutouts | Android Developers

애플 디바이스의 용어

애플 디바이스의 경우 Safe area layout, React Native의 SafeAreaView와 비슷한 용어가 사용되고 있습니다.

Positioning content relative to the safe area | Apple Developer Documentation

관련 라이브러리

th3rdwave/react-native-safe-area-context: A flexible way to handle safe area insets in JS. Also works on Android and Web!

컨텍스트 API를 활용하여 추가적인 기기 정보를 활용 할 수 있도록 되어 있으나, 화면 회전과 관련해서 성능 최적화 문제가 있을 수 있기 때문에 가급적이면 기본 제공 컴포넌트를 사용하는 것을 안내하고 있습니다. 사용 방법이 크게 어렵지 않고, 필요한 경우 빠르게 추가하여 사용이 가능해 보입니다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0 

React Native는 무엇인가요?

React Native는 Facebook에서 개발한 오픈 소스 프레임워크로 웹 애플리케이션 구축에 널리 사용되는 JavaScript 라이브러리인 React와 동일한 코드베이스를 사용하여 모바일 애플리케이션을 구축할 수 있도록 도와줍니다.

React Native를 통해 개발자는 재사용 가능한 코드를 사용하여 iOS 및 Android 플랫폼용 기본 앱을 빌드할 수 있습니다. 즉, 코드를 한 번 작성하고 여러 플랫폼에 배포할 수 있으므로 시간과 리소스를 절약할 수 있게 됩니다. (Learn once, write anywhere.)

React Native · Learn once, write anywhere

React Native vs Flutter

React Native와 Flutter는 모두 모바일 애플리케이션을 구축하는 데 널리 사용되는 크로스 플랫폼 프레임워크이지만 몇 가지 주요 차이점이 있습니다.

1. 프로그래밍 언어: React Native는 JavaScript를 사용하는 반면 Flutter는 Dart를 사용합니다.
2. 사용자 인터페이스: React Native는 네이티브 컴포넌트와 API를 사용하여 사용자 인터페이스를 렌더링하는 반면, Flutter는 사용자 지정 사용자 인터페이스를 빠르게 빌드하는 데 사용할 수 있는 포괄적인 사전 빌드 위젯 세트를 제공합니다.
3. 성능: Flutter는 네이티브 머신 코드로 코드를 컴파일하기 때문에 고성능을 제공할 수 있는 반면, React Native는 추가 추상화 계층을 사용하기 때문에 성능이 약간 떨어질 수 있습니다.
4. 커뮤니티: 일반적으로 React Native는 대규모의 활발한 개발자 커뮤니티를 보유하고 있다고 얘기하지만, Flutter는 커뮤니티가 계속 성장하고 있으며 검색량 기반 관심도는 이미 몇년 전부터 Flutter가 우세한 결과를 보여주고 있습니다.

어느 것이 더 좋은지는 React Native와 Flutter 중 하나를 선택하는 것은 개발자의 선호도와 프로젝트의 특정 요구 사항에 따라 달라집니다.

Expo vs React Native CLI

React Native 프로젝트를 시작하는 방법은 크게 2가지로 볼 수 있습니다.

npx create-expo-app my-app && cd my-app

npx react-native init MyTestApp

학습 초기에는 Expo를 사용하여 React 문법을 익히고, React Native의 API를 활용해보는 것이 더 좋을 수 있습니다. 특히 Expo Go를 이용하여 앱을 빌드하고, 실시간으로 시뮬레이터나 실제 기기에서 구동되는 것을 확인 해 볼 수 있어서 학습 내용을 확인하는데 크게 도움이 됩니다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0