[ReactJS] JSX

JSX는 HTML 코드와 비슷하지만 자바스크립트로 변환됩니다.

리액트 컴포넌트를 사용할 때 쓰는 문법입니다.

 

꼭 닫혀야 하는 태그

<input type="text"> (x)

<input type="text" /> (o) - self closing tag

 

두개 이상의 Element는 무조건 하나의 Element로 감싸져 있어야 한다

// 따로 따로 Element가 있으면 error!
class ReactApp extents Component {
	render(){
    	return (
        	<div>hello!!!</div>
        	<div>world!!</div>
        )
    }
}

// 이렇게 두 개의 div Element는 Element로 감싸져야 한다
class ReactApp extents Component {
	render(){
    	return (
        <div>
        	<div>hello!!!</div>
        	<div>world!!</div>
        </div>
        )
    }
}

// React 16.2부터 도입된 Fragment를 쓰면 굳이 감싸기 용도 div를 안써도 됩니다.
import React,{Component, Fragment} from 'react';
class ReactApp extents Component {
	render(){
    	return (
        <Fragment>
        	<div>hello!!!</div>
        	<div>world!!</div>
         </Fragment>
        )
    }
}

JSX 안에 JavaScript 값 사용 (바인딩)

// 중괄호 사용
import React,{Component, Fragment} from 'react';
class ReactApp extents Component {
	render(){
    	const name = "react!";
    	return (
        <div>
        	hello {name}
         </div>
        )
    }
}

조건부 렌더링

JSX내부에선 조건부 렌더링을 할 때 if문을 사용할 수 없고 삼항 연산자, AND연산자를 사용합니다.

// 삼항연산자
import React,{Component, Fragment} from 'react';
class ReactApp extents Component {
	render(){
    	const name="JEAN"
    	return (
        <div>
        {
        	1+1 ===2? (<div>맞다!</div>): (<div>틀리다!</div>)
            name === 'JEAN' && <div>JEAN!!</div>
            
            (function(){ 
            	if(name==='JEAN') return <div>JEAN입니다</div>
               	if(name==='JIN') return <div>JIN입니다</div>
                return <div>둘 다 아니다</div>
            })() //함수를 감싸고 바로 호출
        }
         </div>
        )
    }
}

class말고 className!

일반적인 HTML에서는 class라는 예약어가 있는데 JSX에서는 className이라는 것을 주의합니다. 현재는 에러가 나지는 않지만 컨벤션을 잘 지키는 게 중요합니다

 

 

 

참고

누구든지 하는 리액트 : 초심자를 위한 react핵심 강좌  (inflearn)