JSX

JSX : 자바스크립트의 확장 문법이며 XML과 매우 유사하게 생겼다. 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

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

위의 코드는 아래와 같이 변환 된다.

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

 

※JSX는 공식적인 자바스크립트 문법이 아니며, 바벨을 통해 임의로 만든 문법이라 봐야한다.

 

JSX 장점

1. 가독성이 좋다.
2. HTML 태그 뿐 아니라 컴포넌트도 JSX 안에서 작성이 가능하다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

App.js에서 App 컴포넌트를 만들고 index.js에서는 HTML사용하듯이 App 컴포넌트를 사용한다.

 

※ReactDOM.render : 컴포넌트를 페이지에 렌더링 하는 역할, react-dom 모듈을 불러와 사용할 수 있다. 첫번째 파라미너테는 페이지에 렌더링을 할 내용을 JSX형태로 작성하며, 두 번째 파라미터에서는 해당 JSX를 렌더링 할 document 내부 요소를 설정한다.

 

JSX 문법

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.

import React from 'react';

function App() {
	return (
    	<h1>1</h1>
        <h2>2</h2>
    )
}

export default App;

위와 같이 사용하는 경우 에러가 발생한다.

import React from 'react';

function App() {
	return (
    <div>
    	<h1>1</h1>
        <h2>2</h2>
    </div>
    )
}

export default App;

 

※ DOM 트리 구조 :  Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙을 가지고 있다.
만약 div를 사용하지 않으려면 v16 이상 부터는 Fragment라는 컴포넌트를 추가로 불러와 사용한다.  Fragment는 <>로 표한 할 수 있다.

import React from 'react';

function App() {
	return (
    <Fragment>// <>
     	<h1>1</h1>
        <h2>2</h2>
    </Fragment>// </>
    )
}

export default App;

 

JS를 사용하기 위해서는 JSX내부에서 { }로 감싸주면 된다.

삼항 연산자(조건부 연산자) : JSX 내부의 자바스크립트 표현 식에서 if문을 사용할 수 없다. 조건에 따른 다른 내용을 렌더링 하기 위해서는 JSX밖에서 if문을 아용하여 사전에 값을 설정하거나, { }안에 조건부 연산자를 사용해야 한다.

import React from 'react';

function App() {
	const name = '리액트';
    return (
    	<div>
        	{name === '리액트' ? (
            	<h1>리액트O</h1>
                ) : (
               		<h2> 리액트X </h2>
                    )}
        </div>
      );
}

export default App;

 

&& 연산자 : 리액트에서는 fasle를 렌더링 할때는 null과 마찬가지로 아무것도 나타내지 않지만 0은 예외적으로 화면에 나타난다.

import React from 'react';

function App() {
	const name = '리액트';
    return (
    	<div>
        	{name === '리액트' && <h1> 리액트</h1>}
        </div>
      );
}

export default App;

 

undefined 렌더링 : 함수에서 undefined만 반환하여 렌더링 하는 상황이 발생하게 되면 에러가 발생하다. 그렇기에 어떠한 값이 undefined인 상황이 발생할 수 있다면 || 연산자를 이용하여 해당값이 undefined일 때 사용할 값을 지정할 수 있도록 해 오류를 방지한다.

import React from 'react';
import './App.css';

function App() {
	const name = undefined;
    return name || '값이 undefined입니다.';
}

export default App;

하지만 JSX 내부에서 undefined를 렌더링하는 것은 에러가 발생하지 않는다.

import React from 'react';
import './App.css';

function App() {
	const name = undefined;
    return <div>{ name }</div>; //{ name || 'undefined입니다'}로 원하는 값 지정 가능
}

export default App;

 

인라인 스타일링 : DOM 요소에 스타일을 적용할 때는 문자열 형태가 아니라 객체 형태로 넣어 주어야 한다. 스타일 이름 중에서 - 문자가 포함되는 이름들에는 - 문자를 없에고 카멜 표기법으로 작성해야 한다.

ex) background-color -> backgroundColor

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const name = '리액트';

  const style = {
    //background-color는 backgroundColor 카멜 표기법
    backgroundColor : 'black',
    color: 'aqua',
    fontSize: '48px', //font-size -> fontSize
    fontWeight: 'blod', //font-weight -> fontWeight
    padding: 16 //단위 생략시 px로 지정
  };
  return <div style={style}>{name}</div>
}

export default App;

 

className : JSX에서는 <div class = "name"></div>가 아닌 className으로 설정 해줘야 한다.

import React from 'react';
import './App.css';

function App() {
  const name = '리액트';
  return <div className="react">{name}</div>
}

export default App;

class를 사용해도 적용은 되나 console창에서 Warning 발생한다.

 

태그 닫기 : input태그의 경우 HTML에서는 닫지 않아도 작동하지만 JSX에서는 오류가 발생한다.

import React from 'react';
import './App.css';

function App() {
  const name = '리액트';
  return (
  <>
  <div className="react">{name}</div>
  <input></input>
  </>
  );
}

export default App;

 

주석 : {/* .... */} 이외에 //이나 /* 을 사용하면 페이지에 나타나게 된다.

import React from 'react';
import './App.css';

function App() {
  const name = '리액트';
  return (
  <>
  {/* 주석 작성 */}
    <div className="react"
      //시작 태그에 주석 작성은 가능
    >{name}
    </div>
    //주석
    /* 주석 */
    <input />
  </>
  );
}

export default App;

    //주석
    /* 주석 */

이 두개의 주석은 화면상에 나타나게 된다.