NativeBase 공식문서 활용하기

NativeBase란? NativeBase는 React Native를 위한 오픈소스 UI 컴포넌트 라이브러리 입니다. 이번 프로젝트때 NativeBase를 사용하게 되었는데 공식문서에 어떤 UI라이브러리가 있는지 미리 알아본 후 개발시 빠르게 찾을 수 있도록 정리해보았습니다. 

 

Utility Props

UI 컴포넌트에 쉽게 스타일을 적용하거나 속성을 설정할 수 있게 해주는 Props입니다.

 

Color mode (Dark Mode)

사용자가 앱을 사용하는 동안 다크 모드(Dark Mode) 또는 라이트 모드(Light Mode)와 같은 테마 모드를 선택할 수 있도록 합니다.

 

NativeBase Factory

Factory는 컴포넌트를 만드는 함수입니다.

이 함수는 컴포넌트를 생성하고 초기화하는데 사용됩니다.

Factory 함수를 사용하면 컴포넌트를 렌더링하기 전에 필요한 작업을 수행하거나 컴포넌트 인스턴스를 캐시할 수 있습니다. 이 함수는 다른 모듈에서 가져와서 사용됩니다. Factory 함수는 React Native에서 컴포넌트를 만들 때 중요한 역할을 합니다.

 

SafeAreaView Props

화면 크기와 상관없이 항상 안전한 영역을 유지하기 위한 컴포넌트입니다.

SafeAreaView 컴포넌트를 사용하면 화면의 상단 바나 하단 탭 바 등에 가려지지 않는 영역을 유지할 수 있습니다.

즉, 안전거리 확보

 

Strict Mode

개발 모드에서 애플리케이션의 잠재적인 문제를 감지하고 경고 메시지를 출력하여 개발자가 이를 해결할 수 있도록 돕는 기능입니다.

StrictMode가 활성화되면, 다음과 같은 기능이 활성화됩니다.

• componentDidCatch 메서드에서 오류를 잡지 않은 경우 경고 메시지 출력
• 안전하지 않은 생명주기 메서드 사용시 경고 메시지 출력
• 안전하지 않은 setState 사용시 경고 메시지 출력
• 레거시 문자열 ref 사용시 경고 메시지 출력

StrictMode는 애플리케이션에서 발생할 수 있는 잠재적인 문제를 사전에 방지하여, 미리 대처하도록 돕는 역할을 합니다.

 

Accessibility

Accessibility는 NativeBase에서 사용자가 앱을 보다 쉽게 사용할 수 있도록 돕는 기능입니다. Accessibility를 사용하면 시각적인 제한이 있는 사용자들도 앱을 사용할 수 있게 됩니다.

NativeBase에서는 다양한 Accessibility 기능을 제공합니다. 예를 들어, Button 컴포넌트에서 accessibilityLabel 속성을 사용하여 버튼의 목적을 설명할 수 있습니다. 이렇게 하면 스크린 리더러(음성 출력장치)가 버튼을 인식하고, 버튼의 기능을 사용자에게 알려줄 수 있습니다.

 

Button

onPress 이벤트 핸들러를 포함하고 있으며, 이는 버튼이 눌렸을 때 호출되는 함수를 참조합니다. onPress 핸들러는 사용자가 버튼을 눌렀을 때 실행될 코드를 포함하는 함수를 참조해야 합니다.

<VStack space={4} alignItems="center">

예를 들어, 여러 개의 버튼을 가로로 배치할 때 각 버튼 사이에 일정한 간격을 두기 위해 Space를 사용할 수 있습니다.

 

Pressable

사용자가 버튼을 누르거나 다른 UI 요소를 클릭할 때 실행할 함수를 정의할 수 있습니다.

Pressable 구성 요소는 또한 다른 이벤트 핸들러와 함께 사용할 수 있습니다. 예를 들어, onLongPress 이벤트 핸들러를 사용하여 Pressable 요소가 길게 눌렸을 때 실행할 함수를 참조할 수 있습니다.

Pressable 구성 요소는 또한 매우 유연하며 다양한 속성을 제공합니다. 예를 들어, Pressable 요소에 적용할 수 있는 스타일, 투명도, 불투명도, 터치 피드백 등을 사용자 정의할 수 있습니다.

 

CheckBox

CheckBox 구성 요소는 또한 onPress 이벤트 핸들러를 포함하며, 이 핸들러는 CheckBox가 선택될 때마다 실행할 함수를 참조합니다. onPress 핸들러를 사용하여 CheckBox가 선택되었을 때 실행할 코드를 정의할 수 있습니다.

CheckBox 구성 요소는 또한 다양한 스타일 및 속성을 제공합니다. 예를 들어, CheckBox 요소의 색상, 크기, 모양 등을 사용자 정의할 수 있습니다. value 속성은 체크박스에 대한 값을 설정합니다.

<Checkbox isInvalid value="invalid">는 사용자가 해당 체크박스를 선택하지 않았거나 선택한 값이 유효하지 않은 경우 해당 체크박스에 대한 오류 메시지를 나타내는 데 사용됩니다.

 

FormControl

FormControl은 폼 관련 구성 요소들을 묶어서 관리하고, 폼 데이터의 유효성 검사(validation)를 쉽게 할 수 있도록 도와주는 컴포넌트입니다.

 

IconButton

컴포넌트는 아이콘과 버튼을 합친 형태로, 아이콘을 클릭하면 특정 동작이 수행되도록 하는 버튼입니다. React Native에서는 react-native-vector-icons 라이브러리를 많이 사용합니다. 이 라이브러리는 여러 종류의 아이콘 세트를 제공하며, 각 세트는 수백 개 이상의 벡터 아이콘을 포함하고 있습니다. size와 color 속성을 사용하여 아이콘의 크기와 색상을 설정할 수 있습니다.

 

Input

Input 컴포넌트는 다음과 같은 속성을 가집니다.

• value: 입력 필드의 현재 값을 지정합니다.
• onChangeText: 입력 필드의 값이 변경될 때 호출될 콜백 함수를 지정합니다.
• placeholder: 입력 필드에 입력될 값이 없을 때 나타날 placeholder를 지정합니다.
• isDisabled: 입력 필드를 비활성화시킬지 여부를 지정합니다.
• isReadOnly: 입력 필드를 읽기 전용으로 만들지 여부를 지정합니다.
• isInvalid: 입력 필드에 유효하지 않은 값이 입력됐는지 여부를 지정합니다.
• onBlur: 입력 필드에서 포커스가 떠날 때 호출될 콜백 함수를 지정합니다.
• onFocus: 입력 필드에 포커스가 들어올 때 호출될 콜백 함수를 지정합니다.
• keyboardType: 입력 필드에서 사용할 키보드 타입을 지정합니다.
• secureTextEntry: 입력 필드에서 입력한 값을 숨길지 여부를 지정합니다.
• autoCapitalize: 입력 필드에서 입력한 문자열의 대소문자를 자동으로 변환할지 여부를 지정합니다.

onBlur 이벤트를 이용하면, 입력 필드에서 포커스가 떠날 때 추가적인 작업을 수행할 수 있습니다. 예를 들어, 입력 필드에 유효하지 않은 값을 입력하면 해당 입력 필드에 에러 메시지를 출력하는 등의 작업을 수행할 수 있습니다. 또한 입력 필드를 완료하고 값을 저장하기 전에 다른 작업을 수행할 수도 있습니다. 예를 들어, 입력 필드에서 입력한 값을 검증하는 등의 작업을 수행할 수 있습니다.

따라서, onBlur 이벤트는 사용자가 입력 필드에서 포커스를 떠날 때 어떤 작업을 수행할지 결정하는 데 유용합니다.

 

Slider

onChangeValue - 70은 사용자가 슬라이더를 조작하는 동안 슬라이더의 값을 70으로 변경했을 때 발생하는 이벤트를 의미하며, onChangeEndValue - 70은 사용자가 슬라이더를 조작한 후 최종적으로 선택한 값이 70일 때 발생하는 이벤트를 의미합니다.

 

TextArea

Textarea 컴포넌트는 여러 줄의 텍스트를 입력할 수 있는 입력 필드를 제공하는 컴포넌트입니다. 일반적으로 긴 글이나 코멘트를 작성할 때, 사용자의 의견을 입력받을 때 등 다양한 용도로 사용됩니다.

 

Avatar

<Avatar.Badge bg="green.500" /> 뱃지를 다는것

 

PresenceTransition

리스트 아이템 등장 및 사라짐 애니메이션: **FlatList**나 **ScrollView**와 같은 리스트 컴포넌트에서 아이템이 추가되거나 제거될 때 애니메이션 효과를 적용할 수 있습니다. PresenceTransition 구성 요소를 사용하면 아이템이 추가되거나 제거될 때 자연스러운 애니메이션을 쉽게 구현할 수 있습니다.

 

Slide

<Slide in={isOpenTop} placement="top">

위의 코드에서 **Slide**구성 요소를 사용하여 각 탭 화면이 등장할 때 **placement**옵션을 사용하여 화면이 나타나는 방향을 설정하고, in 옵션을 사용하여 화면이 등장하는 애니메이션 효과를 적용했습니다.

 

Stagger

여러 개의 애니메이션 요소를 각각 다른 지연 시간을 두고 순차적으로 실행하도록 설정할 때 유용합니다. 예를 들어, 리스트 아이템이 삭제될 때, 순서대로 하나씩 삭제되는 애니메이션 효과를 적용할 수 있습니다

ex:리스트 아이템이 순서대로 삭제되는 애니메이션 효과

 

FAB

가장 중요한 작업 또는 기능을 사용자가 쉽게 접근할 수 있도록 하는 데 사용됩니다. 예를 들어, 메인 화면에서 새로운 항목을 만들거나 앱에서 가장 중요한 기능 중 하나를 바로 실행할 수 있는 버튼으로 사용될 수 있습니다.

 

Hidden

특정 상황에서 화면의 구성 요소를 숨기거나 보이게 만드는 데 사용됩니다. 예를 들어, 모바일 기기에서는 헤더 영역의 로고를 숨기고 메뉴 아이콘만 표시하고, 데스크톱에서는 로고와 메뉴 아이콘을 모두 표시하는 경우에 사용될 수 있습니다.

1. 반응형 웹 디자인
   • 브라우저 창의 크기에 따라 컨텐츠의 배치와 노출 여부를 결정할 수 있습니다.
2. 테마 지원
   • 다크 모드, 라이트 모드와 같은 다양한 테마에 따라 컴포넌트의 노출 여부를 결정할 수 있습니다.
3. 접근성
   • 시각적으로 보이지 않는 콘텐츠를 스크린 리더 등 보조 기기를 사용하는 사용자들도 이용할 수 있도록 제공할 수 있습니다.
4. 프로그래밍적으로 노출 여부를 조절할 때
   • 일정 상황에서 컨텐츠의 노출 여부를 동적으로 조절해야 하는 경우에 사용할 수 있습니다.

import { Hidden, Button } from 'native-base';

const MyButton = ({ isDarkMode }) => {
return (
<Hidden mdDown={!isDarkMode}>
<Button
colorScheme={isDarkMode ? 'gray' : 'blue'}
size="sm"
>
{isDarkMode ? 'Dark' : 'Light'}
</Button>
</Hidden>
);
};

 

Scrollview

무한 스크롤시에 사용하기 좋은데 **ScrollView**는 스크롤 이벤트를 인식하여 자연스러운 스크롤 효과를 구현할 수 있습니다.

 

KeyboardAvoidingView

이 컴포넌트를 사용하여 입력 필드가 있는 폼이나 채팅창 등에서 사용자가 입력을 하기 위해 키보드를 띄울 때, 입력 필드가 키보드에 가려지는 것을 방지할 수 있습니다.

 

StatusBar

모바일 앱의 상태 바를 컨트롤하는 데 사용됩니다. 상태 바는 모바일 기기의 시간, 배터리 수명, 네트워크 연결 등과 같은 정보를 표시하는 데 사용됩니다. StatusBar 컴포넌트를 사용하면 앱에서 상태 바의 색상, 텍스트 색상 등을 변경할 수 있습니다.

 

FlatList

대량의 데이터를 렌더링하는 데 사용되는 **React Native**의 내장 컴포넌트 중 하나입니다. FlatList 를 사용하면 대규모 데이터 집합을 효율적으로 처리할 수 있습니다.

 

SectionList

데이터를 섹션별로 묶어서 표시할 때 사용됩니다. 각 섹션은 헤더와 함께 표시됩니다

 

useDisclose

모달(modal)이나 슬라이드 오버(slide over)와 같은 UI 컴포넌트에서 활용할 수 있습니다.

1. 모달이나 슬라이드 오버와 같은 UI 컴포넌트를 열고 닫을 수 있는 상태(state)를 관리합니다.
2. 이 상태를 변경하기 위한 함수들을 제공합니다. 예를 들어, 모달을 열기 위한 onOpen 함수나, 모달을 닫기 위한 onClose 함수 등이 있습니다.
3. 모달이나 슬라이드 오버와 같은 UI 컴포넌트를 사용하는 경우, 이 훅을 사용하여 상태 및 함수를 관리하면 편리합니다. 이렇게 하면 모달이나 슬라이드 오버를 열고 닫을 수 있으며, 해당 UI 컴포넌트의 상태를 변경할 수 있습니다.

따라서 **useDisclose**는 모달이나 슬라이드 오버와 같은 UI 컴포넌트를 구현할 때 매우 유용한 훅입니다.

 

useBreakpointValue

**useBreakpointValue**는 NativeBase 라이브러리에서 제공하는 훅(hook) 중 하나로, 반응형 디자인(responsive design)을 구현할 때 유용합니다. 이 훅은 현재 화면 크기에 따라 다른 값을 반환하여, 다양한 디바이스에서 일관된 디자인을 구현할 수 있습니다.

1. 현재 화면 크기에 따라 반환할 값을 정의합니다. 예를 들어, 스마트폰에서는 fontSize: "sm", 태블릿에서는 fontSize: "md", 데스크톱에서는 **fontSize: "lg"**와 같은 값을 정의할 수 있습니다.
2. 이 값을 자동으로 반환하며, 이를 통해 다양한 디바이스에서 일관된 디자인을 유지할 수 있습니다.
3. useBreakpointValue 훅은 Theme 컴포넌트에서 사용됩니다. 이를 통해 전역적으로 적용되는 테마를 정의할 수 있습니다.

따라서 **useBreakpointValue**는 반응형 디자인을 구현할 때 매우 유용한 훅입니다. 이를 통해 다양한 디바이스에서 일관된 디자인을 유지할 수 있으며, 코드를 더욱 간결하고 유지보수하기 쉽게 작성할 수 있습니다.

 

useClipboard

**useClipboard**는 **NativeBase**라이브러리에서 제공하는 훅(hook) 중 하나로, 클립보드(clipboard)에 저장된 데이터를 관리할 수 있습니다. 이 훅은 클립보드에서 데이터를 가져오거나, 클립보드에 데이터를 저장하거나, 클립보드에서 데이터를 삭제하는 등의 기능을 제공합니다.

1. 클립보드에 저장된 데이터를 가져올 수 있습니다. 예를 들어, **const [value, setValue] = useClipboard();**와 같이 사용하여 현재 클립보드에 저장된 데이터를 가져올 수 있습니다.
2. 클립보드에 데이터를 저장할 수 있습니다. setValue 함수를 사용하여 클립보드에 데이터를 저장할 수 있습니다. 예를 들어, **setValue("hello world")**와 같이 사용하여 "hello world"라는 데이터를 클립보드에 저장할 수 있습니다.
3. 클립보드에서 데이터를 삭제할 수 있습니다. setValue 함수를 사용하여 빈 문자열을 전달하면, 클립보드에서 데이터가 삭제됩니다.

따라서 **useClipboard**는 클립보드에서 데이터를 가져오거나 저장하고자 할 때 매우 유용한 훅입니다. 이를 통해 클립보드와 상호작용할 수 있으며, 편리하게 데이터를 복사하거나 붙여넣기 할 수 있습니다.

 

useMediaQuery

NativeBase는 React Native 기반의 UI 컴포넌트 라이브러리입니다. useMediaQuery는 NativeBase의 내장 훅(hook) 중 하나로, 현재 장치의 미디어 쿼리(Media Query)를 확인하는 데 사용됩니다.

useMediaQuery는 주어진 미디어 쿼리 문자열과 일치하는 경우 true를 반환하고, 그렇지 않은 경우 false를 반환합니다. 이를 통해 NativeBase 사용자는 현재 장치의 미디어 쿼리를 기반으로 뷰(View)나 컴포넌트(Component)를 동적으로 스타일링할 수 있습니다. 예를 들어, useMediaQuery를 사용하여 모바일 장치에서만 보이는 메뉴 버튼을 만들 수 있습니다. 이 경우, 미디어 쿼리 문자열은 "(max-width: 767px)"와 같이 지정하고, useMediaQuery를 사용하여 현재 장치의 뷰포트 크기를 확인한 다음, 뷰포트 크기가 767px보다 작은 경우에만 메뉴 버튼을 보이도록 스타일링할 수 있습니다

 

useTheme

현재 테마(Theme)를 확인하는 데 사용됩니다. useTheme을 사용하면 NativeBase 사용자는 현재 적용된 테마를 기반으로 뷰(View)나 컴포넌트(Component)를 동적으로 스타일링할 수 있습니다. useTheme은 NativeBase의 기본 테마에서 커스텀 테마까지 모든 테마에 대해 동작합니다. 예를 들어, useTheme을 사용하여 현재 적용된 테마의 primary 색상을 가져와서 버튼의 배경색으로 사용할 수 있습니다. 이를 위해 useTheme을 호출하고, 그 결과로 반환되는 테마 객체에서 primary 색상 값을 가져와 버튼 스타일에 적용할 수 있습니다. 이를 통해 버튼이 항상 현재 적용된 테마의 primary 색상을 사용하게 되어, 테마 변경 시에도 일관된 디자인을 유지할 수 있습니다.

 

useToken

useToken은 NativeBase의 내장 훅(hook) 중 하나로, 토큰(Token) 값을 가져오거나 연산하는 데 사용됩니다. 토큰은 NativeBase에서 스타일을 정의하는 데 사용되는 일종의 변수입니다. 예를 들어, NativeBase의 기본 테마에서는 "colors.gray.600"과 같은 토큰을 사용하여 색상 값을 정의합니다. useToken을 사용하면 토큰 값을 가져와서 스타일링에 사용하거나, 토큰 값에 연산을 수행하여 새로운 값을 생성할 수 있습니다.

예를 들어, useToken을 사용하여 텍스트 스타일에서 폰트 크기를 동적으로 조절할 수 있습니다. 이를 위해 useToken을 호출하고, "fontSizes.md"와 같은 폰트 크기 토큰 값을 가져와서, 원하는 연산을 수행하여 새로운 폰트 크기 값을 생성합니다. 이를 통해 텍스트 크기가 항상 일관된 스타일 가이드에 따라 동적으로 조절되도록 할 수 있습니다.

 

useColorMode

useColorMode는 NativeBase의 내장 훅(hook) 중 하나로, 사용자의 선호에 따라 색상 모드(Color Mode)를 변경하는 데 사용됩니다. useColorMode를 사용하면 NativeBase 사용자는 밝은(light) 모드와 어두운(dark) 모드를 전환할 수 있습니다. 이를 위해 useColorMode을 호출하고, 반환된 값으로 현재 설정된 색상 모드를 확인할 수 있습니다. 또한, useColorMode의 매개변수로 "light" 또는 "dark"와 같은 모드를 전달하여, 사용자의 선택에 따라 색상 모드를 변경할 수 있습니다.

예를 들어, useColorMode를 사용하여 어두운 모드에서만 사용할 수 있는 로고 이미지를 설정할 수 있습니다. 이를 위해 useColorMode을 호출하고, 반환된 값으로 현재 설정된 색상 모드를 확인한 다음, 어두운 모드일 때만 사용할 로고 이미지를 스타일에 적용합니다. 이를 통해 색상 모드 변경 시에도 로고 이미지가 일관된 디자인을 유지할 수 있습니다.

 

useColorModeValue

NativeBase는 React Native 기반의 UI 컴포넌트 라이브러리입니다. useColorModeValue는 NativeBase의 내장 훅(hook) 중 하나로, 현재 설정된 색상 모드(Color Mode)에 따라 값을 반환하는 데 사용됩니다. useColorModeValue는 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 밝은(light) 모드에서 사용할 값이고, 두 번째 매개변수는 어두운(dark) 모드에서 사용할 값입니다. useColorModeValue는 현재 설정된 색상 모드에 따라 적절한 값을 반환합니다. 예를 들어, 현재 밝은 모드일 경우 첫 번째 매개변수 값을 반환하고, 어두운 모드일 경우 두 번째 매개변수 값을 반환합니다. useColorModeValue를 사용하면 NativeBase 사용자는 색상 모드에 따라 다른 값을 설정할 수 있습니다. 예를 들어, useColorModeValue를 사용하여 배경 색상을 설정할 경우, 첫 번째 매개변수로 밝은 모드에서 사용할 색상 값을 전달하고, 두 번째 매개변수로 어두운 모드에서 사용할 색상 값을 전달합니다. 이를 통해 색상 모드에 따라 배경 색상이 일관된 디자인을 유지하면서도 적절하게 변경됩니다.

 

useContrastText

useContrastText는 NativeBase의 내장 훅(hook) 중 하나로, 색상 값에 대해 대비를 고려하여 적절한 텍스트 색상 값을 반환하는 데 사용됩니다. useContrastText를 사용하면 NativeBase 사용자는 밝은(light) 배경 색상 또는 어두운(dark) 배경 색상에 대해 적절한 텍스트 색상 값을 설정할 수 있습니다. 이를 위해 useContrastText를 호출하고, 반환된 값으로 적절한 텍스트 색상을 설정합니다. 예를 들어, useContrastText를 사용하여 밝은 배경 색상에 대한 텍스트 색상 값을 설정할 경우, useContrastText에 밝은 배경 색상 값을 전달하고, 반환된 값으로 텍스트 색상을 설정합니다. 이를 통해 적절한 대비를 고려하여 텍스트 색상이 일관된 디자인을 유지하면서도 적절하게 변경됩니다.

 

useAccessibleColors

useAccessibleColors는 NativeBase의 내장 훅(hook) 중 하나로, 색상 값에 대해 대비를 고려하여 접근성(accessibility)을 개선하는 데 사용됩니다. useAccessibleColors를 사용하면 NativeBase 사용자는 적절한 대비를 고려하여 배경 색상 및 텍스트 색상 값을 설정할 수 있습니다. 이를 위해 useAccessibleColors를 호출하고, 반환된 객체의 "bg" 프로퍼티로 배경 색상 값을 설정하고, "fg" 프로퍼티로 텍스트 색상 값을 설정합니다. 예를 들어, useAccessibleColors를 사용하여 배경 색상과 텍스트 색상 값을 설정할 경우, useAccessibleColors를 호출하고, 반환된 객체의 "bg" 프로퍼티에 배경 색상 값을 설정하고, "fg" 프로퍼티에 텍스트 색상 값을 설정합니다. 이를 통해 적절한 대비를 고려하여 배경 색상과 텍스트 색상이 일관된 디자인을 유지하면서도 접근성을 개선할 수 있습니다.