[#1 리액트 네이티브 맛보기] 환경 구축부터 스토어 출시까지 디데이 앱 따라 만들며 배우는 React Native

리액트 네이티브 튜토리얼

[#1 리액트 네이티브 맛보기]

[#2 Component와 메인화면 분할]

[#3 레이아웃 구성하기]

[#4 레이아웃 구현 마무리하기]

[#5 state]

[#6 설정 Modal 만들기]

[#7 설정 Modal 기능 추가하기]

[#8(구현 끝) 채팅기능 구현하기]

 

시작에 앞서 리액트 네이티브가 무엇인지 어떻게 사용되는지 잠시 알아보고 가도록 하겠습니다

리액트 네이티브가 뭘까?

React Native는 Facebook에서 만든 오픈 소스 모바일 응용 프로그램 프레임 워크입니다. 개발자가 기본 플랫폼 기능과 함께 React를 사용할 수 있도록하여 Android, iOS, 웹 및 UWP 용 애플리케이션을 개발하는 데 사용됩니다. -위키백과

Facebook에서 만든 모바일 앱 개발용 오픈소스 프로젝트입니다.

facebook이나 instagram등등 많은 앱이 리액트 네이티브로 만들어 졌고, 가장 큰 장점은 react.js의 디자인을 이용해 앱을 개발할 수 있다는 것 입니다!

웹을 개발하는 react.js를 안다면 더 쉽게 앱을 개발할 수 있다는 뜻입니다.

그리고, 하이브리드앱에 대해서 들어보셨나요? 간단하게 설명하면, IOS, Android 앱을 동시에 개발할 수 있는 방식입니다.

보통의 하이브리드앱은 웹뷰를 이용하여 제작됩니다.

하지만, 리액트 네이티브는 두 플랫폼 동시개발이 가능하지만 이름 그대로 네이티브입니다.

자! 이제 저와 함께 하나씩 따라하며 리액트 네이티브에 대해 배워보도록 합시다.

시작하기에 앞서

Android 개발은 Android Studio가 필요합니다.

IOS 개발은 Xcode가 필요합니다. (Xcode는 맥에서만 설치가 가능합니다)

mac OS에서 리액트 네이티브 환경 구축 : https://dev-yakuza.github.io/ko/react-native/install-on-mac/
Windows에서 리액트 네이티브 환경 구축 : https://dev-yakuza.github.io/ko/react-native/install-on-windows/

개발환경은 expo를 사용하는 방법과, 사용하지 않는 방법이 있습니다.

expo를 사용하게 되면 개발이 더 편한 반면, 결과물의 용량이 크고, expo에서 제공하는 라이브러리가 아니면 사용할 수 없습니다.

그래서 다들 처음엔 expo로 시작을 하지만 결국에는 사용하지 않습니다.

어짜피 나중에 안쓰는거 처음부터 안쓰는게 나을거 같다고 생각해서 expo를 사용하지 않고 진행할 예정입니다.

프로젝트 생성하기

react-native init DdayChat

위의 명령을 입력해서 DdayChat이라는 이름의 프로젝트를 하나 생성합니다.

cd DdayChat/
react-native run-android
또는
react-native run-ios

react-native run-android 또는 run-ios를 입력하면 코드를 에뮬레이션 해볼 수 있습니다.

위와 같이 뜨면 성공입니다.

이제 에디터를 이용해서 방금 만들었던 프로젝트 폴더를 열어줍니다.

가장 메인이 되는 파일은 App.js파일입니다.

//App.js
...생략
const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />
          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          <View style={styles.body}>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Step One</Text>
              <Text style={styles.sectionDescription}>
                Edit <Text style={styles.highlight}>App.js</Text> to change this
                screen and then come back to see your edits.
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>See Your Changes</Text>
              <Text style={styles.sectionDescription}>
                <ReloadInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Debug</Text>
              <Text style={styles.sectionDescription}>
                <DebugInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Learn More</Text>
              <Text style={styles.sectionDescription}>
                Read the docs to discover what to do next:
              </Text>
            </View>
            <LearnMoreLinks />
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};
 ... 중략
export default App;

파일의 내용을 보면, 우리가 지금 화면에 보고있는 텍스트들이 보입니다.
<Text>태그의 내용중 아무거나 한번 바꿔봅시다.

저는 Step One이라는 텍스트를 Hello World!로 바꿔보았는데요, 파일을 저장하니 에뮬레이터가 스스로 바뀌는 것을 볼 수 있습니다!

이러한 기능을 Hot Reload라고 하는데, 이는 개발 속도를 많이 높여주는 역할을 합니다.

기존의 안드로이드 앱을 개발하기 위해선, 하나 고치고, 빌드하고, 재설치하고, 재실행해서 확인해야 하는 반면 리액트 네이티브에선 코드가 바뀌는 즉시 앱에 어떻게 적용되는지 바로 알 수 있습니다.

//App.js
...중략
const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

App.js가장 아랫부분을 보면, styles이라는 부분이 있습니다. 이중 sectionTitle부분의 fontSize를 조작해 봅시다.

폰트의 크기가 변한걸 볼 수 있습니다. 이처럼 StyleSheet을 통해 각각의 요소의 스타일을 지정해 줄 수 있습니다.

앞으로 같이 만들게 될 앱의 디자인은 이렇습니다.

그럼 다음글에서 View, Text등 여러 요소들에 대해 알아보겠습니다.