react-d-component

# 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: 폼에서 사용하는 데이터 타입을 정의합니다.

주요 기능

1. 폼 데이터 관리: 폼 데이터를 효율적으로 관리하며, Context API를 통해 전역적으로 접근할 수 있게 합니다.
2. 유효성 검사: 다양한 유효성 검사 타입을 제공하여 폼 입력값을 검증할 수 있습니다.
3. 입력 요소: 다양한 유형의 입력 요소를 지원하며, 필요에 따라 커스터마이징할 수 있습니다.
4. 디자인: 폼의 레이아웃과 스타일을 손쉽게 조정할 수 있도록 다양한 옵션을 제공합니다.

사용 예시

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