[리액트(React)] JSX

// JSX

- A syntax extension to JavaScript > 자바스크립트 확장 문법

- JavaScript + XML / HTML

const hi = <h1>Hello!</h1>

- 간결한 코드 > 가독성 향상

- Injection Attacks를 방어할 수 있다.

---

import React from 'react';

function Post(props) {
  return (
    <div>
      <h1>{`안녕하세요? ${props.name}입니다.`}</h1>
      <h2>{`${props.category} 공부 중입니다.`}</h2>
    </div>
  );
}

export default Post;

 

import React from 'react';
import Post from './Post';

function Blog(props) {
  return (
    <div>
      <Post name='나무의 하루' category='리액트'></Post>
    </div>
  );
}

export default Blog;

 

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import Blog from './chapter_03/Library';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Blog />
  </React.StrictMode>,
);

// 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();