개발 환경 설정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React_Syntax</title>
</head>
<body>
<div id="root"></div>
<!-- React_CDN -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- BABEL -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- custom script -->
<script type="text/babel"></script>
</body>
</html>
create, render
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React_Syntax</title>
</head>
<body>
<div id="root"></div>
<!-- React_CDN -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- BABEL -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- custom script -->
<script type="text/babel">
// JS 문법 -> 기존에 DOM으로 처리했던 방식
/*
const rootElement = document.getElementById('root')
const h1 = document.createElement('h1')
h1.setAttribute('className', 'title')
h1.textContent = 'Hello, React~'
// 여기까지 이와 같음. <h1 class="title">Hello, React~</h1>
rootElement.appendChild(h1)
*/
// React 문법
// const rootElement = document.getElementById('root')
// React.createElement(component, props, ...children) => 기본구조 // component = DOM, props = 속성
// 1) React.createElement('component', {children}) // children을 props화 시킴
// const element = React.createElement('h1', {children: 'Hello~'})
// 2) React.createElement('component', props, 'children') // children을 하나만 가졌을 때
// const element = React.createElement('h1', null, 'Hello!!')
// 3) React.createElement('component', props, ['children', 'children']) // children이 여러가지 일 때
// const element = React.createElement('h1', null, ['Hello~~', 'React~~'])
// 기본구조
/*
const element = React.createElement( // 가독성을 좋게 함
'h1',
{
className: 'title',
// children: 'Hello, React~'
children: ['Hello, React~~', 'Bye, JavaScript!!']
}
)
*/
// ReactDOM.render(element, rootElement)
// rendering시 최종 DOM만 실행(=> React.Fregment로 해결가능)
const rootElement = document.getElementById('root')
const element01 = React.createElement('div', null, 'Hello, React~')
const element02 = React.createElement('p', null, 'Bye, JavaScript!')
ReactDOM.render(element01, rootElement)
// ReactDOM.render(element02, rootElement)
// 둘 다 안나옴. 최종 하나만 rendering 시킴.
</script>
</body>
</html>
JSX
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React_Syntax</title>
</head>
<body>
<div id="root"></div>
<!-- React_CDN -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- BABEL -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- custom script -->
<script type="text/babel">
// JSX: 자바스크립트 확장 문법(자바스크립트와 HTML문법 공용)/ BABEL compile(Transpiler)
// 자바스크립트 가져올 때는 중괄호 사용하기. {}
const rootElement = document.getElementById('root')
// 일회용
// const element = <h1 className="title">Hello, React~~</h1> // BABEL이 이를 가능하게 해줌
// component의 재사용성
const text = 'Hello, React~~' // 이건 얼마든지 바뀔 수 있음
const userClassName = 'title'
// 방법1. ★
// const element01 = <h1 className={userClassName}>{text}</h1>
// 방법2.
// const element02 = <h1 className={userClassName} children={text}></h1>
// 방법3. ★
// const element03 = <h1 className={userClassName} children={text} />
const props = { // props가 많으면 이처럼 객체처리함.
className: userClassName,
children: text
}
const element = <h1 className={props.className} children={props.children} />
// const element = <h1 {...props} />
ReactDOM.render(element, rootElement)
// ReactDOM.render(element01, rootElement)
// ReactDOM.render(element02, rootElement)
// ReactDOM.render(element03, rootElement)
</script>
</body>
</html>
multielement
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React_Syntax</title>
</head>
<body>
<div id="root"></div>
<!-- React_CDN -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- BABEL -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- custom script -->
<script type="text/babel">
/******** Multi_element ********/
const rootElement = document.getElementById('root')
// 기존 사용법
// const element = <div className="title" children={React.createElement('span', null, 'Hello, React!')} />
// Multi_element 기본
/*
const element = (
<div
className = 'title' // ,(콤마) 찍으면 안됨 주의!!
children = {[ // 여러 개 넣을 거니까 배열처리
// React.createElement('span', null, 'Hello, React~~'),
// React.createElement('br', null),
// React.createElement('span', null, 'Bye, JavaScript~~')
<span>Hello, React~~</span>,
<br />,
<span>Bye, JavaScript</span>
]}
/>
)
*/
// element는 span, br, span 3개를 받을 수 없기 때문에, div 만들어서 배열로 넣어주었음.
const element = (
// 방법1.
/*
<React.Fragment
children = {[
<span>Hello, React~~</span>,
<br />,
<span>Bye, JavaScript~~</span>
]}
/>
*/
// 방법2.
/*
<React.Fragment>
{[
<span>Hello, React~~</span>,
<br />,
<span>Bye, JavaScript~~</span>
]}
</React.Fragment>
*/
// 방법3.
/*
<React.Fragment>
<span>Hello, React~~</span>
<br />
<span>Bye, JavaScript~~</span>
</React.Fragment>
*/
// 방법4.
<>
<span>Hello, React~~</span>
<br />
<span>Bye, JavaScript~~</span>
</>
)
ReactDOM.render(element, rootElement)
</script>
</body>
</html>