@jk-core/utils

jk-core 프로젝트를 위한 React 커스텀 유틸 모음입니다.

설치

npm install @jk-core/utils // npm 사용시
yarn add @jk-core/utils // yarn 사용시
pnpm add @jk-core/utils // pnpm 사용시

사용 가능한 기능

cn

css module을 사용할 때, cn({[classname]: boolean}) 과 같이 조건부에 따라 className을 부여할 수 있는 기능입니다.

사용법

import { cn } from '@jk-core/utils';

const MyComponent = ({ className, ...props }) => (
  <div className={cn({
    [className]: true,
    'some-class': true,
  })}>
    {/* ... */}
  </div>
);

debounce

함수 호출을 지연시켜, 특정 시간 동안 호출이 없으면 마지막 호출만 실행되도록 하는 기능입니다.

Props

| Prop name | Description | Default value | Example values | |-----------|-------------|---------------|----------------| | delay | 지연 시간을 밀리초 단위로 지정합니다. | 300 | 1000 | | callback | 지연 후 실행할 함수를 지정합니다. | - | () => {...} |

formatTime

숫자로 주어진 시간을 시,분 형식으로 변환하는 함수입니다. time, minute, fullTime을 통해 시간,분, 시간 분을 받아올 수 있습니다.

Props

| Prop name | Description | Default value | Example values | |-----------|-------------|---------------|----------------| | time | 변환할 시간을 나타내는 문자열 또는 숫자입니다. | - | 1.256, 3.63 |

사용법

const formattedTime = formatTime(2.15).fullTime; // "2시간 09분"
const formattedTime2 = formatTime(1.23).minute; // "13"

roundNum

숫자를 지정된 소수점 자리까지 반올림하는 함수입니다. null 값이 들어오면 0을 반환합니다.

Props

| Prop name | Description | Default value | Example values | |-----------|-------------|---------------|----------------| | num | 반올림할 숫자입니다. | - | 1234.5678, null | | scale | 반올림할 소수점 자리수입니다. | 2 | 0, 3 |

사용법

const rounded = roundNum(1234.5678, 2); // 1234.57
const rounded2 = roundNum(null, 2); // 0

displayRoundNum

숫자를 지정된 소수점 자리까지 반올림하는 함수입니다. null 값이나 undefined가 들어오면 "-"을 반환합니다.

Props

| Prop name | Description | Default value | Example values | |-----------|-------------|---------------|----------------| | num | 반올림할 숫자입니다. | - | 1234.5678, null, undefined | | scale | 반올림할 소수점 자리수입니다. | 2 | 0, 3 |

사용법

const rounded = displayRoundNum(1234.5678, 2); // 1234.57
const rounded2 = displayRoundNum(null, 2); // "-"
const rounded3 = displayRoundNum(undefined, 2); // "-"

checkIsMobile

사용자의 기기가 모바일인지 확인하는 함수입니다.

사용법

const isMobile = checkIsMobile(); // true 또는 false 반환

isDefined

값이 null 또는 undefined인지 확인하는 함수입니다.

사용법

const isDefined = isDefined(value); // true 또는 false 반환