[React] JSX

JavaScript에 XML을 추가한 확장 문법

 

📌 XML ( eXtensible Markup Language) 다른 목적의 마크업 언어를 만드는 데 사용되는 다목적 마크업 언어

 

---

 

JavaScript 내부에 마크업 코드를 작성할 수 있다

const element = <h1>Hello, world!</h1>

 

공식적인 JavaScript 문법이 아니기 때문에, Babel을 사용하여 JavaScript 형태의 코드로 변환하는 과정이 필요하다

const element = React.createElement(
	'h1', 👈 //tag
	null, 👈 //className이나 id, attribute 등
	'Hello, world!' 👈 //element
)

 

React에서 JSX 사용은 필수가 아니지만,

가독성과 익숙함, 높은 활용(재사용성)이라는 장점 덕에 대부분의 React 환경에서 JSX를 사용하는 것이다

 

---

 

기초 문법

 

1. 최상위 태그로 감싸는 형태

: 요소들을 반드시 하나의 요소로 묶어야 한다

const element = (
  <div> 👈
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
)

 

불필요한 <div> 대신 <Fragment> 를 사용할 수 있다

import { Fragment } from 'react' //👈 import로 불러와야한다

const element = (
  <Fragment> 👈
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </Fragment>
)

 

<Fragment> 의 축약형은 <> 이고, <>는 React에서만 동작한다

✨ import로 불러오지 않아도 되기 때문에 편리하다

const element = ( 
  <> 👈
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </>
)

 

*JSX 코드를 여러 줄 작성할 때는 ( 괄호 )로 묶어주는 것을 권장한다

: 자동 세미콜론 삽입을 피하게 해준다

const element = ( 👈
  <> 
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </>
) 👈

 

 

 

2. 닫힌 태그

태그는 무조건 닫혀있어야 한다(종료 태그가 없는 태그도 반드시 닫아줘야 한다)

const element = <img src={user.avatarUrl}></img>

//or

const element = <img src={user.avatarUrl} />

 

 

 

2-3. { 유효한 JS 표현식 }

JSX를 사용하면 중괄호 안에서 변수뿐만 아니라,

const name = 'Josh Perez'
const element = <h1>Hello, {name}</h1> 👈

ReactDOM.render(
  element,
  document.getElementById('root')
)

 

함수·반복문·조건문 등 JavaScript 모든 문법을 사용할 수 있다

function formatName(user) { 👈
  return user.firstName + ' ' + user.lastName
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
}

const element = (
  <h1>
    Hello, {formatName(user)}! 👈
  </h1>
)

ReactDOM.render(
  element,
  document.getElementById('root')
)

 

또한, attribute에도 표현식을 삽입할 수 있다

const element = <img src={user.avatarUrl} />

 

 

---

 

 

JSX  { /* 주석 처리 */ } 

const element = (
  <h1 className="greeting">
   { /* Hello, world! */ } 👈
  </h1>
)

 

 

 

Ref

Introducing JSX - React

Introducing JSX – React