[React]리액트에서 사용하는 JSX 문법

[ JSX 란? ]

 

 JSX란 JavaScript + XML로 자바스크립트에 XML을 확장한 문법입니다. 기본적으로 React 에서는 JS를 사용하지만 통상적으로 JSX를 사용합니다. 

 

 JSX는 굉장히 직관적이며 코드의 가독성을 높여줍니다. 

 

 JSX는 JS에 기반하고 있지만 완전히 같지는 않습니다. 때문에 실행을 위해서는 JSX를 JS로 변환해야하는데 이 작업을 바벨(Babel)이 해줍니다. 

 

<!-- html -->
<div>
	<h1>Hello World</h1>
</div>

<!-- xml -->
<Say>
	<Hello>Hello World</Hello>
</Say>

 

// JS
function App() {
	return React.createElement("h1", null, "Hello World");
}

// JSX
function App() {
	return ( <h1> Hello World </h1> );
}

 

 

 

 

[ JSX 문법 ]

 

1. 모든 JSX 요소들은 하나의 부모 요소로 감싼다. 

 

 가상 DOM에서는 Component의 변화를 효율적으로 감지하기 위해 하나의 DOM 트리 구조로 만드는 규칙이 있기 때문에 하나의 부모 요소로 감싸주지 않으면 에러가 발생합니다. 

 

   ★ <div> 태그로 감싸기 - BAD

 

 <div> 태그로 요소를 감싸게 되면, 렌더링이 되었을 때 <div> 태그로 감싸진 형태로 렌더링 됩니다. 

 

 이렇게 되면 아무 의미 없는 <div> 태그가 생성되는 것이기 때문에 굉장히 비효율적이겠죠!

 

function App() {
	return (
    	<div>
            <Hello />
            <div> React practice </div>
        </div>
    );
};


function Hello() {
	return (
    	<div>
        	<h1>Hello World</h1>
        </div>
    );
);


	|
    	|
      렌더링
    	|
    	|


<div>
    <div>
    	<h1>Hello World</h1>
    </div>
    <div> React practice </div>
</div>

 

 

 

   ★ <Fragment> 태그로 감싸기 - GOOD

 

 <Fragment> 태그로 감싸게 되면 <div> 태그로 감쌌을 때처럼 불필요한 태그가 생성되지 않고 <Fragment> 태그를 제외한 내부 요소들만 렌더링이 됩니다. 

 

 또한 축약형이 가능해 굉장히 효율적입니다. 

 

 <Fragment></Fragment>  === <></>

 

 

function App() {
	return (
    	<div>
            <Hello />
            <div> React practice </div>
        </div>
    );
};


function Hello() {
	return (
    	<>
        	<h1>Hello World</h1>
        </>
    );
);


	|
    	|
      렌더링
    	|
    	|


<div>
    <h1>Hello World</h1>
    <div> React practice </div>
</div>

 

 

 

 

 

2. 자바스크립트의 표현식 사용 { }

 

 Brackets { }으로 감싸 요소 내부에 변수의 값을 전달할 수 있습니다. 

 

function Hello() {
    const name = 'Json';
	return (
    	<>
        	<h1>Hello { name }</h1>
        </>
    );
);

 

 

 

 

 

 

 

3. 조건부 렌더링 

 

   ★ if문 & case문

 

if문과 case문은 return문 안에서 사용이 불가하여, return 문 밖에서 사용해야합니다. 

 

굉장히 비효율적인 방법이죠!

 

function App(){
	const num = 1;
	if (num === 1){
		return <> num is 1 </>
	} else {
		return <> num is not 1 </>
	}
}

 

 

   ★ && , || 논리 연산자 이용하기

 

 && 연산자는 모든 항이 true일 경우, 마지막 항의 값을 반환합니다. 하나라도 false인 항이 존재한다면, 첫 번째 false인 항의 값을 반환합니다. 

 

 || 연산자는 첫 번째 true인 항을 반환하고, 만약 모든 항이 false일 경우 마지막 항의 값을 반환합니다. 

 

function App() {
  const a = '트루 a';
  const b = '트루 b';
  const c = 0;
  const d = NaN;
  return (
    <div>
      {a && b}<br />           // 트루 b
      {a && c}<br />           // 0
      {a && b && c}<br />      // 0
      {a || b}<br />           // 트루 a
      {a || c}<br />           // 트루 a
      {a || b || c}<br />      // 트루 a
      {c || d}                 // NaN
    </div>
  );
}

 

 

   ★ 삼항 연산자 이용하기 

 

 조건부 렌더링 방식 중 가장 편리한 방식이라고 생각드는 데요!

 

 return 문 안에서도 사용 가능하며 &&, || 연산자보다 더 효율적으로 코드를 작성할 수 있겠죠?

 

 { 조건문 ? ( true일 때 동작 ) : ( false일 때 동작) } 으로 작성하신 후, 하나의 요소로 감싸주면 됩니다. 

 

function App() {
  const flag = true;
  return (
    <div>
      { flag ? (
        <div>참 입니다.</div>
      ) : (
        <div>거짓 입니다.</div>
      )}
    </div>
  );
}