[ReactNative] JSX | 처음 배우는 리액트네이티브 3-1장

시작하며

 

 

3장 실습을 시작하기 위해 먼저 프로젝트를 생성해주겠다.

 

아래의 코드로 Expo 환경의 프로젝트를 생성해주었다.

+ 생성 과정 중 expo -g cli가 node 환경과 맞지 않아 ExpoProject 폴더를 새로 생성한 후 로컬로 expo를 설치해주었다.

 

+ 에러가 났던 코드

WARNING: The legacy expo-cli does not support Node +17. Migrate to the new local Expo CLI:

 

npm i expo
npx create-expo-app 프로젝트 이름 --template blank //js 환경의 expo 프로젝트 생성

 

 

+ 노트북 web 환경에서 Expo 프로젝트 화면을 열기 위해 추가로 라이브러리를 설치해주었다.

터미널에서 프로젝트를 실행한 후 w 키를 누르면 나오는 라이브러리 설치 명령어를 그대로 입력해주면 된다.

npx expo start
npx expo install react-dom react-native-web @expo/metro-runtime
w // web 실행
a // 안드로이드 스튜디오 emulator 실행

 

 

web 환경을 위한 라이브러리까지 설치가 완료되면 다음과 같이 web 실행 url이 나올 것이다.

 

 

3장에서는 컴포넌트에 대해 알아보기 위해  ToDo List 실습을 진행하면서 리액트 네이티브를 공부해보려 한다.

 

 

---

 

JSX

 

 

1. JSX

객체 생성과 함수 호출을 위한 문법적 편의 제공을 위해 만들어진 확장 기능
(주로 리액트 프로젝트에서 사용하며 자바스크립트 코드와 HTML 코드를 함께 사용)

 

- 장점 : 가독성이 높고 작성이 쉬움, XML과 유사해 중첩 구조를 잘 나타낼 수 있음

 

 

1️⃣ 반드시 하나의 부모로 감싼다.

 

JSX에서는 여러개의 요소를 반환하는 경우에도

반드시 하나의 부모로 나머지 요소를 감싸서 반환해야한다.

 

 SyntaxError: /프로젝트 경로/react-native-component/App.js: Adjacent 3sx elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

 

하나의 부모가 아닌 독립적인 여러개의 요소를 반환할 경우

위와 같은 오류 메시지가 나타난다.

 

 

2️⃣ View 컴포넌트 vs Fragment 컴포넌트

 

View	UI 구성하는 가장 기본적인 요소, <div> 와 비슷한 역할
Fragment	특정 태그 역할을 하지 않고 여러개 컴포넌트를 반환하는 경우 사용 (단축 문법 : <></>)

 

 

3️⃣ 내부에서 JS 변수 전달 가능

 

JSX는 내부에서 변수를 전달하고 사용할 수 있다.

 

예를들어,

 

App.js에서 const 명령어를 이용해 name 변수를 설정하고

name 변수를 사용하고 싶은 Text 위치에 { } 중괄호를 이용해 변수를 입력해주겠다.

 

export default function App() {
  const name = 'React';

  return (
    <View style={styles.container}>
      <Text style={styles.text}>My name is {name}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

 

 

위와 같이 변수를 설정하고 코드에 입력하면 실행화면에 My name is React 라는 문구가 뜨며 변수가 정상적으로 입력됨을 확인할 수 있다.

 

변수를 설정하면 변경이 필요할 시 정의된 변수만 변경하면 된다는 코드 관리의 용이성이 존재한다.

 

 

안드로이드 스튜디오 emulator를 통해 화면을 확인해보겠다.

name 변수가 잘 적용된 것을 확인할 수 있다.

변수 적용 화면

 

 

 

728x90

 

 

 

4️⃣ 조건문

 

JSX는 내부에서 if 문, 삼항연산자, AND/OR 연산자를 사용할 수 있다.

 

주의해야할 점은 if 문과 같은 함수는 즉시실행 함수 형태로 작성해야한다.

 

 

예를 들어,

즉시 실행 함수 형태로 화살표함수를 이용해 if 조건문을 정의해주었고, 변수 name에 따라 화면에 출력이 달라지도록 만들어주었다.

const로 정의해둔 name 변수만 변경해주면 화면의 출력이 달라짐을 확인할 수 있다.

export default function App() {
  const name = 'React';

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

 

 

 

삼항 연산자는 if 조건문보다 좀 더 간단하게 사용할 수 있는 조건문이다.

name 변수가 React 이면 React로 출력되며, 이외의 경우에는 React Native라는 글자가 화면에 출력된다.

 My name is {name === 'React' ? 'React' : 'React Native‘}

 

 

 

AND 연산자는 JSX 내부에서 '&&'으로 사용할 수 있으며, OR 연산자는 '||'을 사용한다.

JSX에서는 false인 값은 렌더링 되지 않기 때문에 AND 연산자 조건이 참인 경우에만 내용이 출력된다.

OR 연산자는 반대로 조건이 거짓인 경우 내용이 출력되며, 참인 경우에는 출력되지 않는다.

 {name === 'React' && (
 	<Text style={styles.text}>My name is React</Text>
 )}
 {name !== 'React' && (
 	<Text style={styles.text}>My nane is not React</Text>
 )}

 

 

 

5️⃣ null 과 undefined

 

null	JSX에서 허용됨
undefined	오류 발생 ( Error: App(...): Nothing was returned from render. This usually means a return statement is missing. 0rz to render nothing, ret니rn null. )