설치

환경 요구

• React ^18.0.0 또는 ^19.0.0
• TypeScript >= 5.0 (선택이지만 권장)

@lh-ui/react의 유일한 런타임 종속성은 @lh-ui/share입니다 — 패밀리의 프레임워크 독립 공유 레이어(컴포넌트 로직, 스타일, 테마, 텍스트). peer 종속성은 react와 react-dom뿐입니다.

패키지 매니저로 설치

pnpm add @lh-ui/react

npm install @lh-ui/react

yarn add @lh-ui/react

bun add @lh-ui/react

스타일 가져오기

@lh-ui/react는 주문형 도입 전략을 사용합니다(@lh-ui/vue2에 맞춤): 패키지 진입점에서 스타일을 주입하지 않고, 테마 변수와 컴포넌트 스타일을 각각 가져옵니다.

// 테마 변수 (필수): 디자인 토큰과 다크 모드 변수 포함
import '@lh-ui/react/theme.css'

// 컴포넌트 스타일 (주문형): 사용하는 컴포넌트마다 한 줄씩 가져옵니다
import '@lh-ui/react/style/button'
import '@lh-ui/react/style/input'

테마 CSS와 컴포넌트 CSS의 클래스명이 완전히 일치하므로, @lh-ui/share에서 동일한 SCSS 원본을 가져와 직접 컴파일할 수도 있습니다:

@use '@lh-ui/share/styles/theme/common/var.scss';
@use '@lh-ui/share/styles/button';

왜 전체 주입이 아닌가요

React 생태계에서는 주문형 도입이 주류이고, 전체 스타일 side-effect는 tree-shaking을 망가뜨립니다. 스타일 진입점을 사용자에게 맡기면, 번들러가 사용하지 않는 컴포넌트 스타일을 정확히 잘라냅니다.

다크 모드

다크 변수는 theme-dark.css에 있으며 theme.css와 상호 배타적입니다(둘 중 하나 선택). 또는 런타임에 useLhTheme / useLhPresetTheme로 전환할 수 있습니다:

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

function App() {
  const { theme, toggleTheme } = useLhTheme()
  return <button onClick={toggleTheme}>{theme === 'dark' ? '라이트 모드로 전환' : '다크 모드로 전환'}</button>
}

브라우저 지원

최신 브라우저(Chrome / Edge / Firefox / Safari의 최신 안정 버전 2개). 컴포넌트는 CSS 커스텀 프로퍼티(var(--lh-*))를 많이 사용하며, IE는 지원하지 않습니다.