Options
All
  • Public
  • Public/Protected
  • All
Menu

Module React

Index

Variables

Other Functions

hooks Functions

Variables

Const PortalContext

PortalContext: Context<HTMLDivElement> = ...

Other Functions

Const ImpressionArea

  • ImpressionArea(__namedParameters: Props): Element

  • 요소가 화면 안에 등장하거나 화면에서 사라지면 onImpressionStart, onImpressionEnd 이벤트를 트리거하는 컴포넌트입니다.

    example
    <ImpressionArea onImpressionStart={() => console.log('나타났다!')}>
  <div />
</ImpressionArea>

    Parameters

    • __namedParameters: Props

    Returns Element

LoggingClick

  • LoggingClick(__namedParameters: Props): Element

  • @lubycon/logger를 선언적으로 사용할 수 있는 컴포넌트입니다. 자식 요소에서 onClick 이벤트가 발생하면 로거의 click 메소드를 사용하여 이벤트 로그를 발송합니다.

    example

    <LoggingClick view="구독_페이지" logName="구독해제_버튼클릭" params={{ 서비스: service.name }}>

    Parameters

    • __namedParameters: Props

    Returns Element

LoggingEvent

  • LoggingEvent(__namedParameters: Props): ReactElement<any, string | JSXElementConstructor<any>>

  • @lubycon/logger를 선언적으로 사용할 수 있는 컴포넌트입니다. eventName과 일치하는 자식 컴포넌트의 프로퍼티에 이벤트를 발송하는 로직을 주입합니다.

    example

    <LoggingEvent view="구독_페이지" logName="구독해제_버튼클릭" params={{ 서비스: service.name }} eventName="onClick" loggerType="click"

    Parameters

    • __namedParameters: Props

    Returns ReactElement<any, string | JSXElementConstructor<any>>

LoggingImpression

  • LoggingImpression(__namedParameters: Props): Element

  • @lubycon/logger를 선언적으로 사용할 수 있는 컴포넌트입니다. 내부적으로 ImpressionArea를 사용하고 있기 때문에 자동으로 onImpressionStart 이벤트 발생 시 로거가 발송됩니다.

    example

    <LoggingImpression view="구독_페이지" logName="구독해제_버튼노출" params={{ 서비스: service.name }}

    Parameters

    • __namedParameters: Props

    Returns Element

OverlayProvider

  • OverlayProvider(__namedParameters: PropsWithChildren<unknown>): Element

Portal

  • Portal(__namedParameters: PortalConsumerProps): ReactPortal | null

PortalProvider

  • PortalProvider(__namedParameters: PortalProviderProps): Element

SSRSuspense

  • SSRSuspense(__namedParameters: ComponentProps<typeof Suspense>): Element

  • SSR 환경에서는 fallback를 렌더하고, CSR 환경에서는 Suspsense를 렌더하는 컴포넌트입니다.

    example
    <SSRSuspense fallback={<Fallback />}>
  <MyPage />
</SSRSuspense>

    Parameters

    • __namedParameters: ComponentProps<typeof Suspense>

    Returns Element

useAnimationFrame

  • useAnimationFrame(callback: () => void): void

  • requestAnimationFrame을 쉽게 사용할 수 있는 훅입니다. 콜백의 레퍼런스가 변경되면 기존의 animationFrame을 취소하고 새로운 animationFrame을 등록하니, 최적화를 위해 콜백의 레퍼런스 관리를 신경써주세요.

    example
    const [progress, setProgress] = useState(0);
const updateProgress = useCallback(() => {
  setProgress(prevProgress => prevProgress >= 100 ? 0 : prevProgress + 1);
}, []);

    useAnimationFrame(updateProgress);

    Parameters

    • callback: () => void
        • (): void

        • Returns void

    Returns void

useAsyncEffect

  • useAsyncEffect(asyncEffect: () => Promise<void>, deps: DependencyList): void

  • useEffect로 async function을 넘기면 타입이 깨지기 때문에 사용하는 헬퍼입니다.

    동작은 useEffect와 똑같지만, 이펙트가 반환하는 타입이 Promise이기 때문에 클린업은 불가능합니다.

    example
    useAsyncEffect(async () => {
  const response = await fetchUsers();
  setUsers(response);
}, []);

    Parameters

    • asyncEffect: () => Promise<void>
        • (): Promise<void>

        • Returns Promise<void>

    • deps: DependencyList

    Returns void

Const useBindInput

  • useBindInput(__namedParameters: { initialValue?: string; validator?: any }): { bind: { onChange: (e: ChangeEvent<HTMLInputElement>) => void; value: string }; clearValue: () => void; setValue: Dispatch<SetStateAction<string>> }

  • Parameters

    • __namedParameters: { initialValue?: string; validator?: any }
      • Optional initialValue?: string
      • validator: function
        • validator(text: string): boolean

    Returns { bind: { onChange: (e: ChangeEvent<HTMLInputElement>) => void; value: string }; clearValue: () => void; setValue: Dispatch<SetStateAction<string>> }

    • bind: { onChange: (e: ChangeEvent<HTMLInputElement>) => void; value: string }
      • onChange: (e: ChangeEvent<HTMLInputElement>) => void
          • (e: ChangeEvent<HTMLInputElement>): void

          • Parameters

            • e: ChangeEvent<HTMLInputElement>

            Returns void

      • value: string
    • clearValue: () => void
        • (): void

        • Returns void

    • setValue: Dispatch<SetStateAction<string>>

useBooleanState

  • useBooleanState(defaultValue?: boolean): [boolean, () => void, () => void]

  • setState(true)와 같은 동작을 추상화하여 setTrue, setFalse를 사용합니다.

    example
    const [isOpenModal, openModal, closeModal] = useBooleanState();

    Parameters

    • defaultValue: boolean = false

    Returns [boolean, () => void, () => void]

useClientQueryParam

  • useClientQueryParam<T>(key: string): T | undefined
  • useClientQueryParam<T>(key: string, parser: (value: string) => T): T | undefined

  • 쿼리스트링의 키를 기반으로 값을 가져옵니다. 만약 값이 존재하지 않을 경우 undefined가 반환됩니다. useClienQueryParam은 mounted 시점과 관계없이 결과 값을 바로 반환합니다.

    example

    // https://lubycon.io?foo=1&bar=hello const foo = useClientQueryParam('foo', Number) ?? -1; // number const bar = useClientQueryParam('bar'); // string | undefined const baz = useClientQueryParam('baz') ?? 'empty'; // string

    Type parameters

    • T: string = string

    Parameters

    • key: string

    Returns T | undefined

  • Type parameters

    • T

    Parameters

    • key: string
    • parser: (value: string) => T
        • (value: string): T

        • Parameters

          • value: string

          Returns T

    Returns T | undefined

useCombinedRefs

  • useCombinedRefs<T>(...refs: Ref<T>[]): RefCallback<T>

  • 여러 개의 ref를 합칠 수 있는 훅입니다.

    example
    const Foo = forwardRef((props, fowardedRef) => {
  const ref = useRef();
  const combinedRef = useCombinedRefs(fowardedRef, ref);

  // div가 업데이트되면 ref, fowardedRef 둘 다 업데이트 됨
  return <div ref={combinedRef} />
});

    Type parameters

    • T

    Parameters

    • Rest ...refs: Ref<T>[]

    Returns RefCallback<T>

useDebounce

  • useDebounce<A>(callback: (...args: A) => void, delay: number): (...args: A) => void

  • Type parameters

    • A: unknown[]

    Parameters

    • callback: (...args: A) => void
        • (...args: A): void

        • Parameters

          • Rest ...args: A

          Returns void

    • delay: number

    Returns (...args: A) => void

      • (...args: A): void

      • Parameters

        • Rest ...args: A

        Returns void

Const useDetectEscapeKey

  • useDetectEscapeKey(): boolean

  • Escape 키가 눌렸을 때 true 반환

    example
    const isEscapeKeyPressed = useDetectEscapeKey();

console.log(isEscapeKeyPressed); // Escape 키가 눌렸을 때 true 출력

    Returns boolean

    Escape 키가 눌렸을 때 true

useDetectKeyPress

  • useDetectKeyPress(targetKey?: KeyCode, callback?: () => void): string

  • 첫 번째 매개변수로 전달된 키가 눌렸을 때 키(상태) 값을 반환합니다. 두 번째 매개변수로 전달된 함수는 전달된 키가 눌렸을 때 함수를 호출합니다.

    example
    const pressedKey = useDetectKeyPress('Escape', callback);

console.log(pressedKey); // Escape 키가 눌렸을 때 Escape 출력

    Parameters

    • Optional targetKey: KeyCode

      눌렸을 때 반환할 키 값

    • Optional callback: () => void

      눌렸을 때 실행할 함수

        • (): void

        • Returns void

    Returns string

    눌렸을 때 반환할 키 값

useDidMount

  • useDidMount(callback: () => void): void

  • 컴포넌트가 마운트 될 때 인자로 주어진 콜백 함수를 호출합니다.

    Parameters

    • callback: () => void

      마운트 될 때 호출 할 콜백 함수

        • (): void

        • Returns void

    Returns void

useDidUpdate

  • useDidUpdate(callback: () => void, dependencies: DependencyList): void

  • dependency 배열의 요소가 업데이트 됐을때 콜백 함수를 실행합니다. 첫 렌더링 때는 실행되지 않습니다.

    Parameters

    • callback: () => void

      dependency 배열의 요소가 업데이트 될 때 호출 할 콜백 함수

        • (): void

        • Returns void

    • dependencies: DependencyList

    Returns void

useElementSize

  • useElementSize(ref: RefObject<HTMLElement>): { bottom: number; height: number; left: number; right: number; top: number; width: number; x: number; y: number }

  • 인자로 받은 Ref가 참조하는 HTML 엘리먼트의 Bounding Rect를 가져옵니다.

    example
    const ref = useRef<HTMLElement>();
const { top, left, right, bottom } = useElementSize(ref);

return <div ref={ref} />

    Parameters

    • ref: RefObject<HTMLElement>

      크기를 가져올 HTML Element

    Returns { bottom: number; height: number; left: number; right: number; top: number; width: number; x: number; y: number }

    • bottom: number
    • height: number
    • left: number
    • right: number
    • top: number
    • width: number
    • x: number
    • y: number

useImpression

  • useImpression(__namedParameters: Options): (element: Element) => void

  • ref에 담긴 HTML 요소가 화면 안으로 들어오면 인자로 받은 이벤트 핸들러들을 알맞게 호출합니다.

    example
    const impressionRef = useImpression({
  onImpressionStart: () => console.log('div 노출!'),
  onImpressionEnd: () => console.log('div 숨음!'),
});

return <div ref={impressionRef} />

    Parameters

    • __namedParameters: Options

    Returns (element: Element) => void

      • (element: Element): void

      • Parameters

        • element: Element

        Returns void

Const useInfiniteScroll

  • useInfiniteScroll<T>(__namedParameters: InfiniteScroll<T>): { data: T; isLoading: boolean; ref: MutableRefObject<HTMLElement> }

  • threshold 에 닿았을때 fetcher 함수를 실행합니다.

    Type parameters

    • T

    Parameters

    • __namedParameters: InfiniteScroll<T>

    Returns { data: T; isLoading: boolean; ref: MutableRefObject<HTMLElement> }

    • data: T
    • isLoading: boolean
    • ref: MutableRefObject<HTMLElement>

Const useInterval

  • useInterval(callback: VoidFunction, delay: number): void

  • 일정 주기로 콜백 함수를 반복합니다.

    Parameters

    • callback: VoidFunction

      주기 마다 반복 할 콜백 함수

    • delay: number

      반복 주기

    Returns void

useLocalStorage

  • useLocalStorage<T>(key: string): LocalStorageNullableReturnValue<T>
  • useLocalStorage<T>(key: string, defaultValue: T): LocalStorageReturnValue<T>

  • 로컬스토리지와 지역 상태를 연결하여 리액트 내에서 사용하기 편하게 만든 훅입니다.

    example
    const [value, setValue, removeValue] = useLocalStorage('exampleKey');

    Type parameters

    • T = string

    Parameters

    • key: string

    Returns LocalStorageNullableReturnValue<T>

  • Type parameters

    • T = string

    Parameters

    • key: string
    • defaultValue: T

    Returns LocalStorageReturnValue<T>

useOverlay

  • useOverlay(): { close: () => void; open: (controller: OverlayController) => void }

  • 선언적으로 사용해야하는 컴포넌트를 open, close와 같은 함수로 열고 닫을 수 있도록 도와주는 유틸성 Hooks입니다. 하나의 useOverlay는 고유한 ID를 가진 오버레이를 생성하고, open 함수에 인자로 받은 컴포넌트를 이 오버레이에 렌더합니다.

    example
    function MyComponent() {
  const { open } = useOverlay();

  const openMyModal = () => {
    open(({ isOpen, close }) => (
      <MyModal open={isOpen} onClose={close} />
    ))
  };

  return <button onClick={openMyModal}>모달열기</button>
}

    Returns { close: () => void; open: (controller: OverlayController) => void }

    • close: () => void
        • (): void

        • Returns void

    • open: (controller: OverlayController) => void
        • (controller: OverlayController): void

        • Parameters

          • controller: OverlayController

          Returns void

useOverlayArea

  • useOverlayArea(): OverlayValues

usePreviousState

  • usePreviousState<T>(value: T): T

  • 한 단계 이전 렌더 타이밍의 값을 반환합니다. 이전 값과 현재 값을 비교하는 상황 등에 사용할 수 있습니다.

    example
    const [payMethods, setPaymethods] = useState();
const previousPayMethods = usePreviousState(payMethods);

useEffect(() => {
  if (payMethods.length > previousPayMethods.length) {
    alert('새로운 결제 수단이 추가되었습니다!');
  }
}, []);

    Type parameters

    • T

    Parameters

    • value: T

    Returns T

useQueryParam

  • useQueryParam<T>(key: string): T | undefined
  • useQueryParam<T>(key: string, parser: (value: string) => T): T | undefined

  • 쿼리스트링의 키를 기반으로 값을 가져옵니다. 만약 값이 존재하지 않을 경우 undefined가 반환됩니다. SSR의 Hydration Mismatch를 방지하기 위해 처음에는 undefined를 반환하고 mounted 이후에 해당 값의 존재 여부에 따른 결과 값을 반환합니다.

    example

    // https://lubycon.io?foo=1&bar=hello const foo = useQueryParam('foo', Number) ?? -1; // number const bar = useQueryParam('bar'); // string | undefined const baz = useQueryParam('baz') ?? 'empty'; // string

    Type parameters

    • T: string = string

    Parameters

    • key: string

    Returns T | undefined

  • Type parameters

    • T

    Parameters

    • key: string
    • parser: (value: string) => T
        • (value: string): T

        • Parameters

          • value: string

          Returns T

    Returns T | undefined

useResizeObserver

  • useResizeObserver(resizeCallback: (arg: ResizeObserverEntry) => void): MutableRefObject<HTMLElement>

  • ref에 담긴 HTML 엘리먼트의 리사이즈 여부를 옵저빙하는 ResizeObserver를 사용합니다.

    example

    function Foo () { const ref = useResizeObserver((entry) => { console.log('element', entry.target); });

    return

    }

    Parameters

    • resizeCallback: (arg: ResizeObserverEntry) => void
        • (arg: ResizeObserverEntry): void

        • Parameters

          • arg: ResizeObserverEntry

          Returns void

    Returns MutableRefObject<HTMLElement>

Const useScrollEvent

  • useScrollEvent(ref: RefObject<HTMLElement>, scrollCallback: () => void): void

  • 컴포넌트에 스크롤 이벤트를 추가하는 hook입니다. useEffect dependency로 hook의 인자인 ref, scrollCallback을 포함하고 있어 ref, scrollCallback의 레퍼런스가 변경 될 때마다 스크롤 이벤트가 바인딩됩니다. 이 부분을 참고하셔서 성능이슈가 발생하지 않도록 잘 관리해주세요.

    Parameters

    • ref: RefObject<HTMLElement>
    • scrollCallback: () => void
        • (): void

        • Returns void

    Returns void

useThrottle

  • useThrottle<A>(callback: (...args: A) => void, delay: number): (...args: A) => void

  • Type parameters

    • A: unknown[]

    Parameters

    • callback: (...args: A) => void
        • (...args: A): void

        • Parameters

          • Rest ...args: A

          Returns void

    • delay: number

    Returns (...args: A) => void

      • (...args: A): void

      • Parameters

        • Rest ...args: A

        Returns void

Const useUpload

  • useUpload(): { file: File; reset: () => void; upload: () => Promise<File> }

  • Returns { file: File; reset: () => void; upload: () => Promise<File> }

    • file: File
    • reset: () => void
        • (): void

        • Returns void

    • upload: () => Promise<File>
        • (): Promise<File>

        • Returns Promise<File>

useWillUnmount

  • useWillUnmount(callback: () => void): void

  • useWillUnmount hook 컴포넌트가 언마운트 될 때 함수를 호출합니다.

    Parameters

    • callback: () => void

      컴포넌트가 언마운트 될 때 호출 할 콜백 함수

        • (): void

        • Returns void

    Returns void

useWindowSize

  • useWindowSize(): { height: number; width: number }

withSSRSuspense

  • withSSRSuspense<T>(WrappedComponent: ComponentType<T>, options: { fallback: NonNullable<ReactNode> | null }): (props: T) => Element

  • SSRSuspense를 HoC로 사용할 수 있는 함수입니다

    example
    export default withSSRSuspense(<MyPage />, { fallback: <Fallback /> });

    Type parameters

    • T

    Parameters

    • WrappedComponent: ComponentType<T>
    • options: { fallback: NonNullable<ReactNode> | null }
      • fallback: NonNullable<ReactNode> | null

    Returns (props: T) => Element

      • (props: T): Element

      • Parameters

        • props: T

        Returns Element

hooks Functions

Const useClipboardCopy

  • useClipboardCopy(onCopyCallback: () => void): { copyString: (copyString: string) => Promise<any> }

  • 매개변수로 주어진 string을 clipboard copy하는 함수를 반환하는 hook입니다. https환경에서만 사용 가능하며, IE는 지원하지 않습니다.

    example
    const Foo = () => {
const { copyString } = useClipboardCopy();

return (
<button onClick={() => copyString('https://lubycon.io/')}>공유하기<button/>
);
};

    Parameters

    • onCopyCallback: () => void

      매개변수로 주어진 string 복사 후 실행할 callback 함수

        • (): void

        • Returns void

    Returns { copyString: (copyString: string) => Promise<any> }

    매개변수로 주어진 string을 복사할 수 있는 함수를 반환합니다.

    • copyString: (copyString: string) => Promise<any>
        • (copyString: string): Promise<any>

        • Parameters

          • copyString: string

          Returns Promise<any>

Generated using TypeDoc