JSX란 무엇이며 왜 사용합니까?

JSX is a syntax extension to JavaScript and looks like this:

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

If you've not worked with React before, it may look a bit funny at first, but this syntax is neither a string nor HTML. Maybe it reminds you on a template language, but it is a syntax extension to JavaScript and comes with all the JavaScript features.

JSX produces React elements and is mainly used with React to describe what the UI should look like.

React embraces the fact that rendering logic is inherently coupled with other UI logic : how events are handled, how the state changes over time, and how the data is prepared for display.

Since JSX is a syntax extension to JavaScript you can use any valid JavaScript expression. Let's try it out. Let's declare the constant name a string and render it.

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

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

Let's try it with a function:

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Mario',
  lastName: 'Kandut',
};

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

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

After compilation JSX becomes regular JavaScript. JSX is an expression too, hence you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions.

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

You can use quotes to specify string literals as attributes:

const element = <div tabIndex="0"></div>;

You can also use curly braces to embed a JavaScript expression in an attribute:

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

Don’t put quotes around curly braces , it's either use quotes (for string values) or curly braces (for expressions).

Since JSX is closer to JavaScript than to HTML, React DOM uses camelCase property naming convention. Use className for class and tabIndex for tabindex .

If a tag is empty, you can close it immediately with, like XML:

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

JSX tags may contain children:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSX prevents Injection Attacks like XSS. It is safe to embed user input like this:

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

By default, React DOM escapes any values embedded in JSX before rendering them. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.

Babel compiles JSX down to React.createElement() calls.

These two examples are identical:

const element = <h1 className="greeting">Hello, world!</h1>;

const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, world!',
);

React.createElement() performs a few checks to help you write bug-free code but essentially it creates an object like this:

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!',
  },
};

These objects (React elements) are basically descriptions of what you want to see on the screen. React reads these objects and uses them to construct the DOM and keep it up to date.

• JSX is a syntax extension for JavaScript
• With JSX you can React easily
• React gives you error and warning messages when using JSX