StyleSheet — 개요, React Native에서 스타일 만들기

StyleSheet란?

StyleSheet — 컴포넌트 스타일을 정의하기 위한 내장 React Native API입니다. 웹 개발의 CSS와 달리 RN은 스타일을 설명하기 위해 JavaScript 객체를 사용합니다. StyleSheet.create — 핵심 메서드 — 스타일 객체를 받아 숫자 ID가 있는 객체를 반환합니다.

StyleSheet는 React Native 코어의 일부이며 추가 패키지 설치가 필요하지 않습니다. Meta(2026년)에 따르면 React Native 프로젝트의 95%가 정적 스타일에 StyleSheet.create를 사용합니다. 대안: styled-components, Emotion, NativeWind(RN용 Tailwind) — 하지만 내장 StyleSheet가 코어의 표준으로 남아 있습니다.

역사와 진화

React Native(2015년) 초기 버전에서는 스타일이 독점적으로 인라인 객체로 정의되었습니다. StyleSheet.create는 RN 0.4에서 최적화로 등장했습니다. 개념은 CSS에서 차용했습니다: 가독성과 성능을 위해 스타일을 로직에서 분리하세요. 수년에 걸쳐 API가 확장되었습니다: absoluteFill, hairlineWidth, flatten이 추가되었습니다.

StyleSheet.create vs 인라인 스타일

StyleSheet.create와 인라인 스타일의 차이는 성능에 매우 중요합니다. 인라인 스타일은 컴포넌트가 렌더링될 때마다 생성되는 일반 JavaScript 객체입니다. StyleSheet.create — 모듈 로드 시 한 번 생성되어 숫자 ID로 변환되는 객체입니다.

인라인 스타일을 전달하면 React Native가 매번 전체 객체를 JavaScript-Native 브리지를 통해 보냅니다. 복잡한 스타일의 컴포넌트의 경우 렌더링할 때마다 수십 개의 속성이 전송됩니다. StyleSheet.create는 숫자 ID만 전달하여 브리지 부하를 줄입니다.

// StyleSheet.create — 최적화된 접근 방식
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

// 인라인 스타일 — 렌더링할 때마다 새 객체 생성
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

<Text style={styles.title}>Title</Text>

인라인 사용 시기: 상태에 의존하는 동적 스타일의 경우(눌림, 선택됨, 활성화됨). 정적 스타일에는 항상 StyleSheet.create를 사용하세요. 규칙: 정적 → create, 동적 → 인라인 함수.

StyleSheet로 Flexbox 레이아웃

Flexbox — React Native의 유일한 레이아웃 메커니즘(CSS Grid는 지원되지 않고 float는 없음). StyleSheet.create는 플렉스 컨테이너와 그 자식 요소를 설명하는 데 사용됩니다. 주요 속성: flex(채우기 계수), flexDirection(row | column), justifyContent, alignItems.

기본적으로 React Native의 flexDirection은 column입니다(CSS에서는 row). 웹 개발에서 전환할 때 가장 먼저 기억해야 할 사항입니다. 모든 View 컴포넌트는 기본적으로 플렉스 컨테이너입니다. 요소를 중앙에 배치하려면 alignItems: 'center' + justifyContent: 'center'를 사용하세요.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
});

중요: React Native에서는 모든 크기가 단위 없이 지정됩니다(숫자만). 백분율은 작동하지만 부모에 대한 너비와 높이에만 적용됩니다. margin과 padding은 숫자를 허용합니다. 반응형을 위해 백분율 대신 flex를 사용하세요 — 여러 화면에서 더 안정적입니다.

StyleSheet API: create, flatten, hairlineWidth, absoluteFill

StyleSheet API에는 create 외에도 여러 메서드가 포함됩니다. StyleSheet.flatten은 스타일 배열을 단일 객체로 병합합니다 — 합성 및 타사 컴포넌트에 스타일 전달에 유용합니다. StyleSheet.hairlineWidth는 기기에서 최소 가시 선 너비를 반환합니다.

StyleSheet.absoluteFill — 미리 정의된 스타일 { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }. 오버레이 레이어, 모달 창 및 전체 화면 절대 위치 지정에 사용됩니다. StyleSheet.absoluteFillObject — 확장을 위한 객체로 동일한 기능을 제공합니다.

// flatten — 스타일 병합
const base = StyleSheet.create({
  button: { padding: 12, borderRadius: 8 },
  primary: { backgroundColor: 'blue' },
});

const combined = StyleSheet.flatten([base.button, base.primary]);
// { padding: 12, borderRadius: 8, backgroundColor: 'blue' }

// hairlineWidth — 최소 선
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth는 구분선과 테두리에 유용합니다 — 화면 밀도에 관계없이 항상 1 물리적 픽셀로 표시됩니다. Retina 디스플레이에서는 0.5 논리적 포인트, 일반 디스플레이에서는 1 포인트입니다. 엄격하게 특정 크기여야 하는 요소에는 hairlineWidth를 사용하지 마세요.

Dimensions API로 반응형 레이아웃

Dimensions API는 다양한 화면 크기에 대한 반응형 레이아웃을 위해 StyleSheet와 함께 사용됩니다. Dimensions.get('window')는 창의 너비와 높이를 반환합니다. 화면 회전 시 반응형 업데이트를 위해 React Native의 useWindowDimensions 훅을 사용하세요.

StyleSheet.create는 CSS와 같은 미디어 쿼리를 지원하지 않지만 create 내에서 Dimensions를 기반으로 값을 계산하거나 함수를 통해 동적 스타일을 사용할 수 있습니다. 중단점의 경우 다양한 너비 범위에 대해 별도의 스타일을 만드세요.

import { useWindowDimensions } from 'react-native';

const ResponsiveCard = () => {
  const { width } = useWindowDimensions();
  const isLarge = width > 768;

  return (
    <View style={[styles.card, isLarge && styles.cardLarge]}>
      <Text>Responsive card</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    width: '100%',
    padding: 16,
  },
  cardLarge: {
    width: '50%',
    alignSelf: 'center',
  },
});

useWindowDimensions는 화면 회전 및 Split View가 있는 태블릿에서 창 크기 변경 시 자동으로 업데이트됩니다. SSR(React Native Web)의 경우 서버와 클라이언트 간의 불일치를 방지하기 위해 컴포넌트 마운트 후 Dimensions.get이 호출되는지 확인하세요.

프로젝트에서 스타일 구성

StyleSheet 구성은 프로젝트의 유지 관리성과 코드 재사용에 영향을 미칩니다. 세 가지 접근 방식: 컴포넌트 내의 로컬 스타일(컴포넌트 옆의 styles.js), 전역 스타일(색상, 간격, 타이포그래피 상수가 있는 theme.js), 합성을 통한 모듈식 스타일.

권장 구조: theme.js(색상, 크기, 타이포그래피 상수 포함); 각 컴포넌트 옆에 Component.styles.js(해당 특정 스타일용); 기본 스타일과 특정 스타일을 결합하기 위한 StyleSheet.flatten. 대규모 프로젝트의 경우 테마 생성을 포함한 디자인 시스템을 사용하세요.

// theme.js — 전역 상수
export const colors = {
  primary: '#6200EE',
  background: '#FFFFFF',
  text: '#1C1B1F',
  surface: '#F5F5F5',
};

export const spacing = {
  xs: 4, sm: 8, md: 16, lg: 24, xl: 32,
};

export const typography = {
  h1: { fontSize: 24, fontWeight: 'bold', lineHeight: 32 },
  body: { fontSize: 16, lineHeight: 24 },
};

// Button.styles.js
import { colors, spacing, typography } from './theme';

export default StyleSheet.create({
  button: {
    backgroundColor: colors.primary,
    paddingVertical: spacing.sm,
    paddingHorizontal: spacing.lg,
    borderRadius: 8,
  },
  text: {
    ...typography.body,
    color: '#FFFFFF',
    textAlign: 'center',
  },
});

모듈식 구성의 이점: 색상과 간격에 대한 단일 진실 공급원, 단순화된 리팩토링(primary 변경 시 모든 버튼 업데이트), flatten을 통한 스타일 재사용, 코드 가독성 및 예측 가능성. TypeScript 프로젝트의 경우 declare module을 통해 테마에 대한 유형을 추가하세요.