🎯
Hooks Examples
🍪
useCookies
쿠키를 쉽게 관리할 수 있는 hook입니다. 설정, 확인, 삭제 기능을 제공합니다.
현재 쿠키(key: test) 값:
undefined
Methods
CookieOptions:
Property | Type | Description |
---|---|---|
path | string | 쿠키 경로 (기본값: '/') |
expires | Date | string | 'today' | 만료일 |
maxAge | number | 최대 수명 (초) |
domain | string | 쿠키 도메인 |
주요 기능
- 쿠키 설정/조회/삭제
- 만료일 설정
- 브라우저 호환성
- 타입 안전성
✂️
useString
문자열 조작을 위한 유틸리티 hook입니다. 생략 표시(ellipsis) 기능을 제공합니다.
텍스트 생략 예시
원본:"안녕하세요 세상!"
왼쪽 생략:"...세요 세상!"
오른쪽 생략:"안녕하세요 ..."
Methods
EllipsisOptions:
Property | Type | Description |
---|---|---|
value | string | 원본 문자열 |
length | number | 자를 길이 |
dir | 'right' | 'left' | 자르는 방향 (기본값: 'right') |
주요 기능
- 문자열 생략
- 방향 선택 (좌/우)
- 길이 제한
- 유니코드 지원
📜
useWindowScroll
윈도우 스크롤을 제어하는 hook입니다. 스크롤 잠금/해제 기능을 제공합니다.
페이지 스크롤을 잠그거나 해제할 수 있습니다. 모달이나 팝업에서 유용합니다.
Methods
주요 기능
- 스크롤 잠금/해제
- 모달 지원
- 브라우저 호환성
- 상태 관리
👁️
useVisibleElement
화면에 보이는 요소를 감지하는 hook입니다. Intersection Observer API를 활용합니다.
현재 보이는 요소
Active Key:none
Element:none
Section 0
Section 1
Section 2
Section 3
Usage
Properties:
Property | Type | Description |
---|---|---|
key | string | 요소 식별 키 (기본값: 'visible-element') |
activeClass | string | 가시 요소에 추가할 CSS 클래스 |
주요 기능
- Intersection Observer
- 가시성 감지
- 스크롤 이벤트
- 성능 최적화