컴포넌트 비밀이 새는 것을 멈추세요: React에서 KIP 패턴 소개

Source: Dev.to

React 컴포넌트를 엄격한 마이크로‑도메인으로 다루면 “God File” 안티패턴을 영원히 해결할 수 있습니다.

우리는 모두 그런 경험이 있습니다. 간단한 React 컴포넌트를 만들기 시작합니다. 처음엔 UI뿐이죠. 그 다음 상태(state)를 추가하고, 커스텀 인터페이스를 만들고, 날짜를 포맷하는 헬퍼 함수까지 추가합니다. 3주가 지나면 순수했던 UserProfile.tsx가 1,000줄짜리 “God File”로 변해버립니다.

이를 해결하려고 파일을 나눕니다. useUserProfile.ts와 userProfileUtils.ts를 만들죠. 그런데 갑자기 그 내부 파일들이 공유 폴더에 놓여 전역 네임스페이스를 오염시키고, 더 심각하게는 다른 개발자들이 여러분의 특정 유틸을 앱의 무관한 부분에서 가져다 쓰기 시작합니다! 컴포넌트의 내부 비밀이 새어나갑니다.

The KIP (Keep It Private) Pattern

KIP는 React용 아키텍처 패턴으로, 컴포넌트 수준에서 엄격한 캡슐화를 강제합니다. 크기와 관계없이 모든 컴포넌트를 독립적인 마이크로‑도메인으로 취급합니다.

• 로직, 타입, 유틸리티, 서브‑컴포넌트(슬롯) 은 해당 컴포넌트 폴더 안에 존재하며, 명시적으로 private 로 표시됩니다.
• 외부에서는 단 하나의 게이트웨이만을 통해 컴포넌트와 상호작용할 수 있습니다.

_ Prefix Means STRICTLY PRIVATE

언더스코어(_)가 붙은 파일(예: _hook.ts, _type.ts, _util.ts, _component.tsx)은 해당 컴포넌트의 내부 구현 상세임을 나타냅니다. 이들은 선언합니다:

“나는 private이다. 이 폴더 밖에서 직접 import 하지 마라.”

index.ts Is the Gate

index.ts 파일은 궁극적인 게이트키퍼(API 경계) 역할을 합니다. private _ 파일들에서 필요한 것만 import하고 선별적으로 애플리케이션에 export합니다.

// index.ts (example)
export { default as MyComponent } from './_component';
export type { MyComponentProps } from './_type';

Progressive Scaling: From Button to Dashboard

KIP는 단순 컴포넌트는 물론 복잡한 컴포넌트에도 적용됩니다. 코드를 깔끔하게 유지하기 위해 필요한 만큼의 private 스코프만 만들면 됩니다.

Level 1 – Simple Component (e.g., Button)

Button/
├─ _type.ts
├─ _component.tsx
└─ index.ts

Level 2 – Medium Component (e.g., LoginForm)

LoginForm/
├─ _hook.ts
├─ _util.ts
├─ _type.ts
├─ _component.tsx
└─ index.ts

Level 3 – Complex Component (e.g., DataGrid)

DataGrid/
├─ _hook.ts
├─ _util.ts
├─ _type.ts
├─ _store.ts
├─ _slots.tsx
├─ _component.tsx
└─ index.ts

Benefits of the KIP Pattern

• True Separation of Concerns (SoC): 1,000줄 파일이 사라집니다. 로직이 전문화된 마이크로‑파일로 분리돼 디버깅이 집중됩니다.
• API Boundary via index.ts: 컴포넌트가 엄격한 NPM 패키지처럼 동작합니다; 공개된 표면만 export됩니다.
• Zero Global Namespace Pollution: 특정 컴포넌트에만 필요한 유틸리티는 private _util.ts에 머무르고, 전역 src/utils 폴더는 진정한 전역 헬퍼만을 위해 남겨둡니다.
• Instant Scalability: 컴포넌트가 성장하면 private 생태계가 확장될 뿐, 부패하지 않습니다.

컴포넌트를 단순 파일이 아니라 도메인으로 다루세요. Keep It Private.

실제로 보고 싶다면 공식 보일러플레이트를 확인해 보세요:
https://github.com/Miladxsar23/kip-pattern