React & React Native JSX

[용어 정리]

1. 컴포넌트(Component): 재사용할 수 있는 조립 블록

                                   화면에 나타나는 UI 요소

 

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

 

3. JSX

• 객체 생성과 함수 호출을 위한 문법적 편의를 제공하기 위해 만들어진 확장
• 기능가독성이 높고 작성하기도 쉽고, XML과 유사하다는 점에서 중첩된 구조를 잘 나타낼 수 있음
• (하나의 부모) 여러 개의 요소를 표현할 경우 반드시 하나의 부모로 감싸야 함

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>
  );
}
----------------------------------------------------------------------------
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 { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  const name = "IRONMAN";
  return (
    <View style={styles.container}>
      <Text style={styles.text}>I'm {name}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

• (자바스크립트 조건문) <if 조건문>

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

export default function App() {
  const name = "IRONMAN";
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        {(() => {
            if(name === 'Tony') 
              return "My name is Tony";
            else if(name === "IRONMAN") 
                return "My name is IRONMAN";
             else 
              return "What's my name?"; 
          }
        )()}
      </Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

• (자바스크립트 조건문) <삼항연산자>

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

export default function App() {
  const name = "IRONMAN";
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        My name is {name === "IRONMAN"? "IRONMAN" : "TONY"}
      </Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

• (AND 연산자<&&>  & OR 연산자<||>)

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

export default function App() {
  const name = "IRONMAN";
  const age = 100;
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        My name is {name === "IRONMAN" && age === 10? "IRONMAN" : "TONY"}
      </Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

• (null & undefined)
• (주석) /* */ 내부에 // 사용 가능
• (스타일링) CamelCase 형태로 작성

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