[React Native] 핵심 컴포넌트 및 스타일링 컴포넌트 확인

React Native 를 처음 시작하면서 React가 그렇듯 핵심적인 컴포넌트들에 파악을 하는 것이 중요하다고 생각하기에 이번에는 핵심 컴포넌트들을 간단하게 확인하고 파악해보도록 하겠습니다.

 

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>sehun's project day2</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

현재 기본적인 React Native 프로젝트의 App.js 컴포넌트의 전체 구성입니다. 

 

export default function App() {
  return (
    <View style={styles.container}>
      <Text>sehun's project day2</Text>
      <StatusBar style="auto" />
    </View>
  );
}

핵심 컴포넌트는 App 함수 부분으로서, 최종적으로 작업한 내용들이 이 App 함수에 태워져 보여지게 되는 것입니다.

export default 키워드가 적용된 것은 기본적으로 이 App 함수를 export (추출)하여 나오게 하겠다는 뜻입니다.

즉, 결국 return 문에 작성된 코드들이 노출되어 보여지게 되는 것입니다.

 

또한, return 문에 흔히 접할 수 있는 html 태그 형식과 유사한 코드로 구성되어있다고 해서 <div> 와 같은 일반적인 html 코드는 사용할 수 없습니다.

html 태그들은 브라우저처럼 DOM이 있어야 사용할 수 있는 태그들이지만 현재 이 return문에 보여지는 태그들은 DOM을 사용하지 않는 특정 장치에서 동작되는 태그들이기 때문에 사용 환경이 다릅니다.

 

 

[각 사용환경에 따른 사용 컴포넌트 태그]

(1) 브라우저(React DOM)

- 노출 컴포넌트 : <div>

- 편집 컴포넌트 : <input>

 

(2) 안드로이드 (Native 컴포넌트)

- 노출 컴포넌트 : android.View

- 편집 컴포넌트 : EditText

 

(3) IOS (Native 컴포넌트)

- 노출 컴포넌트 : UIView

- 편집 컴포넌트 : UITextField

 

(4) React Native JSX

- 노출 컴포넌트 : <View>

- 편집 컴포넌트 : <TextInput>

 

 

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

또한, StyleSheet을 활용하여 간단한 css 스타일 styles 변수도 있습니다.

 

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

최상단에 위치한 import된 기능들입니다.

- StatusBar는 Expo CLI 방식으로 프로젝트를 구성하였을 때 지원해주는 상태 바입니다.

- StyleSheet, Text, View 는 React Native 자체에세 기본적으로 제공해주는 스타일, 텍스트, 뷰를 구성해주는 기능들입니다.

 

 

---

 

일반 브라우저 HTML 과 React Native 컴포넌트들의 차이점

일반적인 html 로 구성된 웹 사이트 페이지들이 각각의 구성 요소들, 또는 컴포넌트들을 잘 조합하여 사용자 인터페이스를 구성하는 것처럼 React-Native 또한 각 구성 요소들과 컴포넌트들을 잘 조합하여 인터페이스를 구성해야 합니다.

 

 

(1) 컴포넌트 태그 사용 가짓수

그리고 기본 html 과는 다르게 React Native의 경우에는 공식 사이트에도 들어가보면 알 수 있듯이 컴포넌트 가짓수가 많지 않습니다.

기본 html은 <article>, <h2> 등등 다양하고 많은 컴포넌트 구성 요소들을 제공하지만 React Native는 비교적 적은 컴포넌트들을 가지고 있습니다.

 

 

(2) 스타일링 방식의 차이

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>  // 생성한 스타일 컴포넌트 변수를 인라인 방식으로 적용
      <Text>sehun's project day2</Text>
      <StatusBar style="auto" />
    </View>
  );
}

// StyleSheet 개체를 활용하여 JavaScript 형식으로 스타일 구성요소 설정
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

React Native는 브라우저에서 사용되지 않기 때문에 CSS 코드를 사용할 수 없습니다.

대신 다른 방식으로 스타일을 제공할 수 있는데, 기본적으로 사용한 핵심 컴포넌트들에 인라인 방식으로 즉각적으로 스타일을 입히거나, 위의 예시 코드처럼 StyleSheet 과 같은 스타일 개체를 사용하여 적용할 수 있습니다.

 

 

이렇게 해서 간단하게 핵심 컴포넌트와 스타일링 컴포넌트를 확인해보는 시간을 가졌습니다.

앞으로 React Native를 사용하면서 다양한 지원 컴포넌트들을 사용할 것이기 때문에 좀 더 자세한 내용은 추후에 다루도록 하겠습니다.