[구름EDU|처음만난React#2] JSX란 무엇인가?

---

본 게시글은 구름EDU 처음 만난 React 온라인강의를 시청한 후 학습한 정보를 기록하는 목적의 게시글입니다.

생각의 흐름에 따라 작성된 게시글입니다. 가독성이 떨어질 수 있습니다.

처음 만난 React

처음 만난 React(리액트) - 구름EDU

구름 EDU

구름EDU - 모두를 위한 맞춤형 IT교육

---

 

JSX : A Syntax extension to JavaScript

> JavaScript + XML / HTML

 ex)

const element = <h1>Hello, world!</h1>

> 좌항은 JavaScript, 우항은 HTML, 대입연산자 '='

JSX의 장점

1. 코드가 정말 간결해짐 (이건 인정)

2. 가독성 향상 (코드를 안다는 전제 하에?)

3. Debug 향상성

4. Injection Attack 방어 용이

(나는 보안은 잘 몰라.. 근데 그럴 것 같긴 하네.. 선언한 친구 이외에는 코드에 끼어들 수가 없으니까)

JSX는 객체를 나타냄! : React elements 하나의 객체를 나타냄!! 무조건 하나! (중요)

 

JSX 사용법

ex)

const name = 'Josh Perez';

const element = <h1>Hello, {name}</h1>;

 

ReactDOM.render(

    element;

    document.getElementById('root')

);

> HTML / XML 쓰다가 JavaScript쓰고 싶을 때 {}로 감싸주면 됨

---

{Project Name} / src / index.js

기존코드

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

 

ReactDOM.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

  document.getElementById('root')

);

 

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

 

바꿀코드

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

 

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

 

const element = <h1>Hello, JSX!</h1>

ReactDOM.render(

  element,

  document.getElementById('root')

);

 

reportWebVitals();

응용1

const name = "JSX";

const element = <h1>Hello, {name}}!</h1>

응용2

const name = {

    firstName: "JSX",

    lastName: "React",

}

const element = <h1>Hello, {name.firstName + " " + name.lastName}!</h1>

응용3

const formatName = function (name){

    return name.firstName + " " + name.lastName;

}

 

const name = {

    firstName: "JSX",

    lastName: "React",

}

 

const element = <h1>Hello, {formatName(name)}!</h1>