---
name: Performance & Rendering
description: 성능 & 렌더링 원칙. 독립 비동기 병렬 처리, barrel import 지양, 비원시 props 기본값 호이스팅.
type: coding-standard
category: performance
---

> 출처: 팀 공통 원칙 문서 `principles/` 2026-07-03 발췌. 원칙 개정은 원본(팀 공통 문서) 먼저, 이 사본은 따라간다.

# 성능 & 렌더링

## P-024 독립 비동기 작업은 병렬 처리

서로 의존성 없는 API 호출은 `Promise.all()`로 병렬 처리한다.
순차 실행은 불필요한 대기 시간을 만든다.

```typescript
// ❌ 순차 실행 — A 완료 후 B 시작, 총 대기시간 = A + B
const user = await fetchUser();
const posts = await fetchPosts();

// ✅ 병렬 실행 — 동시에 시작, 총 대기시간 = max(A, B)
const [user, posts] = await Promise.all([fetchUser(), fetchPosts()]);
```

## P-025 barrel import 지양

`import { A, B, C } from '@/shared'` 같은 배럴 파일 import는 번들러가 트리 쉐이킹하지 못할 수 있다.
직접 경로에서 import한다.

```typescript
// ❌ 배럴 import — 사용하지 않는 코드가 번들에 포함될 수 있음
import { Button, Input, Modal } from '@/shared';

// ✅ 직접 경로 import
import { Button } from '@/shared/ui/Button';
import { Input } from '@/shared/ui/Input';
```

## P-026 비원시 props에 기본값 호이스팅

컴포넌트 기본 prop으로 객체/배열 리터럴을 사용하면 매 렌더마다 새 참조가 생긴다.
모듈 레벨 상수로 호이스팅해 참조 안정성을 보장한다.

```typescript
// ❌ 매 렌더마다 [] 새 참조 — 자식 컴포넌트 불필요한 리렌더 유발
function Component({ items = [], style = {} }) { ... }

// ✅ 모듈 레벨 상수로 호이스팅 — 참조 안정
const EMPTY_ITEMS: Item[] = [];
const DEFAULT_STYLE: CSSProperties = {};

function Component({ items = EMPTY_ITEMS, style = DEFAULT_STYLE }) { ... }
```