REACT : JSX 문법

REACT : JSX  (Java Script XML) 문법

 

JSX 이란?

---

import React from 'react';
export default function Jsx() {

	자바스크립트(기능)을 입력하는 부분
    
    return(
    	html을 입력하는 부분
    )
}

 

• JSX는 JavaScript에 XML을 확장한 문법이다.
• React로 프로젝트를 개발할 때 사용한다. → 공식적인 자바스크립트 문법은 아니다.
• JSX는 하나의 파일에 Javascript와 HTML을 동시에 작성하기 때문에 간편하다.
• retrun을 기준으로 위는 자바스크립트(기능)를 입력하고 아래는 HTML을 입력한다.
  
• 기존 HTML에서는 소문자로 작성했지만JSX 에서는 대문자가 들어간다.

 

// 기존 HTML 방식
<div class="box">
</div>
<button onclick="name()">버튼</button>

// JSX 방식

<div className="box">
</div>

<button onClick="name()">버튼</button>

 

---

 

JSX 문법

---

1. 반드시 상위 요소가 감싸는 형태여야 한다.

export default function Jsx(){
    return(
    <div>
            <div className='title'>JSX방식</div>
        </div>
    )
}

• <div>로 전체를 감싼 후 내용을 입력하였다.

 

export default function Jsx(){
    return(
        <Fragment>
            <div className='title'>JSX방식</div>
            <input onChange={check()}></input>
        </Fragment>
    )
}

• <Fragment>로 전체를 감싼 후 내용을 입력하였다.  → react에서 제공하는 기능이다.
• JSX전체를 감싸주는 역할을 위해 만들어진 기능이며 버전이 올라가며 소괄호로 감싸주기만 하는 형태로 바뀌었다 (하단 예시 참고)

 

export default function Jsx(){
    return(
        <>
            <div className='title'>JSX방식</div>
        </>
    )
}

 

---

2. 자바스크립트 표현식

import React from 'react';
export default function Jsx() {

	자바스크립트(기능)을 입력하는 부분
    
    return(
    )
}

• JSX또한 자바스크립트 기반으로 만들어졌기 때문에 유효한 모든 JavaScript 표현식을 사용할 수 있다.
• return()의 윗부분에 넣으면 된다.