@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 반환