백엔드 개발자를 위한 React Native -2

회사에서 앱을 개발해야 했을때 선택한 언어가 React Native 였습니다.

React Native 를 선택한 이유는 우선 javascript 기반이기 때문에 러닝커브가 작았고 IOS와 안드로이드를 동시에? 개발할 수 있다는 점입니다. 물론 최근에는 크로스 플랫폼 개발은 flutter 가 더욱 두각을 보이고 있지만 당시 선택한 시점에는 flutter가 초기 였기때문에 과감하게 React Native 를 선택 했었습니다.

당시 앱개발에 대한 기본적인 지식을 가지고 있었기에 더욱 접근하기는 쉬웠고 웹 개발의 css 와 javascript 도 익숙했기 때문에 스터디를 하면서 무척 편하고 css 구조와 비슷한 방법으로 앱개발을 하는것은 무척 편했습니다.

아마도 저와 비슷한 상태의 개발자는 React Native 를 시작하기 무척 좋을듯 합니다.

 

먼저 React Native를 구현 하기 위해서는 크게 아래의 요소가 필요합니다.

• NPX or NPM  or yarn
• Visual Studio Code
• Android Studio 설치
• xcode 설치

앱 개발은 IOS나 여러가지 사항상 MAC 환경에서 개발하는것이 편합니다.

개발에 필요한 환경 설치는 아래의 공식사이트를 참고하여 설치를 진행하면 됩니다.

https://reactnative.dev/docs/environment-setup

 

저는 개인적으로 NPX 나 NPM을 사용하기 보다는 yarn 을 사용하여 의존성 관리나 실행 하는것을 선호 합니다.

 

yarn add @react-navigation/native-stack #스택 내비게이터 의존성 추가
yarn android # 안드로이드 애뮬에서 실행
yarn ios # ios 애뮬에서 실행

아래는 기본 적인 코드 입니다.

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

const YourApp = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Text>Hello World!</Text>
    </View>
  );
};

export default YourApp;

뭔가 익숙한 javascript 코드 입니다. XML 비슷한 코드도 있습니다 . 해당 코드는 JSX 태그 입니다.

다음 글에서는 코드 구조에 대해서 조금더 정리해 보겠습니다.

 

agune