react-d-component v1.0.7-alpha-0.1
# react-d-component
`react-d-component`는 React 개발을 더욱 간편하게 해주는 다목적 유틸리티 라이브러리로, 재사용 가능한 컴포넌트와 다양한 유틸리티 함수를 제공합니다. 데이터 조작, 유효성 검사, React 관련 유틸리티를 포함한 다양한 기능을 포함하고 있습니다.
# 1.0.7-alpha 수정 사항
1. DInput , DCheckBoolean , DFormInpput, DFormColumns 에
stateLabels를 통한 state별로 관리 할 수 있게 처리하였음 기존에는 yes or no 의 관점에서 + 확장적인 요소를 사용할 수 있기 위함.
# 1.1.0 수정 예정
1.1.x 에서는 DGrid의 개편으로 인하여 마이너 버전업 예정
## 설치
npm 을 사용하여 라이브러리를 설치할 수 있습니다:
```bash
npm install react-d-component
```
사용법
1. 컴포넌트
임포트하기
React 프로젝트에서 직접 컴포넌트를 임포트하여 사용할 수 있습니다:
import { DButton, DPopupInterface, DGrid } from "react-d-component"
1. DButton
다양한 스타일과 기능을 제공하는 커스터마이징 가능한 버튼 컴포넌트입니다.
<DButton variant="primary" onClick={() => console.log("Button clicked!")}>
Click Me
</DButton>
2. DPopupInterface
쉽게 내용을 표시하거나 숨길 수 있는 훅을 제공하는 모달/팝업 인터페이스 컴포넌트입니다.
const popupRef = useRef(null);
<DPopupInterface
popupRef={popupRef}
title="샘플 팝업"
onShow={() => console.log('Popup shown')}
>
<p>이것은 팝업의 내용입니다.</p>
</DPopupInterface>
<button onClick={() => popupRef.current?.show()}>팝업 열기</button>
3. DForm
개요
DForm
는 복잡한 양식(Form)을 구성하고 관리하기 위한 인터페이스를 제공하는 라이브러리입니다. 이 라이브러리는 다양한 입력 요소와 유효성 검사 기능을 손쉽게 통합하여 효율적으로 양식을 처리할 수 있도록 도와줍니다.
주요 인터페이스 및 타입
- DFormContext: 폼 데이터와 그에 관련된 기능들을 Context API를 사용해 관리합니다.
- DFormColumns: 폼에서 사용하는 컬럼의 구조와 설정을 정의합니다.
- DFormInput: 폼의 입력 요소에 대한 설정을 정의하며, 유효성 검사와 이벤트 핸들러 등을 포함합니다.
- TypesDForm: 폼에서 사용하는 데이터 타입을 정의합니다.
주요 기능
- 폼 데이터 관리: 폼 데이터를 효율적으로 관리하며, Context API를 통해 전역적으로 접근할 수 있게 합니다.
- 유효성 검사: 다양한 유효성 검사 타입을 제공하여 폼 입력값을 검증할 수 있습니다.
- 입력 요소: 다양한 유형의 입력 요소를 지원하며, 필요에 따라 커스터마이징할 수 있습니다.
- 디자인: 폼의 레이아웃과 스타일을 손쉽게 조정할 수 있도록 다양한 옵션을 제공합니다.
사용 예시
TBD 작성 중
특징
- 유연한 데이터 바인딩: 입력 요소의 값이 폼의 데이터에 자동으로 바인딩됩니다.
- 컨텍스트 기반 상태 관리: 폼 상태를 전역적으로 관리하여 복잡한 폼에서도 일관된 데이터 흐름을 유지할 수 있습니다.
- 다양한 유효성 검사: 문자열 길이, 정규식 검사, 사용자 정의 함수 등 다양한 유효성 검사 옵션을 제공하여 폼의 신뢰성을 높입니다.
참고
해당 컴포넌트와 인터페이스는 복잡한 폼 구성과 데이터 유효성 검사를 필요로 하는 프로젝트에서 유용하게 사용될 수 있습니다. 사용자는 필요한 옵션을 정의하고 Context API를 활용하여 손쉽게 폼을 관리할 수 있습니다.
2. 전역 유틸리티 (GlobalUtilsInterface
)
- 다양한 데이터 처리와 UI 조작을 위한 유틸리티 함수들을 제공합니다.
임포트하기
import "react-d-component/functions"
utils 주요 메서드
utils.option.yn
: 일반적인 예/아니오 y:n 옵션 처리.utils.array.toRecord
: 배열을 키-값 형태의 레코드로 변환합니다.utils.array.toRecordDuplicateIgnore
: 중복을 무시하고 배열을 키-값 형태로 변환.utils.generator.uuid
: UUID 생성.utils.window.popup
: 팝업 창을 띄웁니다.utils.http.queryString
: 객체를 쿼리 스트링으로 변환.utils.http.formData
: 객체를 FormData 형식으로 변환.utils.text.copyText
: 텍스트를 클립보드에 복사합니다.utils.text.url
: 도메인과 URI를 결합하여 URL을 생성합니다.utils.regExp.tel
,utils.regExp.mobile
,utils.regExp.email
: 전화번호, 모바일, 이메일의 정규 표현식을 제공합니다.utils.css
관련 함수: 색상 변환과 대비 계산 등의 기능을 제공합니다.
유효성 타입 및 함수
validate(props: DValidateType): DValidateType
: 유효성 검사 설정을 적용한 객체를 반환합니다.validateBuilder(): DValidateBuilderType
: 유효성 검사를 위한 빌더 객체를 반환합니다.checkValid(targetValue: string | number | Date, validator: DValidateType)
: 주어진 값이 유효한지 검사하고, 검사 결과와 메시지를 반환합니다.
문자열 변환 함수
toCamelCase(stringParam: string)
: snake_case 문자열을 camelCase로 변환합니다.toSnakeCase(stringParam: string, isLower?: boolean)
: camelCase 문자열을 snake_case로 변환합니다.
데이터 체크 함수
isEmpty(data: unknown)
: 데이터가 비어 있는지를 확인합니다.isNotEmpty(data: unknown)
: 데이터가 비어 있지 않은지를 확인합니다.isEmptyOr(data: unknown, ...restData: unknown[])
: 주어진 데이터 중 하나라도 비어 있으면true
를 반환합니다.isNotEmptyOr(data: unknown, ...restData: unknown[])
: 주어진 데이터 중 하나라도 비어 있지 않으면true
를 반환합니다.isEmptyAnd(data: unknown, ...restData: unknown[])
: 모든 데이터가 비어 있으면true
를 반환합니다.isNotEmptyAnd(data: unknown, ...restData: unknown[])
: 모든 데이터가 비어 있지 않으면true
를 반환합니다.
예시 코드
// 유효성 검사 설정 및 사용 예시
const validator = validateBuilder().setRegExp(/^\d+$/).setMaxLength(10).setInvalidMessage("숫자만 입력하세요").build()
const result = checkValid("12345", validator)
console.log(result.isValid) // true
console.log(result.message) // ""
// 문자열 변환 함수 사용 예시
console.log(toCamelCase("hello_world")) // helloWorld
console.log(toSnakeCase("helloWorld")) // HELLO_WORLD
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
4 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
6 months ago
6 months ago
6 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago