[React] JSX란 대체 무엇인지? JSX 정의 및 문법 파헤치기

안녕하세요, Will 입니다.

 

오늘은 JSX가 무엇인지, 어떻게 사용하는지에 대해 작성해 보도록 하겠습니다.

 

 

JSX란?

 

JSX는 Javascript의 확장 문법으로 Javascript XML의 줄임말이에요.

 

React 팀에서 직접 고안한 문법이구요, React 개발을 위해

 

Javascript와 HTML을 섞어서 사용하는 문법입니다.

 

 

JSX는 사용자 인터페이스 개발을 쉽고, 편하게 가능하게 해줍니다.

 

쉽게 얘기해서 사용자 지정 HTML이라고도 할 수 있겠습니다.

 

 

코드를 보시면 좀 더 이해가 쉬우실 거에요.

 

 

아래 코드는 CRA로 처음 프로젝트를 생성했을 때 코드입니다. 

import logo from './logo.svg';
import './App.css';
 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
 
export default App;

 

처음 2줄

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

import 구문이 사용되었습니다. 이 부분은 React의 매우 중요한 개념이므로 설명을 해볼게요.

 

import는 특정 file을 불러오는 것이며 리액트 프로젝트의 js 파일에서 export를 통해 객체, 함수 또는 컴포넌트를 내보내면, 다른 파일에서 해당 객체나 함수, 컴포넌트를 import로 불러와 사용할 수 있습니다.

 

표준 자바스크립트에서는 에러가 발생되지만, 리액트에서는 에러가 발생하지 않습니다.

 

그 이유는 리액트 프로젝트 내 속해있는 '번들러' 덕분입니다. 파일을 묶듯 연결하는 것이죠.

 

대표적인 번들러로 웹팩(Webpack)이 있습니다.

 

번들러를 사용하면 import로 모듈을 불러오는 코드를 작성하였을 때, 불러온 모듈을 합쳐 하나의 파일을 생성해 줍니다.

 

웹팩을 사용하면 SVG, CSS 파일도 불러올 수 있습니다. 이건 웹팩의 로더(loader)라는 기능 덕분에 가능합니다. 

ex) css-loader는 CSS 파일을 불러올 수 있게 해줍니다.

 

babel-loader는 js 파일을 불러오면서 최신 문법의 js 코드를 ES5 문법으로 변환해 줍니다.

 

 

이번에는 import 하단의 코드를 분석해보겠습니다.

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}export default App; 

이 코드는 App이라는 컴포넌트를 만들어 주는 코드입니다. function 키워드를 사용하여 함수 컴포넌트라고 합니다.

 

function App을 들여다 보면 return 코드가 있고, return 코드 내부를 보면 HTML 처럼 보이는 것들이 있습니다. 이런 코드를 JSX라고 부릅니다.

 

 

자바스크립트 내에 HTML을 작성하였죠?(함수 안에HTML을 작성)

 

이렇게 작성하여도 브라우저에서 정상 동작을 하게 되는데요,

 

 

그건 리액트 배후에 있는 Babel이라는 Javascript 컴파일러 덕분이에요.

 

JSX를 표준 Javascript로 변환시켜 준다고 생각하시면 됩니다.

 

자 그럼 구체적인 문법을 한번 알아보겠습니다.

 

JSX 문법

 

1. 감싸기

 

JSX는 여러 요소가 있으면 반드시 부모 요소 하나로 감싸야 합니다. (이유는 아래에!)

 

function App() {
  return (
        <h1>{name} 리액트 안녕!</h1>
         <h2>정상 동작하니</h2>
  );
}

 

h1 태그와 h2 태그가 동일 선상에 있는데 이 둘을 감싸주는 태그가 없습니다.

 

위 코드는 에러가 발생합니다. 이는 부모 요소 하나에 의해 감싸져 있지 않기 때문이에요.

 

다음과 같이 코드를 작성해야 합니다.

function App() {
  return (
      <div>
        <h1>{name} 리액트 안녕!</h1>
         <h2>정상 동작하니</h2>
    </div>
  );
}

div 태그로 감싸준 모습. div를 사용하지 않고, <> </>로 이름없는 태그를 써도 됩니다.

 

 

왜 여러 개의 요소를 하나의 요소로 감싸야 할까요?

그건 리액트의 특징인 Virtual DOM 때문인데요,

Virtual DOM은 컴포넌트 변화를 효율적으로 비교할 수 있도록 React 팀에서 고안한 개념으로

Virtual DOM 동작을 위해선 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙을 가지고 있습니다.

 

fuction App의 Return 값은 결국 JavaScript Object 1개로 변환이 되는데,

그러기 위해선 반드시 최상위 태그도 1개여야 합니다.

 

 

2. 자바스크립트 표현

 

JSX 안에서도 자바스크립트 표현을 쓸 수 있습니다. JSX 내부에서 코드를 { }로 감싸면 됩니다.

위 코드에서는 name을 중괄호로 감쌌는데요, 여기서 name은 HTML의 텍스트가 아닌 Javascript 변수가 됩니다.

 

name 값이 Will이라면 브라우저 상에 Will로 표기가 되는 것이죠.

 

 

3. if문 대신 조건부 연산자(삼항 연산자)

 

JSX 내부 표현식에서 if 문을 사용할 수 없습니다. 

조건에 따른 분기가 필요할 때는 JSX 밖에서 if문을 사용하여 값을 설정하거나,

조건부 연산자(삼항 연산자)를 사용하면 됩니다.

 

물론 && 및 || 연산자도 사용 가능합니다.

 

 

 

 

4. 인라인 스타일링

 

리액트에서 DOM 요소에 스타일링을 적용할 땐 객체 형태로 넣어주어야 합니다.

 

그리고 background-color와 같이 -문자가 포함되는 이름은 -를 없애고 카멜 표기법으로 작성해야됩니다.

 

background-color => backgroundColor

 

function App() {
  const name = '리액트';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: '48px', //font-size > fontSize
    fontWeight: 'bold', //font-weight > fontWeight
    padding: 16,
  }
  return <div style={style}>{name}</div>;
}
 
export default App;

위 예제에서도 font-size > fontSize, font-weight > fontWeight로 작성된 것을 알 수 있습니다.

 

5. class 대신 className

function App() {
 
  const name='리액트';
  return <div className="react">{name}</div>;
}
 
export default App;
 
참고 App.css
 
.react {
  background: 'black';
  color: 'aqua';
  font-size: '48px'; 
  font-weight: 'bold';
  padding: 16;
}

위와 같이 CSS 적용을 위해 className을 써야 합니다.

 

근데 class를 써도 CSS 적용이 되긴합니다. 그러나 경고가 발생되므로 calssName을 써주도록 합시다.

 

*리액트 v16 이상부터 class를 className으로 변경 해주고 경고를 띄웁니다.

 

 

오늘은 JSX의 개념과 문법에 대해 정리해 보았습니다.

 

이 글을 보신 분들 모두 멋진 React 개발자가 되시길 기원합니다.