설치와 사용

npm install @nui-kit/react

peer dependency 는 react 와 react-dom 이다. next 와 react-hook-form 은 optional 이며 각각 ButtonLink 와 RHF 래퍼에서만 쓰인다. Node 는 18.18.0 이상이 필요하다.

스타일 불러오기

CSS 는 JS 에 포함되지 않는다. 직접 import 한다.

import "@nui-kit/react/styles/index.css";

일부 컴포넌트만 쓴다면 파일을 나눠 가져온다. tokens.css 는 나머지 전부가 참조하므로 반드시 한 번 넣는다. CSS 파일 이름은 서브패스 이름과 같다.

import "@nui-kit/react/styles/tokens.css";
import "@nui-kit/react/styles/button.css";

preflight

기본 배포에 reset 이 없다. 컴포넌트가 UA 기본 스타일을 스스로 정규화하므로 대부분 필요하지 않다. reset 이 전혀 없는 프로젝트만 추가한다.

import "@nui-kit/react/styles/preflight.css";

컴포넌트 가져오기

// 배럴
import { Button, Field, Textfield } from "@nui-kit/react";

// 서브패스 — 번들 최소화
import { Button } from "@nui-kit/react/button";

// react-hook-form 래퍼
import { RHFTextfield } from "@nui-kit/react/rhf";

배럴과 서브패스 중 어느 쪽으로 가져와도 React Context 를 공유한다. Field 와 Textfield 를 다른 경로에서 가져와도 연동이 끊기지 않는다.

Search 와 Password 는 서브패스가 따로 없다. Textfield 계열이라 textfield 서브패스에 함께 들어 있고 CSS 도 textfield.css 하나로 끝난다.

Server Component

Server Component 가 클라이언트 모듈을 import 하면 React 는 client reference 프록시로 치환한다. 이 프록시에서 정적 프로퍼티는 undefined 로 읽힌다. dot notation 이 런타임에만 깨지는 이유다.

타입 검사와 빌드는 통과하고 렌더 시점에 Element type is invalid 가 난다.

// ❌ Server Component
<Field.Label>이름</Field.Label>

// ✅ named export
import { FieldLabel } from "@nui-kit/react";
<FieldLabel>이름</FieldLabel>

Client Component 안에서는 dot notation 을 그대로 쓴다.

커스터마이징

치수와 모양은 컴포넌트별 CSS 변수로 바꾼다. 색은 브랜드 프리셋에서 고르거나 className 으로 직접 지정한다. 컴포넌트별 색 변수는 제공하지 않는다.

• 커스터마이징 — 공개 변수 40개와 막아둔 것
• 브랜드 색 고르기 — 프리셋 185색

--nui-_ 로 시작하는 변수는 내부 배선이다. 덮어쓰면 variant 가 깨진다.