[RN] 스타일링

React Native에서의 스타일링은 React에서 웹 애플리케이션을 스타일링하는 방법과 몇 가지 중요한 차이점이 있다. React Native는 CSS와 유사한 문법을 사용하지만, 정확히 같은 CSS가 아니며, 스타일은 JavaScript 객체로 작성된다.

React Native 스타일링의 특징:

1. 인라인 스타일: React Native에서는 스타일을 직접 컴포넌트에 인라인으로 적용할 수 있다. 하지만 이 방법은 재사용성이 떨어지고 관리하기 어렵다는 단점이 있다.
2. StyleSheet 생성: StyleSheet.create를 사용하여 스타일 객체를 만들고, 이를 컴포넌트에 적용한다. 이 방법은 성능을 최적화하고, 스타일을 모듈화하여 재사용할 수 있다.
3. 캐멀 케이스 스타일 속성: CSS와 달리, React Native에서는 background-color 대신 backgroundColor와 같이 캐멀 케이스를 사용한다.
4. 단위 생략: 모든 치수는 단위 없이 숫자로 표현되며, 이는 '밀도 독립적 픽셀(density-independent pixels)'을 의미한다.

React Native 스타일링의 장단점:

장점:

• 플랫폼 일관성: iOS와 Android에서 일관된 스타일을 쉽게 유지할 수 있다.
• 자동 단위 변환: 픽셀 단위를 신경 쓸 필요 없이, 모든 치수는 자동으로 단위가 적용된다.
• 성능: StyleSheet.create를 사용하면 스타일 객체가 최적화되어 앱의 성능이 향상된다.

단점:

• CSS의 모든 속성 지원하지 않음: :hover와 같은 일부 CSS 선택자와 속성은 지원되지 않는다.
• 미디어 쿼리 부재: 반응형 디자인을 위한 미디어 쿼리가 없으며, 대신 디바이스의 차원을 직접 계산해야 한다.

예시 코드:

React에서의 CSS 스타일링:

/* CSS 파일 */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* React 컴포넌트 */
import './Button.css';

function Button() {
  return <button className="button">Click me</button>;
}

React Native에서의 스타일링:

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

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

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

export default App;

위 예시에서 React Native는 StyleSheet.create를 사용하여 스타일을 정의하고, 컴포넌트에 적용한다. 이 방식은 React Native의 성능 최적화를 위해 권장되는 방식이다.