[React Native] 앱 개발 - JSX 기본 문법 정리중

 

JSX(JavaScript XML)

JSX 문법을 사용함으로써 가독성과 편의성을 높일 수 있습니다

 

 

 

JSX를 사용하지 않았을 때의 코드 예시

render() {
	return (
		React.createElement(View, {style: styles.container},
		React.createElement(Text, {style: styles.welcome}, 'Welcome to React Native!'),
		React.createElement(Text, {style: styles.instructions}, 'To get started, edit App.js'),
		React.createElement(Text, {style: styles.instructions}, instructions)
		)
	);
}

 

JSX를 사용했을 때의 코드 예시

render() {
	return (
		<View style={styles.con tainer}>
			<Text style={styles.welcome}>Welcome to React Native!</Text>
			<Text style={styles.instructions}>To get started, edit App.js</Text>
			<Text style={styles.instructions}>{instructions}</Text>
		</View>
	);
}

 

---

필히 최상위 태그로 감싼다

• 감싸는 방법은 여러가지 방법이 있지만 <></>와 같이 사용할 수도 있습니다
• 아래는 <View></View>로 감싼 경우
• 단 하나의 요소를 표현할 경우는 감쌀 필요가 없음

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

const App = () => {
 
  return (
    <View>
      <Text>Hello</Text>
      <Text>React Native</Text>
    </View>
  );

};
 
export default App;

---

자바스크립트 변수 선언은 const 사용

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

const App = () => {

  const varName ='변수입니다';

  return (
    <Text>{varName}</Text>
  );

}

export default App;

---

태그(Tag)는 닫힌 상태로

• <태그></태그>의 모양으로 작성되며 컴포넌트를 열어주는 부분< >과 닫아주는 부분</ >으로 이루어져 있습니다.

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

const App = () => {

  return (
    <>
    <Text>태그가 한쌍으로 닫힌 상태로</Text>
    <Button title='/로 닫아줍니다' />
    </>
  );

}

export default App;

 

---

주석문

• 여러 줄 주석문 : /* */
• 한 줄 주석문 : //
• 아래 예시는 에러가 발생 됩니다
  에러를 제거하기 위해서는 "<Text>{varName //한 줄 수석을 {}사이에 사용하면 에러가 발생 합니다 }</Text>"를
  제거하면 됩니다 

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

const App = () => {

  const varName ='주석입니다';

  /* 여러 줄  
     주석 입니다
  */
  return (
    <>
      <Text>{varName}</Text> //한 줄 주석입니다
      <Text>{varName //한 줄 수석을 {}사이에 사용하면 에러가 발생 합니다 }</Text> 
      <Text>{varName /*{}안에서 주석은 필히 여러 줄 주석을 사용합니다*/}</Text> 
    </>
  );

}

export default App;

---

 

null 과 undefined

null은 허용하지만, undefined가 반환되면 오류가 발생한다.

 

---

함수

(function() {

})();

또는

(() => { //화살표 => 다음에 오는 {안의 내용이 실행) 

{)();

 

---

 

조건문

간단 조건문

(조건식)&&(참표현식)

또는

(조건식)||(거짓표현식)

 

 

삼항연산자