[React.js] JSX

JSX란

JSX는 리액트에서 사용하는 자바스크립트와 HTML을 동시에 사용할 수 있는 템플릿 언어이다.

JSX로 작성된 코드는 브라우저에서 실행하기 전에 바벨을 통해 일반 자바스크립트 코드로 변환된다.

import React from 'react';

function App() {
  return (
    <div className="App">
      Hello World!
    </div>
  );
}

export default App;

---

JSX 문법

• 하나의 컴포넌트는 무조건 무언가를 return 해야함
• 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 함

// 잘못된 코드
function App(){
	return(
    	<h1>Hello</h1>
        <h2>Is it working well?</h2>
    )
}

// 올바른 코드
function App(){
	return(
    	<div>
          <h1>Hello</h1>
          <h2>Is it working well?</h2>
        </div>
    )
}

// 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>
        <>
    )
}

 

• JSX 내부에서 { } 사이에 자바스크립트 표현식을 작성할 수 있음

function App(){
	const name = 'react';
	return(
    	<>
          <h1>Hello! {name}</h1>
          <h2>Is it working well?</h2>
        <>
    )
}

 

• 조건부 연산자(삼항 연산자)의 사용
  - if문은 자바스크립트 표현식이 아니므로 JSX 내부에서 사용할 수 없음 (for문 등도 사용 불가)
  - 이 경우 JSX 밖에서 사용하거나 { } 안에 조건부 연산자를 사용해야 함

function App(){
	const name = 'react';
	return(
    	<div>
        	{name === 'react'? (<h1>This is react</h1>) : (<h2>This isn't react</h2>)}
        </div>
    )
}

 

• HTML 속성 이름 대신 camelCase 프로퍼티 명명 규칙 사용
• CSS 클래스를 사용할 때 class 속성이 아닌 className을 사용

---