React-Native의 간단한 구성

React-Native 규칙

• React-Native는 HTML 로 구성되지 않기 때문에 <div> 가 아닌 <View> 가 아닌 를 통해 구성된다.
• React-Native의 Text 의 구성요소는 <Text>  텍스트 컴포넌트 안에 들어가야된다. ⇒ span , p 를 사용할수 없다.
• React-Native 에서는 React처럼 style을 완전히 동일로는 사용할수 없다. ⇒ 일부만 사용할 수 있다

React-Native StyleSheet 사용방법

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World</Text>
      <Text>새롭게 시작하는 React-native</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

다음과 같은 코드에서 text의 style을 추가하려면 아래에 추가하면된다.

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

<Text style={styles.text}>Hello World</Text>

다음과 같은 형식으로 추가하면 텍스트의 크기가 변경된다.

StyleSheet.create 를 사용하는 이유

StyleSheet는 단순한 객체를 만들어준다 그럼에도 StyleSheet.create 를 사용하는 이유는 다음과 같다.

• 성능 최적화: StyleSheet.create를 사용하면 스타일 객체가 고정되고, 앱이 렌더링될 때 매번 새로운 객체가 생성되지 않아 메모리 사용이 최적화 된다.
• 오류 검출: 스타일을 정의할 때 오류를 미리 확인할 수 있도록 도와주며, 올바르지 않은 스타일을 작성할 경우 개발 단계에서 경고를 제공된다.
• 가독성 및 유지보수: 스타일을 모듈화하고 정리하여 코드의 가독성을 높이고, 유지보수를 용이하게된다.
• 자동완성을 제공해준다.

Status Bar 알아보기

React-Native 코드에 보면 다음과 같은 코드가 있는데

import { StatusBar } from 'expo-status-bar';

// .....

 <StatusBar style="auto" />

StatusBar 는 react-native에서 import 하지 않고 expo-status-bar에서 import한다. 즉 서드파티 개념이다.

StatusBar 는 핸드폰 위의 상단 바를 위미한다.

서드파티가 등장하게된 개념

React Native 개발자들은 초기에는 가능한 많은 API와 컴포넌트를 제공하려고 노력했지만, 이로 인해 많은 버그가 발생하고 관리와 유지보수가 어려워진다는 것을 깨닫고 이후 버젼을 업데이트 하면서 React Native의 API와 컴포넌트 수를 점점 줄이게 되었고, 그 결과로 React Native의 크기는 줄어들었다.

 

이 과정에서 React Native의 유지보수는 더욱 쉬워졌고, 개발 속도도 빨라졌다 그리고 사라진 API와 컴포넌트들은 커뮤니티에 넘겼다.

 

즉, 필요한 API나 컴포넌트가 더 이상 기본 제공되지 않는 경우, 사용자들이 직접 개발하여 공유하여 만들 수 있게 만들었다. 커뮤니티는 참여를 촉진하는 장점이 있지만, 몇 가지 단점도 있다., 문제가 발생했을 때 해당 API를 만든 개발자가 수정해 주기를 기다려야 하거나, 사용자가 직접 코드를 수정해야 하는 불편함이 생긴다.

Expo의 등장

Expo는 이러한 문제에 대해 React-Native 팀 대신 직접 components와 API를 만들어서 제공해주기 시작했다. 만든것을 Expo sdk라고 한다.