heesplace

React Native 컴포넌트

SungHee, 22 April 2021

컴포넌트(component) : 재사용할 수 있는 조립 블록으로 화면에 나타나는 UI요소라고 생각하면 됨
와이어프레임 : 최종 화면에 구성될 콘텐츠를 간단히 요약해서 보여주는 것

App.js


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

    export default function App() {
    return (
        <View style={styles.container}>
            Open up App.js to start working on your app!
            
        </View>
     );
    }

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

분명 자바스크립트 파일인데 익숙하지 않은 코드가 보임.
마치 Html을 작성한 것 같은 코드들이 보이는데, 이런 코드들을 JSX라고 부름

JSX : 객체 생성과 함수 호출을 위한 문법적 편의를 제공하기 위해 만들어진 확장 기능으로 리액트 프로젝트에서 사용됨
- 가독성이 높고 작성하기도 쉬울 뿐만 아니라, XML과 유사하다는 점에서 중첩된 구조를 잘 나타낼 수 있다는 장점이 있음