[React] JSX

김현주·2022년 1월 5일

목록 보기

2/12

1. JSX란?

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

function App(){
  return (
    <div>
      Hello <b>react</b>
    </div>
  );
}
이렇게 작성된 코드는 다음과 같이 변환됩니다.
function App(){
  return React.createElement("div", null, Hello, React.createElement("b", null, "react"));
}

2. JSX의 장점

① 보기 쉽고 익숙하다

일반 자바스크립트만 사용한 코드에 비해 JSX를 사용하면 가독성이 높고 작성하기도 쉽다.

② 더욱 높은 활용도

JSX에서는 우리가 알고 있는 div나 span같은 HTML태그를 사용할 수 있을 뿐만 아니라, 앞으로 만들 컴포넌트도 JSX안에서 작성할 수 있다.

// ( src/index.js )
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root') // id가 root인 요소 안에 렌더링을 하도록 설정
);

❓ 참고) ReactDOM.render는 무엇인가요?
→ 이 코드는 컴포넌트를 페이지에 렌더링 하는 역할을 하며, react-dom 모듈을 불러와 사용할 수 있다.
→ 첫 번째 파라미터에는 페이지에 렌더링할 내용을 JSX 형태로 작성
→ 두 번째 파라미터에는 해당 JSX를 렌더링 할 document 내부 요소를 설정한다.
→ id = 'root'는 public/index.html 파일에 있다.

3. JSX 문법

① 감싸인 요소

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.
❓ 왜 하나의 요소로 감싸 주어야 하나요?
→ Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리구조로 이루어져야 한다는 규칙이 있기 때문이다.

// ( src/App.js )
 /* 잘못된코드 */
import React from 'react';

function App(){
	return(
    	<h1>리액트시작!</h1>
      	<h2>Hello</h2>
    );
}

export default App;

 /* 올바른코드 */
import React from 'react';

function App(){
	return(
      	<div>
    		<h1> 리액트시작! </h1>
      		<h2> Hello </h2>
    	</div>
    );
}

export default App;

/* 리액트v16이상부터는 Fragment라는 기능을 사용할 수 있다. */
import React, {Fragment} from 'react';

function App(){
	return(
    	<Fragment>
        	<h1> 리액트시작! </h1>
        	<h2> Hello </h2>
        </Fragment>
    );
}

export default App;
{ /* Fragment대신 <>로 표현이 가능하다 */ }

② 자바스크립트 표현

JSX안에서는 자바스크립트 표현식을 쓸 수 있다.
자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 {}로 감싸야 한다.

import React from 'react';

function App(){
  const name = "리액트";
	return(
    	<>
        	<h1> {name} 시작! </h1>
        	<h2> Hello </h2>
        </>
    );
}

③ if문 대신 조건부 연산자(=삼항연산자)

JSX내부의 자바스크립트 표현식에서는 if문을 사용할 수 없다.
하지만 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX밖에서 if문을 사용하여 사전에 값을 설정하거나, {}안에 조건부 연산자를 사용하면 된다.

import React from 'react';

function App(){
	const name = "리액트";
  		return(
        	<div>
            	{ name  === '리액트' ? ( <h1>리액트입니다.</h1> ) : ( <h2>리액트가아닙니다.</h2> ) }
            </div>
        );
}

export default App;

④ AND 연산자(&&)를 사용한 조건부 렌더링

import React from 'react';

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

&&연산자로 조건부 렌더링을 할 수 있는 이유는 리액트에서 false를 렌더링 할때는 null과 마찬가지로 아무것도 나타나지 않기 때문이다.
false한 값인 0은 예외적으로 화면에 나타난다.

const number = 0;
return number && <div>내용</div>

이 코드는 화면에 '내용'을 보여주는 것이 아니라 숫자 0을 보여준다.

⑤ undefined를 렌더링 하지 않기

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링 하는 상황을 만들면 안된다.

/* 다음은 오류를 발생시키는 코드 입니다. */
import React from 'react';
import './App.css';

function App(){
	const name = undefined;
  	return name;
}

export default App;

위의 코드를 저장한 후 브라우저를 확인해 보면 다음과 같은 오류가 나온다.

App(...): Nothing was returned from render. This usually means a return statement is missing.
Or, to render nothing, return null.

어떤 값이 undefined일 수도 있다면, OR(||)연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있다.

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

function App(){
	const name = undefined;
  	return name || '값이 undefined입니다.';
  	{ /* 한 줄로 표현할 수 있는 JSX는 감싸지 않아도 된다. */ }
}

export default App;

반면 JSX내부에서 undefined를 렌더링하는 것은 괜찮다.

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

function App(){
	const name = undefined;
  	return (
    	<div>
        	{ name };
        </div>
    );
}
export default App;

⑥ 인라인 스타일링

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어야 한다.
카멜 표기법(camelCase)로 작성해야 한다.
: background-color → backgroundColor

// ( src/App.js )
import React from 'react';

function App(){
  const name = 'react';
  return (
    <div
      style = {{
      	backgroundColor: 'black', // background-color → backgroundColor
        color: 'white',
        fontSize: '48px', // font-size → fontSize
        fontWeight: 'bold', // font-weight → fontWeight
        padding: 16 // 단위를 생략하면 px로 지정된다.
      }}>
      { name }
    </div>
  )
}

export default App;

⑦ class대신 className사용

JSX에서는 class가 아닌 className으로 설정해주어야 한다.

// ( src/App.js )
import React from 'react';
import './App.css';

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

export default App;

// ( src/App.css )
.react {
	/* css내용 */
}

⑧ 꼭 닫아야 하는 태그

HTML 코드를 작성할 때에는 태그를 닫지 않은 상태로 코드를 작성하기도 한다.
예) <input>

// ( src/App.js )
import React from 'react';
import './App.css';

function App(){
  const name = 'react';
  return (
    <>
      <div className="react"> { name }</div>
      <input></input>
      <input /> // self-closing태그
    </>
  );
}