@jk-core/hooks

jk-core 프로젝트를 위한 React 커스텀 훅 모음입니다.

설치

``bash
npm install @jk-core/hooks // npm 사용 가능
yarn add @jk-core/hooks // npm 대신 yarn 사용 가능
pnpm add @jk-core/hooks // npm 대신 pnpm 사용 가능
`

useIntersectionObserver

무한 스크롤을 구현하기 위한 Intersection Observer API를 사용하는 훅입니다.

#### Props
- parent : 관찰할 대상 요소의 부모 요소
- target: 관찰할 대상 요소
- callback: () => void - 교차점 관찰 시 실행될 함수
- options: IntersectionObserver의 옵션




#### 사용법

`typescript
import { useIntersectionObserver } from '@jk-core/hooks';
function MyComponent() {
const observerRef= useRef();
const parentRef= useRef();

const loadMoreItems = () => {
// 추가 아이템을 로드하는 로직
};

useIntersectionObserver({target: targetRef,callback:loadMoreItems, options:{root:parentRef.current, threshold:1, rootmargin: '5px'}});
return (



);
};
`

useInterectOutside

클릭한 위치가 요소 바깥인지 확인하는 훅입니다.

#### Props
- targetRef: RefObject - 대상 요소의 ref
- eventList: string[] - 감지할 이벤트 목록
- handler: () => void - 요소 외부 클릭 시 실행될 함수




#### 사용법

`typescript
import { useInterectOutside } from '@jk-core/hooks';
const MyComponent = () => {
const handleClickOutside = () => {
// 클릭한 위치가 요소 바깥일 때 실행되는 로직
};
const { ref } = useInterectOutside(handleClickOutside);
return

;
};
`

useMediaQuery

미디어 쿼리를 사용하여 화면 크기를 확인하는 훅입니다.

#### Props
- width: number - 기준이 되는 화면 너비 (픽셀)


#### Return
- boolean: 현재 화면 크기가 지정된 너비보다 작은지 여부




#### 사용법

`typescript
import { useMediaQuery } from '@jk-core/hooks';
const MyComponent = () => {
const isMobile = useMediaQuery(768);
return

;
};
`

useHistory

브라우저의 history API를 사용하여 페이지 내비게이션을 관리하는 훅입니다.

#### Return
- push: (path: string) => void - 현재 path에 가상의 path를 추가하는 함수
- back: () => void - 이전 페이지로 이동하는 함수



#### 사용법

`typescript
import { useHistory } from '@jk-core/hooks';
const MyComponent = () => {
const { push, back } = useHistory();
return (



);
};
`

useHistoryEvent

브라우저의 history 이벤트를 관리하는 훅입니다.

#### Props
- listener: (update: Update) => void - history 이벤트 처리 함수

#### Update 객체
- action: 'POP' | 'PUSH' | 'REPLACE' - 수행된 history 액션
- location: Location - 현재 location 객체




#### 사용법

`typescript
import { useHistoryEvent } from '@jk-core/hooks';
const MyComponent = () => {

// history 이벤트 처리 로직
const handleHistoryEvent = ((update: Update) =>{
if(event.action === 'PUSH') {
// history push 이벤트 처리 로직
}
if(event.action === 'REPLACE') {
// history replace 이벤트 처리 로직
}
if(event.action === 'POP') {
// history pop 이벤트 처리 로직
}
};

useHistoryEvent(handleHistoryEvent);
return

;
};
``