320x100
320x100

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

 

[React 기초] JSX란? / JSX 문법

JSX란? JSX는 자바스크립트의 확장 문법이다. XML과 매우 비슷하게 생겼으며, 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스

developerntraveler.tistory.com

 

babel 이란 무엇인가?

들어가며 최근에 react 프로젝트와 typescript 프로젝트를 거치면서 webpack 을 자주 써보고 세팅해보게 되었습니다. 처음에는 동작의 원리보다 요즘 잘나가는 프론트엔드 개발 환경 만들기라는 목표

bravenamme.github.io

 

[React Native] JSX의 기본 문법

네이티브에서 사용하는 JSX의 기본 문법들에 대해 알아보자!

velog.io

300x250
728x90