[React Native] React Native Component - 1. Intro

 

---

2022.01.11 - [React Native/Basic] - [React Native] React Native Component - 1. Intro

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 2. View, Text

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 3. Style

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 4. TouchEvent

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 5. Button

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 6. ScrollView

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 7. TextInput

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 8. Button, ScrollView, TextInput 심화

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 9. Picker

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 10. Slider

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 11. ActivityIndicator

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 12. Image

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 13. Modal

---

 

---

1. Intro

App.js 파일이 기본 화면 출력 내용이 담겨있다.

index.js 파일은 앱의 메인 입구이다. 여기서 AppRegistry를 import 하고 새로운 컴포넌트를 등록하고 있다. 여기에 2개의 인자가 있는데, 첫 번째 인자는 앱 이름이다. app.json에서 보면 프로젝트명을 가지고 있는데 이걸 가져와서 등록한다. 두 번째 인자는 앱을 시작할 때 렌더링되는 것으로 App을 가리키고 있기 때문에 App.js 파일이 초기 화면 파일이 된다.

 

index.js

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

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

class App extends Component {
  render() {
    return (
      <View>
        <Text>hello world</Text>
      </View>
    );
  }
}
export default App;

 

 

---

참고 자료

https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EA%B8%B0%EC%B4%88/dashboard

iOS/Android 앱 개발을 위한 실전 React Native - Basic - 인프런 | 강의