66
77``` ts
88function useDoubleClick<E extends HTMLElement >(
9- params : Object
9+ props : Object
1010): (event : MouseEvent <E >) => void ;
1111```
1212
1313### 파라미터
1414
1515<Interface
1616 required
17- name="params "
17+ name="props "
1818 type="Object"
1919 description="클릭 처리를 위한 설정 옵션이에요."
2020 : nested ="[
2121 {
22- name: 'params .delay',
22+ name: 'props .delay',
2323 type: 'number',
2424 required: false,
2525 defaultValue: '250',
2626 description:
27- '단일 클릭 콜백을 실행하기 전에 기다릴 밀리초 수예요. 기본값은 250ms예요.',
27+ '단일 클릭 콜백을 실행하기 전에 기다리는 밀리초 단위 수로, 기본값은 250ms예요.',
2828 },
2929 {
30- name: 'params .click',
30+ name: 'props .click',
3131 type: '(event: MouseEvent<E >) => void',
3232 required: false,
33- description: '단일 클릭 시 실행될 콜백 함수예요.',
33+ description: '단일 클릭 시 실행되는 콜백 함수예요.',
3434 },
3535 {
36- name: 'params .doubleClick',
36+ name: 'props .doubleClick',
3737 type: '(event: MouseEvent<E >) => void',
3838 required: true,
3939 description:
40- '더블 클릭 시 실행될 콜백 함수예요. 필수예요.',
40+ '더블 클릭 시 실행되는 콜백 함수로, 필수예요.',
4141 },
4242 ] "
4343/>
@@ -47,7 +47,7 @@ function useDoubleClick<E extends HTMLElement>(
4747<Interface
4848 name=""
4949 type="(event: MouseEvent<E >) => void"
50- description="요소의 <code >onClick</code > 이벤트에 첨부할 클릭 핸들러 함수예요."
50+ description="요소의 <code >onClick</code > 이벤트에 연결할 클릭 핸들러 함수예요."
5151/>
5252
5353## 예시
@@ -57,15 +57,13 @@ function GalleryCard() {
5757 const [selected, setSelected] = useState (false );
5858
5959 const handleClick = () => setSelected (prev => ! prev );
60- const handleDoubleClick = () => alert (' 확대해요 !' );
60+ const handleDoubleClick = () => alert (' 확대 !' );
6161
6262 const handleEvent = useDoubleClick ({
6363 click: handleClick ,
6464 doubleClick: handleDoubleClick ,
6565 });
6666
67- return (
68- <div onClick = { handleEvent } >{ selected ? ' 선택됨' : ' 선택되지 않음' } </div >
69- );
67+ return <div onClick = { handleEvent } >{ selected ? ' 선택됨' : ' 선택 안됨' } </div >;
7068}
7169```
0 commit comments