리액트 네이티브 - jsx

컴포넌트 : 재사용할 수 있는 조립 블럭, 화면에 나타나는 UI요소라고 생각

와이어프레임 : 최종화면에 구성될 콘텐츠를 간단히 요약해서 보여주는 것

 

expo init react-native-component

 

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}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

javascript 이지만 html과 같은 코드들이 보인다. 이러한 코드를 jsx라 한다.

jsx는 객체 생성과 함수 호출을 위한 문법적 편의를 제공하기 위해 만들어진 확장기능이다.

export default function App() {
 return (
   <Text>Open up App.js to start working on your app!</Text>
   <StatusBar style="auto" />
 )
}



위와 같이 App.js를 변경하면 
JSX 식에는 부모 요소가 하나 있어야 합니다.ts(2657)
와 같은 에러가 발생한다.

 

JSX에서는 여러개의 요소를 반환하는 경우에도 반드시 하나의 부모로 나머지 요소를 감싸서 반환해야한다.

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}>
    <Text>Open up App.js to start working on your app!</Text>
    <StatusBar style="auto" />
   </View>
 )
}

view는 UI를 구성하는 가장 기본적인 요소이다.

 

view 컴포넌트말고 여러 개의 컴포넌트를 반환하고 싶은 경우 Fragment 컴포넌트를 사용한다.

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

export default function App() {
 return (
   <Fragment>
    <Text>Open up App.js to start working on your app!</Text>
    <StatusBar style="auto" />
   </Fragment>
 )
}

/*
==============
export default function App() {
 return (
   <>
    <Text>Open up App.js to start working on your app!</Text>
    <StatusBar style="auto" />
   </>
 )
}
와 같이 사용하여도 됨
*/

import React, {Fragment} from 'react';

Fragment를 사용하기 위해 import를 이용하여 불러오고 Fragment  컴포넌트를 사용하도록 함

 

 

<name 변수에 이름 넣어서 출력>

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

export default function App() {
 const name = 'Changmin'
 return (
   <View style = {styles.container}>
     <Text style={styles.text}>My name is {name}</Text>
   </View>
 )
}

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

 

 

JSX내부에서 if문을 사용할 수 있지만 즉시실행함수 형태로 작성해야한다.

(즉시 실행 함수)

----------------------------------------------------------------------------

함수를 정의함과 동시에 바로 실행하는 함수

(function (name) { console.log('즉시실행함수' + name); })('foo'); 또는

- function 삭제 가능

( (name) => { console.log('즉시실행함수' + name); })();

----------------------------------------------------------------------------

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

export default function App() {
 const name = 'abcd'
 return (
   <View style = {styles.container}>
     <Text style={styles.text}>
      {(() => {
        if (name === 'Changmin') return 'My name is Changmin';
        else if (name === 'Noname') return 'My name is Noname';
        else return 'My name is react-native';
      })()}
     </Text>
   </View>
 )
}

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

 

jsx에서는 false는 랜더링 되지 않는다.

따라서

name === 'name' && (실행할 코드)

name !== 'name' && (실행할 코드) 

처럼 특정 조건일때 컴포넌트의 랜더링 여부를 결정할 수 있다.

 

 

Inline 스타일링

jsx에서는 style에 문자열로 입력하는 것이 아니라 객체형태로 입력해야한다.

-으로 연결된 이름은 하이픈을 제거하고 카멜표기법으로 작성해야한다. camelCode

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

export default function App() {
 return (
   <View
      style = {{
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'ceonter',
        justifyContent: 'center',
      }}
    >
      <Text>Open up App.js to start working on your app!</Text>
    </View>
 )
}