3장 컴포넌트

• 이번 실습에서는 < react-native-component > 이름의 프로젝트를 만들어 예제를 실습할 것이다!
• 윈도우 cmd 창에서 다음 코드를 작성해서 빈 프로젝트를 생성한다

expo init react-native-component

• 사실 리액트 네이티브 실습할 때 매번 빈 프로젝트를 생성하지는 않는다
  • App.js를 복사 및 붙여넣기 해서 실습코드를 저장하고, 기기를 통해 확인할 실습 코드들만 App.js 파일에 있으면 된다

3.1 JSX

App.js에 작성할 jsx 문법에 대해 간단하게 알아보도록 하겠다

1. 하나의 요소만 리턴

• JSX에서는 여러 개의 요소를 표현할 경우 반드시 하나의 부모로 감싸야 한다
• 반드시 하나의 요소만 return하기 때문!!!

<View> 컴포넌트

• <View> 태그는 UI를 구성하는 가장 기본적인 요소로 웹 프로그래밍에서 <div> 태그와 비슷한 역할을 하는 컴포넌트

App.js 파일의 메인 함수가 다음과 같을 때 <Text>와 <StatusBar> 를 <View> 로 감싸서 하나의 요소만 return 할 수 있도록 한다

...
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>
  );
}
...

<Fragment> 컴포넌트

• <View> 컴포넌트 말고 <Fragment> 컴포넌트를 사용해서 여러 개의 컴포넌트를 반환할 수도 있다

import { StatusBar } from 'expo-status-bar';
import React, { Fragment } from 'react';
import { Text } 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>
  );
}
...

• <Fragment> 컴포넌트는 다음과 같이 단축 문법을 제공한다

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

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

2. 자바스크립트 변수

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

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

export default function App() {
  const name = 'Gummy';
  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,
  }
});

아이폰 expo 앱에서 위 코드의 실행화면은 다음과 같다

3. 자바스크립트 조건문

if 조건문

다음과 같이 아주아주 간단한 조건문을 사용해보았다. 아주 유치하게 변수 name을 다음과 같이 변경했보았다.

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

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

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

삼항 연산자

jsx 내부에서 if 조건문 외에도 삼항 연산자를 이용해서 다음과 같이 표현할 수 있다

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

name이 Gummy면 화면에 My name is Gummy Bear가 출력되고,
아니면 화면에 My name is React Native가 출력된다

AND 연산자와 OR 연산자

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

• jsx에서 false는 렌더링되지 않기 때문에 AND 연산자 앞의 조건이 참일 때 뒤의 내용이 나타난다
• 따라서 위의 코드 실행 결과 My name is Gummy가 화면에 출력됨

4. null과 undefined

• jsx의 경우 null은 허용하지만 undefined는 오류가 발생함
• App.js 파일의 메인 메소드에 return null;을 작성할 경우 정상적으로 동작하지만(당연히 화면에는 아무것도 나타나지 않음)
• return undefined; 할 경우 오류가 발생한다

5. 주석

• jsx의 주석은 {/* */}를 이용하여 작성한다
• 단 태그 안에 주석을 사용할 경우 자바스크립트 처럼 //나 /**/를 사용할 수 있다

6. 스타일링

• 자세한 내용은 4장에서, 여기서는 인라인inline 스타일링에 대해 알아보도록 하자
• JSX에서는 HTML과 달리 sytle에 문자열로 입력하는 것이 아니라 객체 형태로 입력해야 한다
• background-color과 같이 하이픈(-)으로 연결된 이름은 하이픈을 제거하고 카멜 표기법camel case으로 backgroundColor과 같이 작성해야 한다

export default function App() {
  const name = 'Gummy';
  return (
    <View
     style={{
       flex:1,
       backgroundColor: '#fff',
       alignItems: 'center',
       justifyContent: 'center',
     }}
    >
      <Text>My name is Gummy Bear</Text>
    </View>
  );
}