SOAPLE 처음 만난 리액트 JSX

JSX 란?

JavaScript eXtension -> JS + XML/HTML

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

 

기본적인 React로 요소 만들기

 

React.createElement(
	type,  // 요소나 리액틑 컴포넌트
    [props], // 속성
    [...children] // 요소가 포함하고 있는 자식 요소들
)

 

 

JSX 의 역할

// JSX를 사용하지 않은 코드
class Hello extends React.Component {
	render() {
    	return React.createElement('div', null, `Hello ${this.props.toWhat}`);
    }
}

ReactDOM.render(
	React.createElement(Hello, { toWhat: `World` }, null),
    document.getElementById('root')
);

// JSX를 사용한 코드
class Hello extends React.Compnent {
	render() {
    	return <div>Hello {this.props.toWhat}</div>;
    }
}	

ReactDOM.render(
	<Hello toWhat="World" />,
    document.getElementById('root');
);

즉, JSX를 사용한 코드는 React.createElement()를 사용하지 않아도 <>로 써주면 자동으로 요소를 만들어준다.

 

// JSX를 사용한 코드
const el = ( 
	<h1 className="greeting">
    	Hello, world!
    </h1>
 )
 
 // JSX를 사용하지 않은 코드
 const el = React.createElement(
 	'h1',
    { className: 'greeting' },
    'Hello, world!'
 )

 

 

리액트 요소는 React.createElement()로 만들게 되는데 이를 JSX를 사용하면 쉽게 만들 수 있으며,

결과적으로 아래와 같은 객체가 생성되게 된다.

const el = {
	type : 'h1',
    props : {
		className : 'greeting',
        children : 'Hello, world!'
    }
}

 

 

JSX 장점

• 가독성 향상
• 간결한 코드
• Injection Attacks 방어 -> 입력창에 원하는 값이 아닌 소스코드를 입력하고 실행하게 만들어 해킹하는 것인데,  JSX는 이를 방지할 수 있다. 

 

 

JSX를 사용한 React 컴포넌트 만들기

컴포넌트를 만들고 -> index.js에서 만든 컴포넌트를 import 한 다음

터미널에 npm start 를 해준다. (터미널 상에서 npm을 종료할 때는 ctrl+c를 누른다)

 

import React from 'react';

function Book(props) {
  return (
    <div>
      <h1>{`이 책의 이름은 ${props.name} 입니다.`}</h1>
      <h2>{`이 책은 총 ${props.numOfPage}페이지로 이루어져 있습니다.`}</h2>
    </div>
  );
}

export default Book;

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

function Library(props) {
  return (
    <div>
      <Book name='처음 만난 파이썬' numOfPage={300}/>
      <Book name='처음 만난 AWS' numOfPage={400}/>
      <Book name='처음 만난 리액트' numOfPage={100}/>
    </div>
  );
}

export default Library;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import Library from './chapter03/Library';

ReactDOM.render(
  <React.StrictMode>
    <Library />
  </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();