Skills/React
230106 React function, component
개발자 윤구나
2023. 1. 6. 12:40
Multi-element
<!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>
<nav class="gnb">
<!--
<ul class="gnb_ul">
<li>로그인</li>
<li>회원가입</li>
<li>사이트맵</li>
</ul>
-->
</nav>
<div class="logo">
<!-- <div class="logo_txt">Front_End</div> -->
</div>
<ul class="lnb">
<!--
<li class="html">HTML5</li>
<li>CSS3</li>
<li>jQuery</li>
<li>JavaScript</li>
<li>React</li>
-->
</ul>
<!-- 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">
const rootGnb = document.querySelector('.gnb')
const rootLogo = document.querySelector('.logo')
const rootLnb = document.querySelector('.lnb')
const gnbElement = (
<ul
className = 'gnb_ul'
children = {[
<li>로그인</li>,
<li>회원가입</li>,
<li>사이트맵</li>
]}
/>
)
const logoElement = <div className="logo_txt" children="Front_End" />
const lnbElement = (
<>
<li className='html'>HTML5</li>
<li>CSS3</li>
<li>jQuery</li>
<li>JavaScript</li>
<li>React</li>
</>
)
ReactDOM.render(gnbElement, rootGnb)
ReactDOM.render(logoElement, rootLogo)
ReactDOM.render(lnbElement, rootLnb)
</script>
</body>
</html>Multi-element Test
<!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">
const rootElement = document.querySelector('#root')
const nodeElement = (
<>
<nav className="gnb">
<ul className='gnb_ul'>
<li>로그인</li>
<li>회원가입</li>
<li>사이트맵</li>
</ul>
</nav>
<div className='logo'>
<div className='logo_txt'>Front_End</div>
</div>
<ul className='lnb'>
<li className='html'>HTML5</li>
<li>CSS3</li>
<li>jQuery</li>
<li>JavaScript</li>
<li>React</li>
</ul>
</>
)
ReactDOM.render(nodeElement, rootElement)
</script>
</body>
</html>
Function-component
<!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">
/******** function component ********/
const rootElement = document.getElementById('root')
function MyComponent(props) { // component = 내가 만드는 거, 속성(레이아웃) 뿐 아니라 기능도 넣을 수 있음.
return ( // return으로 돌릴 수 있는 값은 하나. 여러 개를 돌리려면 React.Fragment 사용.
<div>
안녕하세요, <br />
지금 배우는 과목은 {props.subject} 입니다.
</div>
)
}
/*
const element = (
<MyComponent subject='React' />
)
*/
/*
const element = (
<>
<MyComponent subject='React' />
<MyComponent subject='HTML5' />
<MyComponent subject='CSS3' />
<MyComponent subject='JavaScript' />
</>
)
*/
MyComponent.defaultProps = { // 여러 개의 객체가 들어올 수 있음.
subject: 'HTML5 & CSS3'
}
// ReactDOM.render(element, rootElement)
// ReactDOM.render(<MyComponent subject='React' />, rootElement)
ReactDOM.render(<MyComponent />, rootElement)
</script>
</body>
</html>
비구조화 할당
<!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">
/******** function component ********/
const rootElement = document.getElementById('root')
// function component 기본
/*
const EnglishWord = function() {
return (
<>
<h3>Good</h3>
<span>좋은</span>
</>
)
}
const element = (
<>
{EnglishWord()}
</>
)
*/
// 비할당 방식의 익명함수
// 방법1.
/*
const EnglishWord = function(word, mean) {
return (
<>
<h3>{word}</h3>
<span>{mean}</span>
</>
)
}
const element = ( // 함수로 호출
<>
{EnglishWord('Good', '좋은')}
{EnglishWord('Bad', '나쁜')}
{EnglishWord('Happy', '행복한')}
</>
)
*/
// 방법1.의 간소화1. (화살표 함수 사용)
/*
const EnglishWord = (word, mean) => {
return (
<>
<h3>{word}</h3>
<span>{mean}</span>
</>
)
}
const element = (
<>
{EnglishWord('Good', '좋은')}
{EnglishWord('Bad', '나쁜')}
{EnglishWord('Happy', '행복한')}
</>
)
*/
// 방법1.의 간소화2. (return 삭제하고 () 사용)
/*
const EnglishWord = (word, mean) => (
<>
<h3>{word}</h3>
<span>{mean}</span>
</>
)
const element = (
<>
{EnglishWord('Good', '좋은')}
{EnglishWord('Bad', '나쁜')}
{EnglishWord('Happy', '행복한')}
</>
)
*/
// 방법2.
/*
const EnglishWord = function(props) {
return (
<>
<h3>{props.word}</h3>
<span>{props.mean}</span>
</>
)
}
const element = ( // 함수로 호출하지 않고 component 사용★
<>
<EnglishWord word='Good' mean='좋은' />
<EnglishWord word='Bad' mean='나쁜' />
<EnglishWord word='Happy' mean='행복한' />
</>
)
*/
// 위 방법 섞어서도 가능. 방법은 여러가지임. 사용하기 나름.
/*
const EnglishWord = ({word, mean}) => ( // 속성쓰기 때문에 {}!!
<>
<h3>{word}</h3>
<span>{mean}</span>
</>
)
const element = (
<>
<EnglishWord word='Good' mean='좋은' />
<EnglishWord word='Bad' mean='나쁜' />
<EnglishWord word='Happy' mean='행복한' />
</>
)
*/
// 비할당 방식. HOOK
const EnglishWord = props => {
const {word, mean} = props
return (
<>
<h3>{word}</h3>
<span>{mean}</span>
</>
)
}
const element = (
<>
<EnglishWord word='Good' mean='좋은' />
<EnglishWord word='Bad' mean='나쁜' />
<EnglishWord word='Happy' mean='행복한' />
</>
)
ReactDOM.render(element, rootElement)
</script>
</body>
</html>
Function-component 비구조화 할당 Test
<!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 class="title">
<!-- 발표회 -->
</div>
<div class="list">
<!-- custom function -->
</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">
const titleElement = document.querySelector('.title')
titleElement.style.color = 'blue'
titleElement.style.textAlign = 'center'
const classElement = (
<>
<h2 children = '발표회' />
<hr />
</>
)
ReactDOM.render(classElement, titleElement)
const listElement = document.querySelector('.list')
listElement.style.listStyle = 'inside'
const GroupPlay = ({group, play}) => {
return (
<>
<li>{group}</li>
<li>{play}</li>
</>
)
}
const groupElement = (
<>
<ul>참가자 순서
<li>햇님반</li>
<li>별님반</li>
<li>달님반</li>
<li>꽃님반</li>
</ul>
<ul>발표회 내용
<GroupPlay group='햇님반 주제' play='노래 합창' />
<GroupPlay group='별님반 주제' play='민속 무용' />
<GroupPlay group='달님반 주제' play='에어로빅' />
<GroupPlay group='꽃님반 주제' play='단체 합주' />
</ul>
</>
)
/*
참가자 순서
햇님반
별님반
달님반
꽃님반
햇님반 주제
노래 합창
별님반 주제
민속 무용
달님반 주제
에어로빅
꽃님반 주제
단체 합주
*/
ReactDOM.render(groupElement, listElement)
</script>
</body>
</html>
Component
<!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">
const rootElement = document.getElementById('root')
const Greet = ({first, second, children}) => (
<>
<h1>{first}</h1>
<h1>{second}</h1>
{children}
</>
)
// 방법1.
/*
const element = (
<>
<Greet first='Good' second='Mornig~'>Hi!</Greet>
<Greet first='Bad' second='Afternoon!'>
<span>Hello</span>
</Greet>
<Greet first='Happy' second='Evening~'>
<div>night</div>
<div>night</div>
<div>night</div>
<div>night</div>
<div>night</div>
</Greet>
<Greet first='Deep' second='Sleeping...'>
<Greet first='Dream' second='World' />
</Greet>
</>
)
*/
// 방법2.
/*
const element = (
<>
<Greet first='Good' second='Morning~'>
{Greet({first: 'Bad', second: 'Afternoon', children: 'Happy'})}
</Greet>
</>
)
*/
// 방법3.
const Good = () => <h3 className='good'>Good</h3>
const element = (
<>
<Greet first='Good' second='Morning~'>
<Good />
<Good />
<Good />
<Good />
<Good />
</Greet>
</>
)
ReactDOM.render(element, rootElement)
</script>
</body>
</html>
Component Test
<!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">
const rootElement = document.getElementById('root')
const classElement = (
<>
<h2 children = '발표회' />
<hr />
</>
)
const Play = ({classElement, group, list}) => (
<>
{classElement}
<li>{group}</li>
<li>{list}</li>
</>
)
const element = (
<>
<ul>참가자 순서
<li>햇님반</li>
<li>별님반</li>
<li>달님반</li>
<li>꽃님반</li>
</ul>
<ul>발표회 내용
<Play group='햇님반 주제' list='노래 합창' />
<Play group='별님반 주제' list='민속 무용' />
<Play group='달님반 주제' list='에어로빅' />
<Play group='꽃님반 주제' list='단체 합주' />
</ul>
</>
)
ReactDOM.render(element, rootElement)
</script>
</body>
</html>