[React] 리액트 기초 배우기 #2 JSX란?

 

해당 글은 리액트에서 제공하는 자습서에 내용을 덧붙이고 풀어서  작성한 글입니다. 
원문 : https://ko.reactjs.org/docs/getting-started.html

시작하기 – React

 

이전에 생성했던 src/app.js의 소스코드를 수정하겠습니다.

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

//추가
const element = <div>This is JSX</div>;

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello React!
          
          {/*추가*/}
          { element }
          
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

const element = <div>This is JSX</div>

상단에 추가한 이러한 문법은 문자열도 아니고, html도 아닙니다.

JSX라고 불리는 Javascript를 확장한 문법입니다. 

해당 코드로 리액트 element를 만들 수 있습니다.

따라서 element라는 const는 div element를 나타냅니다.

이렇게 생성된 element는 html태그 안에서 괄호( {} ) 안에 담겨서 사용될 수 있습니다.

이렇게 생성한 div element가 괄호로 지정한 위치에 렌더링 되는 것을 볼 수 있습니다.

 

같은 방식으로 함수를 이용해 element를 생성할 수도 있습니다.

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


const element = <div>This is JSX</div>;

//추가
function greeting(name) {
  return "Hello! " + name;
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello React!
          { element }

          {/*추가*/}
          <h1>
            {greeting('Pengun!')}
          </h1>

        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

JSX는 표현식이기 때문에 if나 for문 안에서 사용될 수도 있습니다.

function greeting(name) {
  if(name === 'Pengun'){
    return "Hello! " + name;
  }
  else {
    return "Hello! Guest";
  }
}

 

const element = <img src={user.avatarUrl}></img>;

JSX표현식 내부에서 어트리뷰트에 Javascript표현식을 사용할 수도 있습니다.

const element = (
    <div>
      <h1>JSX</h1>
      <div>여러줄도 정의할 수 있습니다.</div>
    </div>
);

괄호 ()로 묶어서 여러줄도 정의할 수 있습니다.