1.0.7-alpha-0.1 • Published 2 months ago

react-d-component v1.0.7-alpha-0.1

Weekly downloads
-
License
Apache-2.0
Repository
-
Last release
2 months ago
# 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
1.0.7-alpha-0.1

2 months ago

0.1.129

2 months ago

0.1.128

2 months ago

0.1.127

2 months ago

0.1.126

2 months ago

1.0.2

2 months ago

1.0.1

2 months ago

1.0.0

2 months ago

1.0.6

2 months ago

1.0.5

2 months ago

1.0.4

2 months ago

1.0.3

2 months ago

1.0.7-alpha

2 months ago

0.1.117

4 months ago

0.1.119

3 months ago

0.1.114

4 months ago

0.1.113

4 months ago

0.1.116

4 months ago

0.1.115

4 months ago

0.1.110

5 months ago

0.1.111

5 months ago

0.1.125

3 months ago

0.1.124

3 months ago

0.1.121

3 months ago

0.1.120

3 months ago

0.1.123

3 months ago

0.1.122

3 months ago

0.1.97

6 months ago

0.1.98

6 months ago

0.1.99

6 months ago

0.1.107

5 months ago

0.1.106

5 months ago

0.1.109

5 months ago

0.1.108

5 months ago

0.1.103

5 months ago

0.1.102

5 months ago

0.1.105

5 months ago

0.1.104

5 months ago

0.1.101

5 months ago

0.1.100

5 months ago

0.1.96

6 months ago

0.1.90

6 months ago

0.1.91

6 months ago

0.1.92

6 months ago

0.1.93

6 months ago

0.1.94

6 months ago

0.1.95

6 months ago

0.1.89

6 months ago

0.1.88

9 months ago

0.1.86

9 months ago

0.1.87

9 months ago

0.1.85

9 months ago

0.1.82

9 months ago

0.1.83

9 months ago

0.1.84

9 months ago

0.1.81

10 months ago

0.1.80

11 months ago

0.1.78

11 months ago

0.1.79

11 months ago

0.1.52

1 year ago

0.1.53

1 year ago

0.1.54

1 year ago

0.1.55

1 year ago

0.1.56

1 year ago

0.1.57

1 year ago

0.1.58

1 year ago

0.1.59

1 year ago

0.1.50

1 year ago

0.1.51

1 year ago

0.1.49

1 year ago

0.1.41

1 year ago

0.1.42

1 year ago

0.1.43

1 year ago

0.1.44

1 year ago

0.1.45

1 year ago

0.1.46

1 year ago

0.1.47

1 year ago

0.1.48

1 year ago

0.1.40

1 year ago

0.1.38

1 year ago

0.1.39

1 year ago

0.1.74

1 year ago

0.1.30

1 year ago

0.1.75

1 year ago

0.1.31

1 year ago

0.1.76

12 months ago

0.1.32

1 year ago

0.1.77

12 months ago

0.1.33

1 year ago

0.1.34

1 year ago

0.1.35

1 year ago

0.1.36

1 year ago

0.1.37

1 year ago

0.1.70

1 year ago

0.1.71

1 year ago

0.1.72

1 year ago

0.1.73

1 year ago

0.1.27

1 year ago

0.1.28

1 year ago

0.1.29

1 year ago

0.1.63

1 year ago

0.1.64

1 year ago

0.1.20

1 year ago

0.1.65

1 year ago

0.1.21

1 year ago

0.1.66

1 year ago

0.1.22

1 year ago

0.1.67

1 year ago

0.1.23

1 year ago

0.1.68

1 year ago

0.1.24

1 year ago

0.1.69

1 year ago

0.1.25

1 year ago

0.1.26

1 year ago

0.1.60

1 year ago

0.1.61

1 year ago

0.1.62

1 year ago

0.1.19

1 year ago

0.1.10

1 year ago

0.1.11

1 year ago

0.1.12

1 year ago

0.1.13

1 year ago

0.1.14

1 year ago

0.1.15

1 year ago

0.1.2

1 year ago

0.1.1

1 year ago

0.1.16

1 year ago

0.1.8

1 year ago

0.1.17

1 year ago

0.1.7

1 year ago

0.1.18

1 year ago

0.1.9

1 year ago

0.1.4

1 year ago

0.1.3

1 year ago

0.1.6

1 year ago

0.1.5

1 year ago

0.1.0

1 year ago

0.0.7

1 year ago

0.0.6

1 year ago

0.0.4

1 year ago

0.0.2

1 year ago

0.0.1

1 year ago