리액트 네이티브 스타일링 정리

React Native의 스타일링 시스템은 프레임워크를 통해 개발자가 JavaScript 및 React를 사용하여 iOS 및 Android용 기본 앱을 만들 수 있는 방법의 핵심적인 측면이다. 스타일 지정에 CSS가 사용되는 웹 기반 애플리케이션과 달리 React Native는 기본 레이아웃과 성능을 염두에 두고 CSS와 유사한 스타일의 하위 집합을 기반으로 하는 다른 시스템을 사용한다.

1. 스타일 지정을 위한 JavaScript 개체

React Native에서 스타일은 CSS 파일이 아닌 JavaScript 객체를 사용하여 정의된다. 이러한 객체에는 CSS와 유사하지만 기본 모바일 성능에 최적화된 속성이 포함되어 있다. 스타일은 style 소품을 통해 구성 요소에 전달된다.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  text: {
    fontSize: 20,
    color: '#333',
  },
});

export default App;

• 스타일은 스타일을 최적화하고 유효성을 검사하는 데 도움이 되는 StyleSheet.create 메서드를 사용하여 생성된다.
• style 소품은 View 및 Text 구성 요소 모두에 전달된다.

2. CSS와의 차이점

React Native의 스타일링 구문은 CSS와 유사하지만 특정 기능들이 부족하다.

• No cascade: React Native에는 CSS와 같은 계단식 스타일 시스템이 없다. 각 스타일은 적용되는 구성요소에 따라 다르다.
• No inheritance: 하위 요소가 특정 스타일을 상속할 수 있는 HTML과 달리 React Native 구성 요소는 명시적으로 전달되지 않는 한 상위 요소에서 스타일을 상속하지 않는다.
• Limited selectors: .class, #id 또는 element와 같은 CSS 선택기는 지원되지 않는다. 스타일은 style 소품을 통해 직접 적용된다.

3. 측정 단위

• React Native는 CSS에서 사용되는 전통적인 픽셀 단위('px')가 아닌 밀도 독립적 픽셀(DIP)을 사용한다. 이렇게 하면 픽셀 밀도가 다양한 화면에서 UI가 보기 좋게 표시된다.
• em, rem, % 또는 vh와 같은 단위를 사용할 수 있는 웹과 달리 React Native는 크기, 여백, 패딩 등에 대해 절대 숫자에만 거의 전적으로 의존한다.

4. 레이아웃용 Flexbox

React Native는 레이아웃 관리를 위해 Flexbox에 크게 의존한다. Flexbox는 컨테이너 내에서 구성 요소를 정렬하고 배포하는 효율적인 방법을 제공하는 레이아웃 모델이다.

React Native의 주요 Flexbox 속성은 다음과 같다:

• flexDirection: 기본 축(행 또는 열)을 결정한다. 기본값은 'column'인 반면 웹 Flexbox에서는 기본값이 'row'이다.
  • row: 하위 구성요소가 가로로 배치
  • column: 하위 구성요소가 수직으로 배치
• justifyContent: 기본 축을 따라 하위 항목을 정렬한다.
  • 값: flex-start, flex-end, center, space-between, space-around, space-evenly
• alignItems: 교차축을 따라 하위 요소를 정렬한다.
  • 값: stretch(기본값), flex-start, flex-end, center.
• flex: 형제에 비해 구성 요소가 어떻게 성장해야 하는지 제어한다. flex: 1이 있는 구성 요소는 flex가 있는 다른 구성 요소가 경쟁하지 않는 경우 사용 가능한 공간을 모두 차지한다.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

 

 

5. 플랫폼별 스타일

React Native는 Platform 모듈이나 조건부 논리를 통해 플랫폼별 스타일을 허용한다.

• 앱이 iOS에서 실행되는지, Android에서 실행되는지에 따라 조건부로 스타일을 적용할 수 있다.

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  text: {
    ...Platform.select({
      ios: {
        fontFamily: 'Arial',
      },
      android: {
        fontFamily: 'Roboto',
      },
    }),
  },
});

 

여기서 Platform.select는 플랫폼에 따라 적절한 글꼴이 사용되도록 보장해준다.

 

6. 스타일시트와 인라인 스타일

React Native는 스타일을 정의하는 두 가지 주요 방법을 제공한다.

StyleSheet.create: 이 방법은 유효성 검사와 더 나은 성능을 제공하므로 선호된다. 스타일을 캐시하고 네이티브 브리지에 맞게 최적화한다.
인라인 스타일: 스타일은 인라인 JavaScript 개체로 직접 전달될 수도 있다. 그러나 이는 모든 렌더링의 스타일을 다시 계산하므로 효율성이 떨어진다.

<View style={{ backgroundColor: 'blue', padding: 10 }} />

인라인 스타일은 간단한 사용 사례에 작동하지만 보다 복잡한 스타일에는 StyleSheet.create를 사용하는 것이 좋다.

 

7. 스타일 결합

style prop에 배열을 전달하여 단일 구성요소에 대해 여러 스타일을 결합할 수 있다.

const baseStyle = {
  color: 'black',
  fontSize: 18,
};

const boldStyle = {
  fontWeight: 'bold',
};

<Text style={[baseStyle, boldStyle]}>Bold Text</Text>

이 경우 baseStyle과 boldStyle의 스타일이 모두 적용된다. 충돌이 있는 경우 배열의 뒷부분에 있는 스타일이 이전 스타일을 재정의한다.

 

8. 동적 및 조건부 스타일

스타일은 JavaScript 개체이므로 상태, 소품 또는 기타 논리를 기반으로 조건부 스타일이나 동적 스타일을 쉽게 적용할 수 있다.

const isActive = true;
const styles = {
  text: {
    color: isActive ? 'green' : 'red',
  },
};

동적 스타일을 사용하여 사용자 작업, 화면 크기 등에 따라 다양한 스타일을 적용할 수 있다.

 

9. 그림자 및 테두리 속성

React Native는 기본 그림자 및 테두리 속성을 지원한다.

• 그림자 속성: iOS에서 사용할 수 있다.
• shadowColor, shadowOffset, shadowOpacity, shadowRadius.
• Elevation(Android 그림자용): Android에서는 elevation 속성을 사용하여 그림자가 생성된다.

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: '#fff',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.8,
    shadowRadius: 3,
    elevation: 5, // 안드로이드 그림자
  },
});

 

10. 의사 클래스 및 미디어 쿼리

React Native는 :hover, :focus 또는 :before와 같은 의사 클래스를 지원하지 않는다. 대신 JavaScript 로직(예: 사용자 상호 작용 이벤트)을 사용하여 이러한 상태를 관리해야 한다.
마찬가지로 미디어 쿼리는 기본적으로 지원되지 않지만 react-native-Response와 같은 타사 라이브러리를 사용하거나 Dimensions를 쿼리하여 다양한 화면 크기를 수동으로 처리할 수 있다.

 

11. 반응형 디자인

React Native는 기본적으로 미디어 쿼리를 제공하지 않지만 다음을 통해 반응형 레이아웃을 만들 수 있다.

- 'Dimensions' 사용

import { Dimensions } from 'react-native';
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

기기 크기에 따라 UI 크기를 조정하기 위한 'react-native-Response' 또는 'react-native-size-matters'와 같은 라이브러리이다.

 

12. 애니메이션 및 변형

React Native는 Animated 라이브러리를 통해 기본적으로 애니메이션을 지원하며 구성 요소에 애니메이션 스타일을 적용할 수 있다. 또한 rotate, scale, translateX 등과 같은 transform 속성을 사용하여 시각적 모양을 동적으로 조작할 수 있다.

const animatedValue = new Animated.Value(0);
const animatedStyle = {
  transform: [{ translateY: animatedValue }],
};