JS - JSX?

1. JSX

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

function App(){
	return (
    <div>
    	Hello<b>react</b>
    </div>
  );
}

위와 같은 코드는 아래와 같이 변환된다.
(브라우저에서 실행 전 코드가 번들링되는 과정에서 바벨을 사용하여 일반 JS형태의 코드로 변환)

function App(){
	return React.createElement("div",null,"Hello",React.createElement("b",null,"react"));
}

* 바벨 ?  초기에는 ES6코드를 ES5코드로 변환해주는 컴파일러 역할을 하였고, 현재는 바벨을 이용해 JSX문법, TS 같은 정적 타입 언어, 제안 단계(정식문법이 아닌것들) 등을 사용 가능하게 해주고 있다.

• JSX는 JavaScript를 확장한 문법(JS + XML) 으로 React와 함께 사용하는 것을 권한다.
• JSX는 주로 React에서 쓰이며, 자바스크립트 문법은 아니다.

2. JSX 사용 규칙

   2- 1. 감싸인 요소

• 컴포넌트에 여러 요소가 있으면 부모 테그로 감싸줘야한다.
• 혹은 react모듈에서 Fragment라는 컴포넌트를 불러와서 감싸줘야 한다.

=> 잘못된 코드 
function App(){
	return(
    	<h1>Hello</h1>
        <h2>Test</h2>
    )
}

=> 올바른 코드 1
function App(){
	return(
    <div>
    	<h1>Heollo</h1>
        <h2>Test</h2>
    </div>
  )
}

=> 올바른 코드 2
import React,{Fragment} from 'react';

function App (){
	retunr(
    <Fragment>
    	<h1>Hello</h1>
        <h2>Test</h2>
    </Fragment>
  )
}

=> Fragment는 다음과 같은 형태도 가능
function App(){
	return{
     <>
    	<h1>Hello</h1>
        <h2>Test</h2>
     <>
  )
}

* Fragment ?  React16 이전 버전에서는 하나의 엘리먼트만 리턴 가능한 특성때문에 여러개의 테그를 리턴하기 위해 부모 태그가 필요했고, 16버전에 추가된 Fragment를 통해 묶으면 여러 개의 태그를 그룹화가 가능하다.

• 불필요한 Dom node 생성을 막아 메모리를 적게 사용가능하다.
• css 메커니즘 상 부모 자식 관계를 가지고 있기 때문에 엘리먼트 사이에 <div>추가하면 스타일이 틀어질 수 있는 상황 방지가 가능하다.​

 

   2- 2. 내부 코드에 { } 로 감싸면 JS 표현식 작성이 가능하다. 
     - 조건부 렌더링

• JS 표현식에서는 if문을 사용할 수 없다. 하지만  삼항연산자는 사용 가능하다.
•  특정 조건을 만족할 때만 보여주도록하려면 AND 연산자 (&&)를 사용 가능하다.

function App(){
	const name = 'react';
    return(
    <div>
     {name === 'react' ? (<h1>type1</h1>) : (<h1>type2</h1>)} // 조건부 연산자를 통한 조건부 렌더링
     {name === 'react' && <h1>tpye3</h1>} // AND 연산자를 통한 조건부 렌더링		
    </div>
  )
}

 

*참고 https://developerntraveler.tistory.com/54

[React 기초] JSX란? / JSX 문법