React Native는 Facebook에서 제공하는 오픈 소스 모바일 애플리케이션 개발 프레임워크입니다. React Native는 React와 JavaScript를 사용하여 iOS와 Android 모바일 애플리케이션을 개발할 수 있게 해줍니다.
React Native는 React의 컴포넌트 기반 아키텍처를 기반으로 하고 있으며, JSX 문법을 사용하여 UI를 빌드합니다. 이를 통해 웹 개발에서와 같은 방식으로 UI를 구성할 수 있으며, 비교적 쉽게 UI를 렌더링할 수 있습니다.
React Native를 사용하면 개발자는 iOS 및 Android 애플리케이션을 모두 작성할 필요 없이 동일한 코드를 재사용할 수 있습니다. React Native를 사용하여 개발 시에는 네이티브 iOS 및 Android 구성 요소와 웹을위한 React 컴포넌트 모두를 사용할 수 있으며 이를 통해 안정적이고 빠르면서도 일관된 사용자 경험을 제공할 수 있습니다. React Native를 사용할 때 코드는 전적으로 JavaScript로 작성됩니다.
이러한 JavaScript 코드는 네이티브 iOS와 Android 라이브러리와 상호작용하여 실행됩니다.
React Native는 네이티브 뷰 구성 요소를 사용하여 iOS 및 Android의 레이아웃을 구성합니다.
또한, 컴파일러가 최적화하여 실행 가능한 네이티브 코드로 컴파일 됩니다. React Native는 완전히 오픈 소스로 제공되며, 다양한 커뮤니티 및 개발자들이 지속적으로 기능을 개선하고 새로운 컴포넌트를 추가하고 있습니다. 이러한 개발자들의 지속적인 노력은 React Native를 더욱 보다 안정적이고 강력한 프레임워크로 발전시키고 있습니다.
React Native에서는 다양한 컴포넌트를 제공합니다. 이들 컴포넌트는 iOS 및 Android의 네이티브 구성 요소로 컴파일되어 일관된 사용자 인터페이스(UI)를 제공합니다. 다음은 React Native에서 사용되는 일부 주요 컴포넌트입니다.
1. View: UI의 기본 요소이며, 다른 모든 구성 요소를 포함할 수 있습니다.
2. Text: 텍스트를 표시하는 데 사용되며, 글꼴 크기, 스타일, 레이아웃 등을 지정할 수 있습니다.
3. Image: 이미지를 표시하거나 로드하는 데 사용됩니다. 로컬 또는 원격 URL에서 이미지를 가져올 수 있습니다.
4. TextInput: 사용자 입력을 받기 위해 사용되는 텍스트 입력 필드입니다.
5. ScrollView: 스크롤 가능한 영역을 만드는 데 사용되며, 스크롤 이벤트를 처리할 수 있습니다.
6. Button: 사용자가 클릭하여 이벤트를 발생시키는 버튼을 생성합니다.
7. Picker: 드롭다운 목록을 생성하며, iOS와 Android에서 각각 다른 디자인을 가집니다.
8. FlatList: 대량의 데이터를 렌더링하는 데 사용되며, 화면에 표시되는 항목이 사용자가 스크롤 할 때마다 자동으로 생성됩니다.
9. TouchableOpacity: 사용자 인터랙션을 처리하기 위해 사용되며, 클릭이나 탭을 감지합니다.
10. WebView: 웹 페이지를 렌더링하기 위해 사용됩니다.
React Native에서 제공되는 컴포넌트 외에도 커스텀 컴포넌트를 만들어 사용할 수 있으며, 속성(prop)을 통해 다른 컴포넌트에 전달하고 상태(state)를 유지할 수 있습니다.
일부 인기 있는 외부 라이브러리들입니다:
react-navigation: React Native 앱 내에서 화면 전환을 지원하는 강력한 네비게이션 라이브러리입니다.
react-native-vector-icons: 벡터 아이콘을 쉽게 사용할 수 있는 컴포넌트를 제공합니다.
react-native-swiper: 이미지 슬라이드 쇼와 같은 좋은 스크롤 효과를 만들 수 있는 Swiper 컴포넌트를 제공합니다.
react-native-paper: Material Design 가이드라인에 따른 UI 구성 요소 및 테마 지원을 포함하고 있는 모듈입니다.
native-base: 크로스 플랫폼 모바일 애플리케이션 개발을 위한 고품질의 사용자 인터페이스(UI) 요소 세트가 포함된 프레임웍입니다.
더 많은 외부 리액트 네이티브 컴포넛나 패턴, 그외 도구 등에 대해서는 'awesome-react-native' 저장소(https://github.com/jondot/awesome-react-native) 에서 확인해보시길 추천 드립니다. 또한, 필요에 따라 직접 커스터마 이징 할수있습니다! 원하는 기능과 디자인에 맞춰 자신만의 React Native 앱용으로 개발 가능합니다 .
