[React/리액트] JSX(JavaScript XML) | 변수값 출력

 

 

 

 

JSX(JavaScript XML)

- JSX는 리액트에서 UI를 표현하는데 사용되는 문법으로, HTML과 유사한 형태로 작성할 수 있다.

- JSX 안에서는 중괄호 {}를 사용하여 JavaScript 표현식을 포함시킬 수 있다.

- 이를 통해 변수, 함수 호출, 연산 결과 등을 동적으로 출력할 수 있다.

 

const name = 'Seul';
const greeting = <p>Hello, {name}!</p>;

ReactDOM.render(greeting, document.getElementById('root'));

// 출력결과: Hello, Seul!

 

 

---

JSX 예제

const App = function(){
  let msg = 'World';
  const addResult = function(x, y){
    return (
      <div>
        {x} + {y} = {x + y}
      </div>
    );
  };
  
  return (
    <>
      <h2>Hello {msg}!</h2>
      <hr />
      {addResult(4, 7)}
    </>
  );
};

 

 

이렇게 간편한 JSX문법을 사용한 코드를

바닐라js로 나타내면 코드의 양이 상당해진다.

 

반응형

 

바닐라js 예제

const App = function() {
  let msg = 'World';
  
  function addResult(x, y) {
    return x + y;
  }
  
  const h2Element = document.createElement('h2');
  h2Element.textContent = 'Hello ' + msg + '!';

  const hrElement = document.createElement('hr');

  const addResultElement = document.createElement('div');
  addResultElement.textContent = '4 + 7 = ' + addResult(4, 7);

  const rootElement = document.getElementById('root');
  rootElement.appendChild(h2Element);
  rootElement.appendChild(hrElement);
  rootElement.appendChild(addResultElement);
};

App();

 

이것이 바로 JSX를 이용하는 이유이다.