🧱 45. React Native 공통 UI 컴포넌트 설계 전략 — Button, Input, Text 등 재사용성을 높이는 방법

---

앱을 개발하다 보면 같은 버튼, 같은 스타일의 입력창을
여러 곳에서 반복해서 만들게 된다.

이럴 때마다 매번 스타일을 복붙하거나,
로직을 다시 만드는 건 생산성 저하 + 유지보수 지옥의 지름길이다.

그래서 우리는 공통 UI 컴포넌트를 설계해서
스타일, 동작, 재사용성을 통일시키는 전략을 써야 한다.

이번 글은 React Native에서 실제로 많이 쓰이는 컴포넌트들을 어떻게 설계하면 좋은지 정리한 글이다.

---

✅ 왜 공통 컴포넌트가 필요한가?

• 디자인 시스템에 맞춘 UI 일관성
• 변경이 생겨도 한 곳에서만 수정 가능
• 타입과 인터페이스 명확화
• 테마(다크모드 등)와도 유연하게 연동

---

💡 Button 컴포넌트 예시

interface ButtonProps {
  label: string;
  onPress: () => void;
  variant?: 'primary' | 'outline' | 'ghost';
  disabled?: boolean;
}

export default function Button({ label, onPress, variant = 'primary', disabled = false }: ButtonProps) {
  const backgroundColor = {
    primary: '#007bff',
    outline: 'transparent',
    ghost: 'transparent',
  }[variant];

  const borderColor = variant === 'outline' ? '#007bff' : 'transparent';

  return (
    <TouchableOpacity
      onPress={onPress}
      disabled={disabled}
      style={{
        backgroundColor,
        borderWidth: 1,
        borderColor,
        paddingVertical: 12,
        paddingHorizontal: 24,
        borderRadius: 6,
        opacity: disabled ? 0.5 : 1,
      }}
    >
      <Text style={{ color: variant === 'primary' ? '#fff' : '#007bff' }}>{label}</Text>
    </TouchableOpacity>
  );
}

✅ variant prop으로 스타일 분기
✅ disabled 처리
✅ 재사용성 높은 구조

---

📝 Text 컴포넌트 설계

interface TextProps {
  children: React.ReactNode;
  size?: 'sm' | 'md' | 'lg';
  weight?: 'regular' | 'bold';
  color?: string;
}

export default function AppText({ children, size = 'md', weight = 'regular', color = '#000' }: TextProps) {
  const fontSize = {
    sm: 14,
    md: 16,
    lg: 20,
  }[size];

  const fontWeight = weight === 'bold' ? '700' : '400';

  return (
    <Text style={{ fontSize, fontWeight, color }}>{children}</Text>
  );
}

• 텍스트 스타일을 시스템에 맞게 정리
• 크기, 굵기, 색상을 공통 기준으로 관리

---

🔑 설계할 때 신경 써야 할 포인트

항목	설명
prop 확장성	variant, size, 상태별 분기 처리
테마 연동	useTheme() or styled-components 사용
플랫폼 대응	iOS/Android에서 다르게 보이는 경우 분기
상태	isLoading, disabled, error 등 명확하게 처리
테스트 용이성	testID 부여로 테스트 가능하게 설계

---

⚙️ UI 라이브러리와 병행도 가능

• react-native-paper, native-base, ui-kitten 같은 라이브러리를 쓰더라도
  → 공통 컴포넌트에서 래핑(Wrapping) 해서 스타일과 인터페이스 통일 가능

---

🧠 실전 경험

처음엔 그냥 버튼마다 따로 만들었는데,
앱이 커지면서 디자인 팀에서 색상, 모서리, 그림자 스타일이 바뀌니까
모든 버튼을 다 수정해야 했다.

그때부터 공통 컴포넌트를 만들어
버튼, 텍스트, 입력창, 모달 등 주요 UI를 디자인 시스템 기반으로 만들었고
생산성, 유지보수, 팀 협업 효율까지 훨씬 좋아졌다.

---

🧱 “UI는 쌓는 것이 아니라, 설계하는 것이다.”

---