메인 콘텐츠로 건너뛰기

빠른 시작

이 페이지는 설치를 마쳤고, theme.css와 사용할 컴포넌트 스타일을 가져왔다고 가정합니다.

install 불필요​

@lh-ui/react에는 플러그인 메커니즘이 없습니다: 전부 명명된 내보내기이며, 필요한 것만 가져다 쓰면 됩니다.

import { LhButton } from '@lh-ui/react'
import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/button'

export default function App() {
  return <LhButton type="primary">시작하기</LhButton>
}

제어와 비제어​

제어형 컴포넌트는 value + onChange(제어)와 defaultValue(비제어)를 동시에 지원하며, 의미론이 React 네이티브 form과 일치합니다:

import { useState } from 'react'
import { LhInput } from '@lh-ui/react'

function Demo() {
  const [value, setValue] = useState('')

  return (
    <>
      {/* 제어형 */}
      <LhInput value={value} onChange={(val) => setValue(val)} />

      {/* 비제어형 */}
      <LhInput defaultValue="기본값" />
    </>
  )
}
이벤트 콜백은 2개 매개변수

모든 form 컴포넌트의 onChange는 (value, event) 두 개의 매개변수를 갖습니다: 첫 번째는 새 값, 두 번째는 네이티브 이벤트. 이는 lh-ui-plus의 emit('change', [val, e])와 동일한 구조로, Vue에서 마이그레이션하기 편합니다.

전역 설정​

LhConfigProvider로 전역 크기, 언어, 테마 변수를 내립니다:

import { LhConfigProvider } from '@lh-ui/react'

export default function App() {
  return (
    <LhConfigProvider size="middle" locale="zh-CN">
      <YourApp />
    </LhConfigProvider>
  )
}

LhConfigProvider로 감싸지 않아도 컴포넌트는 에러를 내지 않습니다 — 소비 측에 모든 필드가 undefined인 폴백 기본값이 있기 때문입니다.

명령형 서비스​

message 등의 명령형 서비스는 지연 생성된 싱글톤 컨테이너에 마운트되며, 첫 호출에서 React root를 생성합니다:

import { message, notification, loading } from '@lh-ui/react'
import '@lh-ui/react/style/message'

message.success('저장 성공')
notification.success({ title: '저장 성공', content: '작품이 갤러리에 게시되었습니다.' })
loading.show({ text: '제출 중…' })

세 서비스의 역할: message는 가벼운 상단 토스트, notification은 제목 / 본문이 있는 네 귀퉁이 알림, loading은 전체 화면 또는 일부 로딩 오버레이. 자세한 내용은 각 컴포넌트 문서를 참조하세요.

lh-ui-plus와의 관계​

@lh-ui/react와 @lh-ui/vue3(lh-ui-plus)는 동일한 출처와 동일한 구조입니다:

  • 컴포넌트 로직이 완전히 동일하며 @lh-ui/share/core에서 오고, 두 라이브러리 모두 로직 사본을 갖지 않습니다
  • 스타일이 완전히 동일하며 @lh-ui/share/styles에서 오고, BEM 클래스명이 1:1로 대응합니다
  • 프로퍼티 이름과 의미가 같고, React 관용 표기로만 다듬어집니다 (v-model → value/onChange 등)

Vue에서 마이그레이션할 때는 마이그레이션 가이드를 읽어보세요.

서버 사이드 렌더링 (SSR)​

컴포넌트는 SSR에 안전합니다: DOM 조작은 모두 useEffect / useIsomorphicLayoutEffect 내부에서 실행되고, useLhLocale은 useSyncExternalStore로 SSR 스냅샷을 제공합니다. 명령형 서비스(message 등)는 서버에서 호출되어도 경고만 출력하고 no-op합니다.