[ReactNative] 개발환경 세팅하기 - 1

리액트 네이티브의 학습이 필요해서 공식문서를 통해 학습을 진행했습니다.

 

https://reactnative.dev/docs/getting-started

Introduction · React Native

메인화면에 요약된 리액트 네이티브 특징은 다음과 같다.

- 안드로이드와 ios를 리액트를 통해 만들수 있다.

- 문법상 자바스크립트를 사용하고 웹앱처럼 보이지만 native app을 실행해볼수 있다.

- native app에 대한 공부없이 리액트를 학습했다면 개발이 가능하다.

- 대부분의 공통코드는 같이쓰고 플랫폼에 특화된 코드가 있다면 안드로이드용과 ios용으로 분기해서 사용할 수 있다.

- 브라우저 리프레시가 빠르다. 

 

npx react-native init MyTestApp

---

Basic

React Native는 React와 비슷하지만 웹 구성 요소 대신 native 구성 요소사용

jsx, state, props, components등을 사용

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

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Hello, world!</Text>
    </View>
  )
}
export default HelloWorldApp;

https://snack.expo.dev/

Snack - React Native in the browser

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

const styles = StyleSheet.create({
  center: {
    alignItems: 'center'
  }
})

const Greeting = (props) => {
  return (
    <View style={styles.center}>
      <Text>Hello {props.name}!</Text>
    </View>
  );
}

const LotsOfGreetings = () => {
  return (
    <View style={[styles.center, {top: 50}]}>
      <Greeting name='Rexxar' />
      <Greeting name='Jaina' />
      <Greeting name='Valeera' />
    </View>
  );
}

export default LotsOfGreetings;

 stylesheet라는 리액트 네이티브의 어떤기능이

웹환경에서의 css스타일을 조작하는 것 같은 효과를 주는것 같다. 이걸 토대로도 ui를 조작할수 있는것 같다.

웹과 마찬가지로 보여야하는 태그내용과 꾸며야하는 스타일내용을 분리해서 처리하고있다.

 

---

리액트와 리액트 네이티브의 코드차이

// React Native Counter Example using Hooks! import React, { useState } from 'react'; import { View, Text, Button, StyleSheet } from 'react-native'; const App = () => { const [count, setCount] = useState(0); return ( <View style={styles.container}> <Text>You clicked {count} times</Text> <Button onPress={() => setCount(count + 1)} title="Click me!" /> </View> ); }; // React Native Styles const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center' } });

// ReactJS Counter Example using Hooks! import React, { useState } from 'react'; const App = () => { const [count, setCount] = useState(0); return ( <div className="container"> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me! </button> </div> ); }; // CSS .container { display: flex; justify-content: center; align-items: center; }

 

사실상 코드의 차이는 거의 없고

react에서는  html 태그로 원래 있는 div, p, button 태그를 사용했고

react-native에서는 view, text,button과 같은 컴퍼넌트등을 불러와서 사용했다.

사용되는 명칭만 다를뿐 결과값은 같음

 

class name == style

onclick == onPress등

 

리액트네이티브는
모바일 디바이스 크로스 플랫폼 개발이 가능하고
React를 사용해서 안드로이드와 ios 네이티브 앱을 만들수 있다.
자바스크립트로 작성한 것을 네이티브 코드로 그린다.
플랫폼의 네이티브 ui 구성 요소를 활용하여 개발한다.
빠른 갱신과 소스코드 저장하면 바로 확인이 가능하다.
메타플랫폼지원과 커뮤니티가 활성화 되어있다.

 

 

Setting up the development environment

---

모바일 개발이 처음인 경우 시작하는 가장 쉬운 방법은 Expo CLI를 사용하는 것

모바일 개발에 이미 익숙하다면 React Native CLI를 사용하는 것이 좋다고 하는데 나는 쪼렙이니 expo CLI로 설치후 따라해보았다.

 "AwesomeProject"라는 새로운 React Native 프로젝트를 생성하면 다음과 같이 선택창이 나온다.

 

blank : 아무것도 없는 빈캔버스

blank (TypeScript) : 위와 마찬가지이지만 타입스크립트 버전

tabs (TypeScript) : 몇가지 예제들과 타입스크립트.

minimal : 아무것도 없이 기초로 처음부터 시작하는듯.

 

 

 

npm start 또는 yarn start하면 각종 개발환경별로 선택할수 있도록 활성화된다.

 

 

웹으로 확인해보면🔽🔽🔽🔽

 

 

웹으로 활성된 화면

짜잔!