[React Native] JSX

Reference : 처음배우는 리액트 네이티브

 

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

• 컴포넌트 : 재사용할 수 있는 조립 블록으로, 화면에 나타나는 UI요소.

 

JSX

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

 

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

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

  );
}

컴포넌트 반환 시 View 컴포넌트처럼 특정 역할을 하는 컴포넌트로 감싸지 않고 여러 개의 컴포넌트를 반환하고 싶은 경우 Fragment 컴포넌트를 사용한다.

 

 

JSX는 내부에서 자바스크립트의 변수를 전달하여 이용할 수 있다.

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

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

  );
}

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

결과

변수 넣어서 전달이 아주 잘 됐음을 확인할 수 있다.

 

 

자바스크립트 조건문

특정 조건에 따라 나타나는 요소를 다르게 하고 싶은 경우 사용 가능.

다만 약간 제약이 있으므로 복잡한 조건인 경우 JSX 밖에서 조건에 따른 값을 설정하고 JSX 내의 조건문은 최대한 간단하게 작성하는 것이 좋다.

 

 

if 조건문

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

export default function App() {
  const name = 'Beomjun';
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        {(() => {
          if(name === 'Hanbit') return 'My name is Hanbit';
          else if(name === 'Beomjun') return 'My name is Beomjun';
          else return 'My name is React Native';
        })()}
      </Text>
      <StatusBar style="auto" />
    </View>

  );
}

name 변수에 따라 출력 값이 달라진다.

괄호 개수 확인 잘해야할듯. 그리고 여기서 비교는 === 으로 비교함도 알아두자.

 

 

삼항 연산자

JSX는 내부에서 if 조건문 외에도 삼항 연산자를 사용 가능하다.

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

  );
}

이런식으로 변수 내에 삼항 연산자 사용 가능.

 

 

AND 연산자와 OR 연산자

특정 조건에 따라 컴포넌트의 렌더링 여부를 결정하도록 코드를 구성할 수 있다.

export default function App() {
  const name = 'Beomjun';
  return (
    <View style={styles.container}>
      {name === 'Beomjun' && (
        <Text style={styles.text}>My name is Beomjun</Text>
      )}
      {name !== 'Beomjun' && (
        <Text style={styles.text}>My name is not Beomjun</Text>
      )}
      <StatusBar style="auto" />
    </View>

  );
}

결과를 확인하면 name값에 따라 첫번째 내용과 두번째 내용 중 한가지만 나타내는 것을 확인 할 수 있다.

JSX에서 false는 렌더링 하지 않으므로 AND 연산자 앞의 조건이 참일 때 뒤의 내용이 나타나고 거짓인 경우 나타나지 않는다.

OR 연산자는 반대로 앞의 조건이 거짓인 경우 나타나고 조건이 참인 경우 나타나지 않는다.

 

★비교 연산자 !== 도 알아두자! AND, OR도 조건처럼 사용 가능!

 

 

null과 undefined

조건에 따라 값을 출력하는 경우 컴포넌트가 null 이나 undefined를 반환하는 경우가 있다.

JSX는 null은 허용하지만 undefined는 오류가 발생한다.

 

export default function App() {
	return null;
}
...

위의 경우에는 정상적으로 동작은 하지만 화면에는 아무것도 나타나지 않는다.

 

export default function App() {
	return undefined;
}
...

위의 경우에는 코드가 정상적으로 동작하지 않고 오류가 발생한다.

따라서 코드 작성 시 신경써야한다.

 

 

주석

JSX의 주석은 {/* */} 를 이용하여 작성한다.

단, 태그 안에서 주석을 사용할 때는 자바스크립트처럼 /나 /* */ 주석을 사용할 수 있다.

 

 

스타일링

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

또한 하이픈으로 연결된 이름은 제거하고 카멜 표기법으로 작성해야한다. (카멜 표기법은 개발자의 글쓰기에서 배웠던거 참고)