JSX
: JavaScript의 확장 문법으로, XML과 비슷한 태그 방식의 코드
: 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 babel을 사용하여 일반 JS 형태의 코드로 변환 됨
: 공식적인 JavaScript 문법은 아니며, babel에서 여러 문법을 지원할 수 있도록 preset 및 plugin을 설정
: babel을 통해 개발자들이 임의로 만든 문법 혹은 차기 JS의 문법을 사용할 수 있음
- JSX로 작성한 코드
function App(){
return (
<div>
Hello <b>react</b>
</div>
);
}
- babel을 통해 변환된 코드
function App(){
return React.createElement("div", null, "Hello", React.createElement("b", null "react"));
}
babel
: 자바스크립트 컴파일러
: 자바스크립트는 인터프리터 언어지만 babel을 통해 결과물을 만들 수 있음
=> 소스 대 소스 컴파일러 (transpiler)
- babel이 필요한 이유
: 프론트엔드의 경우 새로운 문법들과 기술이 자주 나오기 때문에 최신 브라우저에서도 지원하지 않는 경우가 존재
: 새로운 문법을 기존 브라우저에 적용하기 위해 babel을 통해 컴파일
=> babel = polifill 도구
- polyfill
: 브라우저에서 지원하지 않는 기능들에 대한 호환성 작업을 채워 넣는 행위
: babel은 문법을 변환하는 transpiler 역할
JSX의 문법규칙
function App(){
return(
<div>
<h1>Hello</h1>
<h2>Is it working well?</h2>
</div>
)
}
export default App;
// div요소를 사용하고 싶지 않을 때 Fragment라는 기능 사용
// 코드 상단 import 구문에서 react 모듈에 들어있는 Fragment라는 컴포넌트를 추가로 불러오기
import React, {Fragment} from 'react';
function App(){
return(
<Fragment>
<h1>Hello</h1>
<h2>Is it working well?</h2>
<Fragment>
)
}
// Fragment는 다음과 같은 형태로도 표현할 수 있다.
function App(){
return(
<>
<h1>Hello</h1>
<h2>Is it working well?</h2>
<>
)
}
export default App;
- 감싸인 요소
: 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 함
: JSX는 반드시 하나의 요소만 return 하기 때문
import React from 'react';
// 자바스크립트 표현
function App(){
const name = 'react';
return(
<>
<h1>Hello! {name}</h1>
<h2>Is it working well?</h2>
<>
)
}
export default App;
- 자바스크립트 표현
: JSX가 내부에서 코드를 { } 으로 감싸면 자바스크립트 표현식을 사용할 수 있음
import React from 'react';
// 자바스크립트 표현
function App(){
const name = 'react';
return(
<div>
{name === 'react'? (<h1>This is react</h1>) : (<h2>This isn't react</h2>)}
</div>
)
}
export default App;
- 조건부 연산자
: JSX의 내부의 자바스크립트 표현식에서는 if를 사용할 수 없음
: JSX 밖에서 if문을 사용하여 값을 설정하거나 { } 내부의 삼항 연산자를 이용해야함
import React from 'react';
// AND 연산자
function App(){
const name = 'rreact';
return(
<div>
{name === 'react' && <h1>It's correct</h1>}
</div>
)
}
export default App;
- AND 연산자를 이용한 조건부 렌더링
: 특정 조건을 만족할 때 렌더링 해야하는 항목을 && 연산자를 통해 간결하게 제어 가능
: react에서 렌더링을 할 때는 0외의 falsy한 값은 나타나지 않기 때문에 가능
import React from 'react';
import './App.css';
// undefined를 렌더링 하지 않기
function App(){
const name = 'undefined';
return name;
}
export default App;
- undefined 렌더링은 불가능
: react 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링 하는 상황을 만들 경우 오류 발생
: OR 연산자를 통해 undefined 외의 값도 나올 수 있도록 해야함
: JSX 내부에서 undefined를 렌더링 하는 것은 허용
JSX의 컴포넌트
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>
);
}
- <View> 컴포넌트
: UI를 구성하는 가장 기본적인 요소로 웹 프로그래밍의 <div>와 비슷한 역할 수행
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> 컴포넌트
: 여러 개의 컴포넌트를 반환 할 때 사용하는 컴포넌트
: <> ... <> 과 같은 단축 문법도 제공
※ 이외에도 React나 React-Native에서 제공하는 컴포넌트나, 외부 라이브러리에 의한 컴포넌트가 존재
Refference
'Programming > React-Native' 카테고리의 다른 글
리액트 네이티브 프로젝트 구조 (0) | 2022.08.17 |
---|---|
React-Native에서 데이터 전달하기 (props / state) (0) | 2022.08.17 |
Package com. signatures do not match previously installed version; ignoring (0) | 2022.08.17 |
React-Native aab 파일 배포 전 작동 확인 방법 (0) | 2022.08.17 |
React와 React-Native의 차이 (0) | 2022.08.16 |