@jk-core/hooks

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

설치

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의 옵션

사용법

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 (
<div ref={parentRef}>
{/ 아이템 목록 /}
<div ref={observerRef}>로딩 중...</div>
</div>
);
};

useInterectOutside

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

Props

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

사용법

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

useMediaQuery

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

Props

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

Return

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

사용법

import { useMediaQuery } from '@jk-core/hooks';
const MyComponent = () => {
const isMobile = useMediaQuery(768);
return <div>{isMobile ? 'Mobile' : 'Desktop'}</div>;
};

useHistory

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

Return

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

사용법

import { useHistory } from '@jk-core/hooks';
const MyComponent = () => {
const { push, back } = useHistory();
return (
<div>
<button onClick={() => push('/page1')}>Page 1</button>
<button onClick={() => back()}>Back</button>
</div>
);
};

useHistoryEvent

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

Props

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

Update 객체

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

사용법

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 <div>History Event Listener</div>;
};