컴포넌트 스타일링

CSS가 보급되 ㄴ이후, stly 블럭을 사용해서 코딩하는게 일반적으로 되었다.
이번에는, springboot때부터 사용해 왔던 스타일 박스에 대해 알아보고, 모바일 화면의 배치에 대해 알아보자.

리액트 네이티브에서 컴포넌트 스타일링은 웹의 CSS와 유사하지만, 모바일 환경에 맞게 조정된 방식으로 이루어진다. 아래에서 리액트 네이티브의 View 컴포넌트와 스타일링에 대해 상세히 설명하겠다.

1. View 컴포넌트와 CSS 박스 모델

View 컴포넌트는 리액트 네이티브에서 레이아웃을 구성하는 기본 컴포넌트이다. 이는 웹의 <div>와 유사하며, 내부에 자식 컴포넌트를 배치하고 스타일링을 적용할 때 사용된다.

CSS 박스 모델은 웹에서 요소의 레이아웃을 이해하는 기본 개념이다. width, height, margin, padding, border를 사용하여 요소의 크기와 위치를 정의한다. 리액트 네이티브에서도 비슷한 개념이 적용되지만, 스타일 속성의 이름과 사용법에 약간의 차이가 있다.

2. Platform과 Dimensions API

• Platform API:
  • Platform 모듈은 현재 앱이 실행되고 있는 플랫폼(iOS, Android 등)을 확인할 수 있게 해준다.
  • Platform.select() 메서드를 사용하여 플랫폼별로 서로 다른 스타일 값을 설정할 수 있다.

  import { Platform } from 'react-native';
  
  const styles = StyleSheet.create({
    container: {
      backgroundColor: Platform.select({
        ios: 'blue',      // iOS에서 배경색을 파란색으로 설정한다
        android: 'green', // Android에서 배경색을 초록색으로 설정한다
      }),
    },
  });
  

• Dimensions API:
  • Dimensions 모듈은 화면의 크기와 방향을 가져오는 데 사용된다.
  • Dimensions.get('window')를 호출하여 현재 화면의 너비와 높이를 가져올 수 있다.

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

3. View 컴포넌트의 backgroundColor 스타일 속성

• backgroundColor:
  • View의 배경색을 설정하는 데 사용된다. 색상 값은 색상 이름(예: ‘red’), 헥스 코드(예: ‘#ff0000’), RGBA 값(예: ‘rgba(255, 0, 0, 0.5)’) 등으로 설정할 수 있다.

  backgroundColor: 'blue',  // 배경색을 파란색으로 설정한다
  

4. width와 height 스타일 속성

• width와 height:
  • 요소의 너비와 높이를 설정하는 데 사용된다. 값은 픽셀 단위(예: 100) 또는 비율 단위(예: ‘50%’)로 지정할 수 있다.

  width: 100,  // 너비를 100픽셀로 설정한다
  height: 50,  // 높이를 50픽셀로 설정한다
  

5. flex 스타일 속성

• flex:
  • Flexbox 레이아웃 시스템을 사용하여 요소의 크기와 위치를 조절하는 데 사용된다.
  • flex 값은 부모 컨테이너 내에서 요소가 차지할 공간을 정의한다. 예를 들어, flex: 1은 가능한 모든 공간을 차지하게 만든다.

  flex: 1,  // 부모 컨테이너에서 가능한 공간을 모두 차지한다
  

6. margin 스타일 속성

• margin:
  • 요소와 주변 요소 간의 간격을 설정하는 데 사용된다. 네 방향(상, 우, 하, 좌)에 대해 개별적으로 설정하거나 단일 값으로 모든 방향의 여백을 동시에 설정할 수 있다.

  margin: 10,          // 모든 방향에 10픽셀의 여백을 설정한다
  marginTop: 20,       // 상단에 20픽셀의 여백을 설정한다
  marginHorizontal: 15, // 좌우에 15픽셀의 여백을 설정한다
  

7. padding 스타일 속성

• padding:
  • 요소의 내용과 경계 사이의 간격을 설정하는 데 사용된다. padding도 margin과 유사하게 네 방향에 대해 개별적으로 설정하거나 단일 값으로 설정할 수 있다.

  padding: 10,          // 모든 방향에 10픽셀의 내부 여백을 설정한다
  paddingVertical: 20, // 상단과 하단에 20픽셀의 내부 여백을 설정한다
  

8. border 관련 스타일 속성

• borderWidth:
  • 테두리의 두께를 설정하는 데 사용된다. 값은 픽셀 단위로 지정할 수 있다.

  borderWidth: 2,       // 테두리 두께를 2픽셀로 설정한다
  

• borderColor:
  • 테두리의 색상을 설정하는 데 사용된다. 색상 값은 색상 이름, 헥스 코드, RGBA 값 등으로 설정할 수 있다.

  borderColor: 'black', // 테두리 색상을 검정색으로 설정한다
  

• borderStyle:
  • 테두리의 스타일을 설정하는 데 사용된다. 주로 'solid', 'dashed', 'dotted' 등의 값을 사용한다.

  borderStyle: 'solid', // 테두리 스타일을 실선으로 설정한다
  

9. Platform.select 메서드

• Platform.select():
  • 플랫폼별로 다른 스타일 값을 선택할 수 있는 메서드이다. ios와 android 같은 플랫폼별로 스타일을 다르게 적용할 수 있다.

  import { Platform, StyleSheet } from 'react-native';
  
  const styles = StyleSheet.create({
    container: {
      ...Platform.select({
        ios: {
          backgroundColor: 'blue',
          padding: 20,
        },
        android: {
          backgroundColor: 'green',
          padding: 10,
        },
      }),
    },
  });
  

전체 예제

아래는 위의 내용을 모두 포함하는 리액트 네이티브 컴포넌트의 예제이다. 주석을 통해 각 스타일 속성의 역할을 설명하고 있다.

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

// 화면 크기 정보를 가져온다.
const { width, height } = Dimensions.get('window');

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

const styles = StyleSheet.create({
  container: {
    // Platform.select를 사용하여 플랫폼별 배경색을 설정한다.
    backgroundColor: Platform.select({
      ios: 'blue',       // iOS에서는 배경색을 파란색으로 설정한다
      android: 'green',  // Android에서는 배경색을 초록색으로 설정한다
    }),
    // Dimensions API를 사용하여 화면 크기에 따라 동적으로 크기를 조정한다.
    width: width * 0.8,  // 화면 너비의 80%로 설정한다
    height: height * 0.5, // 화면 높이의 50%로 설정한다
    // Flexbox를 사용하여 자식 요소를 중앙에 배치한다.
    justifyContent: 'center', // 세로 방향으로 중앙에 배치한다
    alignItems: 'center',     // 가로 방향으로 중앙에 배치한다
    // 여백 및 내부 여백을 설정한다.
    margin: 20,          // 모든 방향에 20픽셀의 여백을 설정한다
    padding: 10,         // 모든 방향에 10픽셀의 내부 여백을 설정한다
    // 테두리를 설정한다.
    borderWidth: 2,       // 테두리 두께를 2픽셀로 설정한다
    borderColor: 'black', // 테두리 색상을 검정색으로 설정한다
    borderStyle: 'solid', // 테두리 스타일을 실선으로 설정한다
  },
  text: {
    // Text 컴포넌트의 스타일을 설정한다.
    color: 'white', // 텍스트 색상을 흰색으로 설정한다
    fontSize: 20,   // 텍스트 크기를 20픽셀로 설정한다
  },
});

export default App;

이 예제는 플랫폼별 배경색, 화면 크기에 따른 동적 크기 조절, Flexbox를 사용한 자식 요소의 중앙 배치, 여백 및 내부 여백, 테두리 설정을 모두 포함하고 있다. 각 스타일 속성의 역할은 주석을 통해 명확히 설명하고 있다.