[REACT.01] React강의 01

사용자 interface를 위한, React : javascript library 

- library : 제어권한이 개발자들한테 있다. 

 

JSX: A Syntex Exentansion of JavaScript

 

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

js + html 코드가 합쳐져있는 jsx 코드이다.

-> XML & HTML 코드를 javascript 로 바꾸는 과정에서 JSX를 사용한다.

//JSX 사용한 코드
const element = {
	<h1 className = "kakao">
    kakao Cloud School
    </h1>
}
//JSX 사용하지 않은 코드
const elemnet = React.createElement(
	'h1',
    { className : 'kakao'},
    'kakao Cloud School'
)

react element 를 생성한다. 

React.createElement(
	type,
    [propertypes],
    [..children]
)

 

 

 

JSX의 장점

- 코드의 간결함

- 가독성의 향상

- injection Attacks 방어 

JSX = Javascrip + HTML / CSS
html 혹은 xml 코드 사이에 { js변수 혹은 함수 호출  }   로 사용

const name = '민갱';
const elemnet = <h1> hello, {name} </h1>

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

 

 

 

JSX 코드 예제

//Book.jsx

import React from "react";

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

export default book;

 //Library.jsx
 
 import React from "react";
 import Book from "./Book";
 
 function Library(propos){
 	return (
    	<div>
        	<Book name = "처음 만난 파이썬" numOfPage={300} />
            <Book name = "처음 만난 자바" numOfPage={400} />
            <Book name = "처음 만난 리렉트" numOfPage={500} />
        </div>
	);
)

export default Library;

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

import Library from './chap_03/Library';

ReactDom.render(
	<React StrictMode>
    	<Library/>
	</React StrictMode>,
    document.getElementById('root')
);