컴포넌트 스타일링

앞서 했던 내용의 연장선 이다.

리액트 네이티브에서 자원과 아이콘을 사용하는 방법에 대해 자세히 설명하겠다.
주요 개념으로는 ImageBackground 및 Image 코어 컴포넌트 사용하기, 폰트 직접 설치 및 사용하기, fontFamily, fontWeight, textAlign, 리액트 네이티브 벡터 아이콘 아이콘 패키지, 그리고 flex: 1의 의미가 포함된다.

1. `ImageBackground` 및 `Image` 코어 컴포넌트 사용하기

ImageBackground:

ImageBackground 컴포넌트는 다른 컴포넌트의 배경으로 이미지를 사용할 때 사용된다.
내부에 다른 자식 컴포넌트를 배치할 수 있다.
이 컴포넌트를 사용하여 이미지 위에 텍스트나 버튼 등의 요소를 배치할 수 있다.

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

const App = () => {
  return (
    <ImageBackground 
      source= 
      style={styles.background}
    >
      <Text style={styles.text}>Hello, Background Image!</Text>
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  background: {
    flex: 1,  // 부모 컨테이너의 모든 공간을 차지하도록 설정한다
    justifyContent: 'center', // 세로 방향으로 중앙 배치
    alignItems: 'center',     // 가로 방향으로 중앙 배치
  },
  text: {
    color: 'white', // 텍스트 색상을 흰색으로 설정한다
    fontSize: 20,   // 텍스트 크기를 20픽셀로 설정한다
  },
});

export default App;

Image:

Image 컴포넌트는 이미지를 표시하는 데 사용된다.
로컬 이미지 파일이나 URL에서 이미지를 로드할 수 있다.

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

const App = () => {
  return (
    <View style={styles.container}>
      <Image 
        source= 
        style={styles.image}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,  // 부모 컨테이너의 모든 공간을 차지하도록 설정한다
    justifyContent: 'center', // 세로 방향으로 중앙 배치
    alignItems: 'center',     // 가로 방향으로 중앙 배치
  },
  image: {
    width: 100,  // 이미지의 너비를 100픽셀로 설정한다
    height: 100, // 이미지의 높이를 100픽셀로 설정한다
  },
});

export default App;

2. 폰트 직접 설치하고 사용하기

폰트 직접 설치:
- 사용자 정의 폰트를 리액트 네이티브 앱에 추가하려면, 프로젝트에 폰트 파일을 추가하고, react-native.config.js 파일을 설정하며, react-native link를 실행하여 폰트를 연결한다.
  이후 스타일 시트에서 fontFamily 속성을 사용하여 폰트를 적용한다.
```
# 폰트 파일을 프로젝트의 assets/fonts 폴더에 추가한다.
```
```
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  text: {
    fontFamily: 'CustomFont', // 직접 설치한 폰트를 사용한다
  },
});
```

3. `fontFamily` 및 `fontWeight` 속성

fontFamily:
- fontFamily 속성은 텍스트의 글꼴을 설정하는 데 사용된다.
  직접 설치한 폰트나 시스템 폰트를 지정할 수 있다.
```
fontFamily: 'Arial', // 텍스트의 글꼴을 Arial로 설정한다
```
fontWeight:
- fontWeight 속성은 텍스트의 두께를 설정한다.
  일반적으로 'normal', 'bold', 또는 숫자 값(100, 200, …, 900)으로 설정할 수 있다.
```
fontWeight: 'bold',  // 텍스트를 굵게 설정한다
```

4. `textAlign` 속성

textAlign:
- textAlign 속성은 텍스트의 정렬 방법을 설정한다.
  값으로는 'left', 'center', 'right', 'justify' 등을 사용할 수 있다.
```
textAlign: 'center', // 텍스트를 중앙으로 정렬한다
```

5. 리액트 네이티브 벡터 아이콘 아이콘 패키지

리액트 네이티브 벡터 아이콘:

react-native-vector-icons 패키지는 다양한 아이콘을 제공하며, 아이콘 폰트를 사용하여 앱에 아이콘을 추가할 수 있다.
이를 통해 다양한 아이콘 스타일을 쉽게 사용할 수 있다.

npm install react-native-vector-icons

import Icon from 'react-native-vector-icons/FontAwesome';

const App = () => {
  return (
    <View style={styles.container}>
      <Icon name="home" size={30} color="blue" />
    </View>
  );
};

6. `flex: 1`의 의미

flex: 1:

flex: 1은 Flexbox 레이아웃 시스템에서 사용되는 속성이다.
부모 컨테이너의 남은 공간을 모두 차지하도록 자식 요소를 설정한다.
이를 통해 자식 요소가 부모 컨테이너 내에서 가능한 모든 공간을 차지하게 한다.

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

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box1} />
      <View style={styles.box2} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,         // 부모 컨테이너가 화면의 모든 공간을 차지하도록 설정한다
    flexDirection: 'row', // 자식 요소들을 가로 방향으로 배치한다
  },
  box1: {
    flex: 1,         // 부모 컨테이너의 남은 공간을 모두 차지하도록 설정한다
    backgroundColor: 'red',
  },
  box2: {
    flex: 1,         // 부모 컨테이너의 남은 공간을 모두 차지하도록 설정한다
    backgroundColor: 'blue',
  },
});

export default App;

전체 예제

아래 예제를 통해 이해하자.

import React from 'react';
import { View, Text, StyleSheet, ImageBackground, Image, Platform, Dimensions } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

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

const App = () => {
  return (
    <View style={styles.container}>
      {/* 배경 이미지와 텍스트 */}
      <ImageBackground 
        source= 
        style={styles.background}
      >
        <Text style={styles.text}>Hello, Background Image!</Text>
      </ImageBackground>
      
      {/* 로고 이미지 */}
      <Image 
        source= 
        style={styles.image}
      />
      
      {/* 벡터 아이콘 */}
      <Icon name="home" size={30} color="blue" />

      {/* 텍스트 스타일 */}
      <Text style={styles.customText}>Custom Font Text</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,          // 부모 컨테이너가 화면의 모든 공간을 차지하도록 설정한다
    justifyContent: 'center', // 세로 방향으로 중앙 배치
    alignItems: 'center',     // 가로 방향으로 중앙 배치
  },
  background: {
    flex: 1,          // 배경 이미지가 부모 컨테이너의 모든 공간을 차지하도록 설정한다
    justifyContent: 'center', // 세로 방향으로 중앙 배치
    alignItems: 'center',     // 가로 방향으로 중앙 배치
  },
  text: {
    color: 'white',  // 텍스트 색상을 흰색으로 설정한다
    fontSize: 20,    // 텍스트 크기를 20픽셀로 설정한다
  },
  image: {
    width: 100,  // 이미지의

 너비를 100픽셀로 설정한다
    height: 100, // 이미지의 높이를 100픽셀로 설정한다
  },
  customText: {
    fontFamily: 'CustomFont', // 직접 설치한 폰트를 사용한다
    fontWeight: 'bold',       // 텍스트를 굵게 설정한다
    textAlign: 'center',      // 텍스트를 중앙으로 정렬한다
  },
});

export default App;

flexdirection 등 더 많은 스타일링 방법이 있지만, 여기까지 하겠다.

컴포넌트 스타일링

1. ImageBackground 및 Image 코어 컴포넌트 사용하기