1
1
# useCounter
2
2
3
- ` useCounter ` 는 숫자 카운터 상태를 증가, 감소, 초기화 기능과 함께 관리하는 리액트 훅이에요. 선택적으로, 카운터의 범위를 제한하기 위해 최소 및 최대값을 제공할 수 있어요.
3
+ ` useCounter ` 는 증가, 감소 및 초기화 기능을 가진 숫자 카운터 상태를 관리하는 리액트 훅이에요. 선택적으로, 카운터의 범위를 제한하기 위해 최소값과 최대값을 제공할 수 있어요.
4
4
5
5
## Interface
6
6
7
7
``` ts
8
8
function useCounter(
9
- initialValue ? : number ,
10
- options ? : UseCounterOptions
9
+ initialValue : number = 0 ,
10
+ options : UseCounterOptions
11
11
): UseCounterReturn ;
12
12
```
13
13
@@ -16,30 +16,28 @@ function useCounter(
16
16
<Interface
17
17
name="initialValue"
18
18
type="number"
19
- required={false}
20
- defaultValue="0"
21
19
description="카운터의 초기값이에요. 기본값은 0이에요."
22
20
/>
23
21
24
22
<Interface
23
+ required
25
24
name="options"
26
25
type="UseCounterOptions"
27
- required={false}
28
26
description="카운터의 옵션이에요."
29
27
: nested ="[
30
28
{
31
29
name: 'options.min',
32
30
type: 'number',
33
31
required: false,
34
32
description:
35
- '카운터가 도달할 수 있는 최소값이에요. 제공되지 않으면 하한선이 없어요.',
33
+ '카운터가 도달할 수 있는 최소값이에요. 제공되지 않으면, 하한선이 없어요.',
36
34
},
37
35
{
38
36
name: 'options.max',
39
37
type: 'number',
40
38
required: false,
41
39
description:
42
- '카운터가 도달할 수 있는 최대값이에요. 제공되지 않으면 상한선이 없어요.',
40
+ '카운터가 도달할 수 있는 최대값이에요. 제공되지 않으면, 상한선이 없어요.',
43
41
},
44
42
{
45
43
name: 'options.step',
@@ -56,7 +54,7 @@ function useCounter(
56
54
<Interface
57
55
name=""
58
56
type="UseCounterReturn"
59
- description="카운트 값과 제어 함수들이 포함된 객체에요 ."
57
+ description="카운트 값과 제어 함수들을 가진 객체예요 ."
60
58
: nested ="[
61
59
{
62
60
name: 'count',
@@ -68,26 +66,26 @@ function useCounter(
68
66
name: 'increment',
69
67
type: '() => void',
70
68
required: false,
71
- description: '카운트를 증가시키는 함수에요 .',
69
+ description: '카운트를 증가시키는 함수예요 .',
72
70
},
73
71
{
74
72
name: 'decrement',
75
73
type: '() => void',
76
74
required: false,
77
- description: '카운트를 감소시키는 함수에요 .',
75
+ description: '카운트를 감소시키는 함수예요 .',
78
76
},
79
77
{
80
78
name: 'reset',
81
79
type: '() => void',
82
80
required: false,
83
- description: '카운트를 초기 값으로 리셋하는 함수에요 .',
81
+ description: '카운트를 초기값으로 재설정하는 함수예요 .',
84
82
},
85
83
{
86
84
name: 'setCount',
87
85
type: '(value: number | ((prev: number) => number)) => void',
88
86
required: false,
89
87
description:
90
- '카운트를 특정 값으로 설정하거나 새로운 값을 반환하는 함수에요 .',
88
+ '카운트를 특정 값으로 설정하거나 새로운 값을 반환하는 함수예요 .',
91
89
},
92
90
] "
93
91
/>
@@ -105,15 +103,15 @@ function ShoppingCart() {
105
103
106
104
return (
107
105
<div >
108
- <span >Quantity : { count } </span >
106
+ <span >수량 : { count } </span >
109
107
<button type = " button" onClick = { decrement } >
110
108
-
111
109
</button >
112
110
<button type = " button" onClick = { increment } >
113
111
+
114
112
</button >
115
113
<button type = " button" onClick = { reset } >
116
- Reset
114
+ 재설정
117
115
</button >
118
116
</div >
119
117
);
0 commit comments