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

3 months ago

0.1.128

3 months ago

0.1.127

3 months ago

0.1.126

3 months ago

1.0.2

3 months ago

1.0.1

3 months ago

1.0.0

3 months ago

1.0.6

2 months ago

1.0.5

2 months ago

1.0.4

3 months ago

1.0.3

3 months ago

1.0.7-alpha

2 months ago

0.1.117

4 months ago

0.1.119

4 months ago

0.1.114

4 months ago

0.1.113

5 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

4 months ago

0.1.120

4 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

6 months ago

0.1.105

5 months ago

0.1.104

5 months ago

0.1.101

6 months ago

0.1.100

6 months ago

0.1.96

7 months ago

0.1.90

7 months ago

0.1.91

7 months ago

0.1.92

7 months ago

0.1.93

7 months ago

0.1.94

7 months ago

0.1.95

7 months ago

0.1.89

7 months ago

0.1.88

10 months ago

0.1.86

10 months ago

0.1.87

10 months ago

0.1.85

10 months ago

0.1.82

10 months ago

0.1.83

10 months ago

0.1.84

10 months ago

0.1.81

11 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

1 year ago

0.1.32

1 year ago

0.1.77

1 year 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