@basiln/utils-native

유용한 컴포넌트 및 유틸리티 모음

설치

yarn add @basiln/utils-native

• If
• Choose
• Flex
• Validate
• hexToRgba
• Josa
• createContext
• debounce
• Format
• Spacing
• Flex
• composeEventHandlers
• DomainFormat
• useCombinedRefs
• useControllableState
• useRefetchOnFocus
• rootNavigate
• atomWithAsyncStorage

If

조건에 따라 자식 요소를 렌더링하는 컴포넌트입니다. condition 속성이 true일 때만 자식 요소를 렌더링합니다.

import { If } from '@basiln/utils-native';

<If condition={true}>
  <Text>조건이 참일 때만 렌더링됩니다.</Text>
</If>;

Choose

switch-case와 유사하게 조건에 따라 자식 요소를 렌더링하는 컴포넌트입니다. Choose에는 두 가지 하위 컴포넌트가 있습니다:

• Choose.When: condition이 true일 때 자식 요소를 렌더링합니다.
• Choose.Otherwise: Choose.When 조건이 모두 false일 때 렌더링됩니다.

import { Choose } from '@basiln/utils-native';

<Choose>
  <Choose.When condition={true}>
    <Text>첫 번째 조건이 참일 때 렌더링됩니다.</Text>
  </Choose.When>
  <Choose.When condition={false}>
    <Text>이 내용은 렌더링되지 않습니다.</Text>
  </Choose.When>
  <Choose.Otherwise>
    <Text>모든 조건이 거짓일 때 렌더링됩니다.</Text>
  </Choose.Otherwise>
</Choose>;

Validate

정규식을 사용해 입력값을 검증할 수 있는 유틸리티입니다.

import { Validate } from '@basiln/utils-native';

Validate.email('[email protected]'); // true
Validate.phoneNumber('010-1234-5678'); // true

hexToRgba

16진수 컬러 코드를 rgba() 표기로 변환하는 유틸리티입니다.

import { hexToRgba } from '@basiln/utils-native';

hexToRgba({ hex: '#000000', alpha: 0.5 }); // 'rgba(0, 0, 0, 0.5)'

Josa

한국어 문장에서 적절한 조사를 반환하는 유틸리티입니다.

import { josa } from '@basiln/utils-native';

josa({ josa: '을/를', word: '망곰이' }); // 망곰이를
josa.pick({ josa: '은/는', word: '하츄핑' }); // 은

createContext

React의 Context를 보다 선언적으로 생성하고 사용할 수 있는 유틸리티입니다.

사용법

import { createContext } from '@basiln/utils-native';

const [MyProvider, useMyContext] = createContext<{ value: string }>(
  'MyComponent'
);

function App() {
  return (
    <MyProvider value="Hello World">
      <Child />
    </MyProvider>
  );
}

function Child() {
  const context = useMyContext('Child');
  return <View>{context.value}</View>;
}

debounce

지정된 시간(ms) 동안 연속적으로 호출된 함수 실행을 지연시키는 유틸리티입니다.

일반적으로 연속된 사용자 입력 처리 시 사용됩니다.

사용법

import { debounce } from '@basiln/utils-native';

const debouncedLog = debounce(() => {
  console.log('Debounced Function Called');
}, 1000);

function App() {
  const handleClick = () => {
    debouncedLog();
  };

  return <TouchableOpacity onClick={handleClick}>Click me</TouchableOpacity>;
}

// 추가 메서드
debouncedLog.cancel(); // 예약된 호출 취소
debouncedLog.flush(); // 예약된 호출 즉시 실행

Format

다양한 데이터를 원하는 형식으로 변환하는 포맷팅 유틸리티입니다.

사용법

import { Format } from '@basiln/utils-native';

Format.phone('01012345678'); // '010-1234-5678'
Format.commaize('123456'); // '123,456'
Format.padTime(1); // '01'
Format.email('[email protected]'); // [email protected]

Spacing

요소 간 간격을 선언적으로 설정할 수 있는 컴포넌트입니다.

import { Spacing } from '@basiln/utils-native';

<Spacing size={30} />;
<Spacing size="10%" direction="horizontal" />;

Flex

선언적으로 flex box 스타일링을 할 수 있는 컴포넌트입니다.

import { Flex } from '@basiln/utils-native';

<Flex justify="space-between" align="center" gap={20}>
  <View>Left</View>
  <View>Right</View>
</Flex>
<Flex gap='10%'>
  <View>Left</View>
  <View>Right</View>
</Flex>

composeEventHandlers

두 개의 이벤트 핸들러를 결합하여 하나의 핸들러로 만드는 유틸리티입니다.

첫 번째 핸들러가 defaultPrevented를 호출하면 두 번째 핸들러는 실행되지 않습니다.

사용법

import { composeEventHandlers } from '@basiln/utils-native';

function App() {
  const handleFirstClick = (event: GestureResponderEvent) => {
    console.log('First Handler');
  };

  const handleSecondClick = (event: GestureResponderEvent) => {
    console.log('Second Handler');
  };

  const combinedHandler = composeEventHandlers(handleFirstClick, handleSecondClick);

  return <TouchableOpacity onPress={combinedHandler}>Click Me</TouchableOpacity>;
}

DomainFormat

도메인 관련 데이터를 원하는 형식으로 변환하는 포맷팅 유틸입니다.

사용법

// 기본
DomainFormat.modeName('H'); // 난방
DomainFormat.modeColor('H'); // #e77676
DomainFormat.wind(3) // 강풍
DomainFormat.airLevelName(4) // 좋음
DomainFormat.airLevelColor(1) // #ff5d47
DomainFormat.userLevel({level: '1'}) // 마스터
DomainFormat.userLevel({level: '1', language: 'en'}) // MASTER

// Mode 추가가 필요한 경우 
DomainFormat.modeName('R', {R: '실외기 잠금'}); // 실외기 잠금
DomainFormat.modeColor('R', {N: 'gray'}); // 'gray'

useCombinedRefs

컴포넌트 내부에 선언된 ref와, 사용하는 부분에서 forwarded된 ref를 합칠 수 있도록 하는 hook 입니다.

사용법

const TextField = forwardRef((props, forwardedRef) => {
    const ref = useRef<TextInput>(null);
    const combinedRefs = useCombinedRefs(ref, forwardedRef);

    return <TextInput ref={ref} />
})

useControllableState

사용자의 입력을 통해 상태를 관리할 때와 사용자의 입력을 상태로 관리하지 않고 싶을 때 두 경우 모두를 지원하는 hook 입니다.

사용법 (참고)

  const [value, setValue] = useControllableState({
    prop: valueFromProps,
    defaultProp: defaultValue,
    onChange: onValueChange,
  });

  return (
    <SelectProvider
      value={value}
      onValueChange={setValue}
      triggerWidth={triggerWidth}
      onTriggerWidthChange={setTriggerWidth}
    >
      <SelectPrimitive.Root value={value} onValueChange={setValue} {...restProps}>
        <div ref={ref}>{children}</div>
      </SelectPrimitive.Root>
    </SelectProvider>
  );
});

useRefetchOnFocus

React Native에서 화면이 다시 포커싱될 때 제공된 리페치 함수를 호출하는 유틸 입니다.

사용법

const ToDoList = () => {
  const { data, refetch } = useGetToDoList();

  useRefetchOnFocus(refetch);

  return (
    ....
  )
}

rootNavigate

rootNavigate는 NavigationContainer 외부에서 네비게이션을 통해 페이지 이동을 쉽게 할 수 있는 유틸리티입니다.

사용법

1. NavigationContainer에 navigationRef 전달

먼저, NavigationContainer에 navigationRef를 전달해야 합니다. 이를 통해 네비게이션 상태를 관리할 수 있습니다.

import { navigationRef } from '@basiln/utils-native';
import { NavigationContainer } from '@react-navigation/native';

const App = () => {
  
  return (
    <NavigationContainer ref={navigationRef}>
      {...}
    </NavigationContainer>
  )
}

2. 네비게이션 외부에서 rootNavigate 사용

import { rootNavigate } from '@basiln/utils-native';

// 예시: 로그인 화면으로 이동
rootNavigate('signIn');

// 예시: 세부 페이지로 이동 (파라미터 포함)
rootNavigate('details', { itemId: 42 });

atomWithAsyncStorage

AsyncStorage에 값이 유지되는 아톰을 생성하는 유틸리티입니다.

사용법

1. 생성

import { atomWithAsyncStorage } from '@basiln/utils-native';

export const tokenState = atomWithAsyncStorage<Tokens | null>('@tokens', null);

2. 사용

AsyncStorage에 직접 접근하는것이 아닌 atom을 통한 값 관리가 가능합니다.

import { useAtom } from 'jotai';

const [token, setToken] = useAtom(tokenState);

console.log(token);

setToken({refreshToken: ..., accessToken:...})