๐ ๋ฆฌ์กํธ๋?
React๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๊ตฌ์ถํ๊ธฐ ์ํ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค.
' ์ปดํฌ๋ํธ '๋ผ๊ณ ๋ถ๋ฆฌ๋ ์ฝ๋๋ฅผ ์ด์ฉํ์ฌ ๋ณต์กํ UI๋ฅผ ๊ตฌ์ฑํ๋๋ก ๋๋๋ค.
์ปดํฌ๋ํธ : ๋ฐ์ดํฐ์ ํ๋ฉด์ ํ๋๋ก ๋ฌถ์ด๋ ๋ฉ์ด๋ฆฌ.
์ฆ, ๋ณต์กํ ์น์ฑ ( Web Application ) ์์ ๋ฐ์ดํฐ์ ํ๋ฉด ์ผ์น ๋ฌธ์ ๋ฅผ ์ฝ๊ฒ ํ์ด์ค๋ค.
Note!
์น ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ญ๊ฐ์?
์ธํฐ๋ท์ด๋ ์ธํธ๋ผ๋ท์ ํตํด ์น ๋ธ๋ผ์ฐ์ ์์ ์ด์ฉํ ์ ์๋ ์์ฉ ํ๋ก๊ทธ๋จ์ด๋ค.
์ธํธ๋ผ๋ท : ๊ธฐ์ ์ ๋ด๋ถ๋ ๊ณ์ด์ฌ ๊ฐ์ด๋ ํด์ธ ์ง์ฌ์ ๋ณธ์ฌ ์ฌ์ด์ ๋ด๋ถ์ ์ ๋ณด ๊ตํ๊ณผ ์ ๋ณด ๊ณต์ ๋ฅผ ์ํด,
์ธํฐ๋ท์ ์ด์ฉํ์ฌ ๊ตฌ์ถํ ํต์ ๋ง.
๐ค ๋ฆฌ์กํธ์ ์ฅ์ ๊ณผ ๋จ์
| - ์ฅ์ - | - ๋จ์ - |
| 1. ํ์ด์ง ๊น๋นก์ ์์ด ์์ฐ์ค๋ฝ๊ฒ ๋์ด๊ฐ๋ ํจ๊ณผ. | 1. ๊ฒ์์์ง ๋
ธ์ถ์ด ์ด๋ ต๋ค. ( ์์ํ๊ฒ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ผ๋ก๋ง ๋ง๋ค์ด์ ) |
| 2. ๋ฐ์ดํฐ์ ํ๋ฉด ์ผ์น ๋ฌธ์ ํด๊ฒฐ. | - |
๐ค ๊ฒฐ๊ตญ์ ๋ฆฌ์กํธ๋...
๊ฒฐ๊ตญ์ ์น๋ธ๋ผ์ฐ์ ๋ HTML, CSS, JavaScript ๊ฐ ์ค์ํ๋ค.
ํ๋ฉด์ ๊ตฌ์ฑํ๋ ๊ฒ์ HTML, CSS / ํ๋ฉด ๋์์ JavaScript ์ด๋ค.
๋ฆฌ์กํธ๋ ๊ฒฐ๊ตญ์ ์๋ฐ์คํฌ๋ฆฝํธ์ผ ๋ฟ์ด๊ณ , ์๋ฐ์คํฌ๋ฆฝํธ๋ก HTML ๊ณผ CSS ๋ฅผ ๋ง๋ค์ด๋ด๋ ์กด์ฌ์ผ ๋ฟ์ด๋ค.
๋ฆฌ์กํธ๋ก ํ๋ก๊ทธ๋๋ฐํ๋๋ผ๋ ๊ฒฐ๊ณผ๋ฌผ์ HTML, CSS, JavaScript ๋ก ๋์์ผ ๋ธ๋ผ์ฐ์ ๊ฐ ํ์ผ๋ค์ ์ฝ๊ณ ํ๋ฉด์ ํ์ํด์ค ์ ์๋ ๊ฒ์ด๋ค.
๊ทธ๋์ JavsScript ๊ธฐ๋ณธ๊ธฐ๊ฐ ํํํด์ผ ํ๋ค.
| - ๋ฆฌ์กํธ ๋ช ์ฌํด์ผํ ์ - |
| 1. ๋ฆฌ์กํธ = ์๋ฐ์คํฌ๋ฆฝํธ์ด๋ค. |
| 2. ๋ฆฌ์กํธ๋ ๋ฐ์ดํฐ ์ค์ฌ์ผ๋ก ์์ง์ธ๋ค. |
| 3. ๋ฆฌ์กํธ๋ ์๋ ์์ ์ฝ๋ ์ค 'LikeButton' ์ฒ๋ผ ์ปดํฌ๋ํธ๋ผ๋ ์ฝ๋๋ฅผ ์ด์ฉํ๋ค. |
//์ปดํฌ๋ํธ. (๋ฐ์ดํฐ,ํ๋ฉด์ ๋ฌถ์ด๋ ๋ฉ์ด๋ฆฌ)
class LikeButton extends React.Component {
constructor(props){
super(props);
//๋ฐ์ดํฐ.
//1.๋ฐ์ดํฐ๊ฐ ๋ฐ๋๋ฉด?
//์ฆ ํ๋ฉด์ ๋ฐ๋ ๋ถ๋ถ๋ค์ state๋ก ๋ง๋ ๋ค.
this.state = {liked : false};
}
render(){
if (this.state.liked){
return 'You liked this';
}
//ํ๋ฉด.
//2.ํ๋ฉด์ด ์๋์ผ๋ก ๋ฐ๋๋ค.
return React.createElement('button',{onClick: () => this.setState({liked : true})},'like');
}
};
//์ฝ๋ ์ถ์ฒ : ์ ํ๋ธ_ZeroCho TV_๋ฆฌ์กํธ ๋ฌด๋ฃ ๊ฐ์ข(์น๊ฒ์)
๐ค ๋ฐ์ดํฐ์ ํ๋ฉด์ ๋์?
๊ธฐ์กด์ HTML, CSS ๊ณต๋ถํ ๋ ํ๋ฉด ๋จผ์ ์๊ฐํ๊ณ , ํ๋ฉด์ ์๋ ๋ฐ์ดํฐ๋ JavaScript ๋ก ๋ฐ๊ฟจ๋ค.
ex) ๋ฒํผ ๋๋ฅด๋ฉด ์ด๋ฒคํธ๋ฆฌ์ค๋ or ์จํด๋ฆญ์ผ๋ก ๋ฐ๊พธ๊ธฐ
ํ์ง๋ง React๋ ์ ๋ฐ๋์ด๋ค.
โ ์ง๊ธ๊น์ง ํ ์ฝ๋
<html>
<head>
<meta charset="utf-8">
<title>์น๊ฒ์</title>
</head>
<body>
<div id="root"></div>
<!-- react 18 ๋ฒ์ ์ผ๋ก ์คํฌ๋ฆฝํธ ๋ถ๋ฌ์ค๊ธฐ -->
<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>
<!-- ์ค๋ฌด์์๋ ์ ์ฝ๋๋ฅผ ๋ฐ์ ์ฝ๋๋ก ๋ฐ๊พผ๋ค. -->
<!-- ์๋ํ๋ฉด ์ ์ฝ๋ ์ค .development๋ ๊ฐ๋ฐ์ฉ / ๋ฐ ์ฝ๋ ์ค .production์ ๋ฐฐํฌ์ฉ์ด๊ธฐ ๋๋ฌธ์ด๋ค. -->
<!--<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>-->
<!--<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>-->
<script>
//๋ฆฌ์กํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ถ๋ฌ์จ๋ค.
//React
//๋ฆฌ์กํธ ๋์ ๋ถ๋ฌ์จ๋ค.
//ReactDOM
//๋ฆฌ์กํธ๋ ํฌ๊ฒ 2๊ฐ์ง ๋ฐฉ๋ฒ์ด ์๋ค.
//1.ํด๋์ค๋ก ํ๋ ๋ฐฉ์. ํด๋์ค๋ ์ ์์ด๋ค.
//์ปดํฌ๋ํธ. (๋ฐ์ดํฐ,ํ๋ฉด์ ๋ฌถ์ด๋ ๋ฉ์ด๋ฆฌ)
class LikeButton extends React.Component {
constructor(props){
super(props);
//๋ฐ์ดํฐ.
//1.๋ฐ์ดํฐ๊ฐ ๋ฐ๋๋ฉด?
this.state = {liked : false};
}
render(){
if (this.state.liked){
return 'You liked this';
}
//ํ๋ฉด.
//2.ํ๋ฉด์ด ์๋์ผ๋ก ๋ฐ๋๋ค.
return React.createElement('button',{onClick: () => this.setState({liked : true})},'like');
}
};
//2.ํจ์๋ก ํ๋ ๋ฐฉ์.
//2-1.
//const LikeButton = () => {};
//2-2.
//function LikeButton(){};
</script>
</body>
</html>
<!--์ฝ๋ ์ถ์ฒ : ์ ํ๋ธ_ZeroCho TV_๋ฆฌ์กํธ ๋ฌด๋ฃ ๊ฐ์ข(์น๊ฒ์)-->HTML์ ์คํํด๋ณด์.
์๋ฌด๊ฒ๋ ์ํ๊ธฐ ๋๋ฌธ์ด๋ค.
์ปดํฌ๋ํธ๋ ๋ง๋ค์๋๋ฐ ์ปดํฌ๋ํธ๋ฅผ ํ๋ฉด์ ๊ทธ๋ฆฌ๋ ๊ฒ์ ์ํ๋ค.
๋ฆฌ์กํธ๋ ์ผ๋๋ฐ ๋ฆฌ์กํธ ๋์ ์ ์ด ๊ฒ์ด๋ค.
<html>
<head>
<meta charset="utf-8">
<title>์น๊ฒ์</title>
</head>
<body>
<div id="root"></div>
<!-- react 18 ๋ฒ์ ์ผ๋ก ์คํฌ๋ฆฝํธ ๋ถ๋ฌ์ค๊ธฐ -->
<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>
<!-- ์ค๋ฌด์์๋ ์ ์ฝ๋๋ฅผ ๋ฐ์ ์ฝ๋๋ก ๋ฐ๊พผ๋ค. -->
<!-- ์๋ํ๋ฉด ์ ์ฝ๋ ์ค .development๋ ๊ฐ๋ฐ์ฉ / ๋ฐ ์ฝ๋ ์ค .production์ ๋ฐฐํฌ์ฉ์ด๊ธฐ ๋๋ฌธ์ด๋ค. -->
<!--<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>-->
<!--<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>-->
<script>
//๋ฆฌ์กํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ถ๋ฌ์จ๋ค.
//React
//๋ฆฌ์กํธ ๋์ ๋ถ๋ฌ์จ๋ค.
//ReactDOM
//๋ฆฌ์กํธ๋ ํฌ๊ฒ 2๊ฐ์ง ๋ฐฉ๋ฒ์ด ์๋ค.
//1.ํด๋์ค๋ก ํ๋ ๋ฐฉ์. ํด๋์ค๋ ์ ์์ด๋ค.
//์ปดํฌ๋ํธ. (๋ฐ์ดํฐ,ํ๋ฉด์ ๋ฌถ์ด๋ ๋ฉ์ด๋ฆฌ)
class LikeButton extends React.Component {
constructor(props){
super(props);
//๋ฐ์ดํฐ.
//1.๋ฐ์ดํฐ๊ฐ ๋ฐ๋๋ฉด?
this.state = {liked : false};
}
render(){
if (this.state.liked){
return 'You liked this';
}
//ํ๋ฉด.
//2.ํ๋ฉด์ด ์๋์ผ๋ก ๋ฐ๋๋ค.
return React.createElement('button',{onClick: () => this.setState({liked : true})},'like');
}
};
//2.ํจ์๋ก ํ๋ ๋ฐฉ์.
//2-1.
//const LikeButton = () => {};
//2-2.
//function LikeButton(){};
</script>
<script>
//LikeButton์ด๋ผ๋ ์ปดํฌ๋ํธ๋ฅผ #root ํ๋ฉด ์์๋ค๊ฐ ๊ทธ๋ฆฐ๋ค.
//์ฐธ๊ณ ๋ก ์๋ ์ฝ๋๋ react17๋ฒ์ ์ฝ๋์ด๋ค.
ReactDOM.render(React.createElement(LikeButton),document.querySelector('#root'));
</script>
</body>
</html>
<!--์ฝ๋ ์ถ์ฒ : ์ ํ๋ธ_ZeroCho TV_๋ฆฌ์กํธ ๋ฌด๋ฃ ๊ฐ์ข(์น๊ฒ์)-->
๐ ๊ฐ๋ ์ฑ์ ์ํ JSX ( XML์ด๋ค. )
์๋ฐ์คํฌ๋ฆฝํธ๋ก ์์ฑํ๋ค ๋ณด๋ฉด ๊ฐ๋ ์ฑ์ด ์์ข์์ง๋ค.
๊ทธ๋์ ๋ฆฌ์กํธ๋ HTML์ ๋๋์ด ๋๋ JSX ๋ฌธ๋ฒ์ด ์๋ค. ( ์๋ฐ์คํฌ๋ฆฝํธ์ XML์ ํฉ์น ๊ฒ, XML์ HTML์ ์น๊ตฌ )
<html>
<head>
<meta charset="utf-8">
<title>์น๊ฒ์</title>
</head>
<body>
<div id="root"></div>
<!-- react 18 ๋ฒ์ ์ผ๋ก ์คํฌ๋ฆฝํธ ๋ถ๋ฌ์ค๊ธฐ -->
<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>
<!-- ์ค๋ฌด์์๋ ์ ์ฝ๋๋ฅผ ๋ฐ์ ์ฝ๋๋ก ๋ฐ๊พผ๋ค. -->
<!-- ์๋ํ๋ฉด ์ ์ฝ๋ ์ค .development๋ ๊ฐ๋ฐ์ฉ / ๋ฐ ์ฝ๋ ์ค .production์ ๋ฐฐํฌ์ฉ์ด๊ธฐ ๋๋ฌธ์ด๋ค. -->
<!--<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>-->
<!--<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>-->
<script>
//๋ฆฌ์กํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ถ๋ฌ์จ๋ค.
//React
//๋ฆฌ์กํธ ๋์ ๋ถ๋ฌ์จ๋ค.
//ReactDOM
//๋ฆฌ์กํธ๋ ํฌ๊ฒ 2๊ฐ์ง ๋ฐฉ๋ฒ์ด ์๋ค.
//1.ํด๋์ค๋ก ํ๋ ๋ฐฉ์. ํด๋์ค๋ ์ ์์ด๋ค.
//์ปดํฌ๋ํธ. (๋ฐ์ดํฐ,ํ๋ฉด์ ๋ฌถ์ด๋ ๋ฉ์ด๋ฆฌ)
class LikeButton extends React.Component {
constructor(props){
super(props);
//๋ฐ์ดํฐ.
//1.๋ฐ์ดํฐ๊ฐ ๋ฐ๋๋ฉด?
this.state = {liked : false};
}
render(){
if (this.state.liked){
return 'You liked this.';
}
//ํ๋ฉด.
//2.ํ๋ฉด์ด ์๋์ผ๋ก ๋ฐ๋๋ค.
//return React.createElement('button',{onClick: () => this.setState({liked : true})},'like');
//์ ์ฝ๋๋ฅผ ๊ฐ๋
์ฑ์ ์ํด jsx(์๋ ์ฝ๋)๋ก ๋ฐ๊ฟ ์ ์๋ค. ์๋ฐ์คํฌ๋ฆฝํธ์ html๋๋์ด๋ผ๊ณ ๋ณด๋ฉด ๋๋ค.
return (
<button onClick={()=>this.setState({liked : true})}>
like
</button>
);
}
};
//2.ํจ์๋ก ํ๋ ๋ฐฉ์.
//2-1.
//const LikeButton = () => {};
//2-2.
//function LikeButton(){};
</script>
<script>
//LikeButton์ด๋ผ๋ ์ปดํฌ๋ํธ๋ฅผ #root ํ๋ฉด ์์๋ค๊ฐ ๊ทธ๋ฆฐ๋ค.
//์ฐธ๊ณ ๋ก ์๋ ์ฝ๋๋ react17๋ฒ์ ์ฝ๋์ด๋ค.
//ReactDOM.render(React.createElement(LikeButton),document.querySelector('#root'));
//์ ์ฝ๋๋ฅผ jsx์ฝ๋๋ฅผ ์ถ๊ฐํ๋ฉด์ ์๋ ์ฝ๋๋ก ๋ฐ๊พผ๋ค. ์ฆ .createElement๋ฅผ jsx๋ก ๋ฐ๊ฟจ๋ค.
//์ค๋ฌด์์๋ React.createElement๋ฅผ ์์ด๋ค.
ReactDOM.render(<LikeButton/>,document.querySelector('#root'));
</script>
</body>
</html>
๐ค ๋ฐ๋ฒจ ( babel ) ๋ผ์ด๋ธ๋ฌ๋ฆฌ
์๋ฐ์คํฌ๋ฆฝํธ์์ ํ๊ทธ ๋ฌธ๋ฒ์ ์ฌ์ฉ ๋ถ๊ฐํ๋ค. ๊ทผ๋ฐ ๋ฆฌ์กํธ์์ ์ด๋ป๊ฒ ์ฌ์ฉํ๋ ๊ฑธ๊น?
๋ฐ๋ฒจ ( babel ) ์ด๋ผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์๋ค.
์ด๊ฒ์ด ํ๊ทธ ๋ฌธ๋ฒ์ React.createElement ๋ก ์ปดํจํฐ์์ ๋ฐ๊ฟ์ค๋ค.
โ ๋ฐ๋ฒจ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ถ๋ฌ์ค๋ ์์ค
<!-- JSX๋ฅผ ์ฐ๊ธฐ ์ํ ๋ฐ๋ฒจ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฝ๋ -->
<!-- ์คํฌ๋ฆฝํธ ์ ํ๊ทธ ๋ฌธ๋ฒ์ ์ปดํจํฐ์์ React.createElement๋ก ๋ฐ๊ฟ์ฃผ๋ ์ญํ .-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- ํ๋จ์ text/babel ์ถ๊ฐํ๋ค.-->
<script type="text/babel">
.
.
.
</script>
โ ํ์ฌ๊น์ง์ ์ ์ฒด ์ฝ๋
<html>
<head>
<meta charset="utf-8">
<title>์น๊ฒ์</title>
</head>
<body>
<div id="root"></div>
<!-- react 18 ๋ฒ์ ์ผ๋ก ์คํฌ๋ฆฝํธ ๋ถ๋ฌ์ค๊ธฐ -->
<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>
<!-- ์ค๋ฌด์์๋ ์ ์ฝ๋๋ฅผ ๋ฐ์ ์ฝ๋๋ก ๋ฐ๊พผ๋ค. -->
<!-- ์๋ํ๋ฉด ์ ์ฝ๋ ์ค .development๋ ๊ฐ๋ฐ์ฉ / ๋ฐ ์ฝ๋ ์ค .production์ ๋ฐฐํฌ์ฉ์ด๊ธฐ ๋๋ฌธ์ด๋ค. -->
<!--<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>-->
<!--<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>-->
<!-- JSX๋ฅผ ์ฐ๊ธฐ ์ํ ๋ฐ๋ฒจ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฝ๋ -->
<!-- ์คํฌ๋ฆฝํธ ์ ํ๊ทธ ๋ฌธ๋ฒ์ ์ปดํจํฐ์์ React.createElement๋ก ๋ฐ๊ฟ์ฃผ๋ ์ญํ .-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- ํ๋จ์ text/babel ์ถ๊ฐํ๋ค.-->
<script type="text/babel">
//๋ฆฌ์กํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ถ๋ฌ์จ๋ค.
//React
//๋ฆฌ์กํธ ๋์ ๋ถ๋ฌ์จ๋ค.
//ReactDOM
//๋ฆฌ์กํธ๋ ํฌ๊ฒ 2๊ฐ์ง ๋ฐฉ๋ฒ์ด ์๋ค.
//1.ํด๋์ค๋ก ํ๋ ๋ฐฉ์. ํด๋์ค๋ ์ ์์ด๋ค.
//์ปดํฌ๋ํธ. (๋ฐ์ดํฐ,ํ๋ฉด์ ๋ฌถ์ด๋ ๋ฉ์ด๋ฆฌ)
class LikeButton extends React.Component {
constructor(props){
super(props);
//๋ฐ์ดํฐ.
//1.๋ฐ์ดํฐ๊ฐ ๋ฐ๋๋ฉด?
this.state = {liked : false};
}
render(){
if (this.state.liked){
return 'You liked this.';
}
//ํ๋ฉด.
//2.ํ๋ฉด์ด ์๋์ผ๋ก ๋ฐ๋๋ค.
//return React.createElement('button',{onClick: () => this.setState({liked : true})},'like');
//์ ์ฝ๋๋ฅผ ๊ฐ๋
์ฑ์ ์ํด jsx(์๋ ์ฝ๋)๋ก ๋ฐ๊ฟ ์ ์๋ค. ์๋ฐ์คํฌ๋ฆฝํธ์ html๋๋์ด๋ผ๊ณ ๋ณด๋ฉด ๋๋ค.
return (
<button onClick={()=>this.setState({liked : true})}>
like
</button>
);
}
};
//2.ํจ์๋ก ํ๋ ๋ฐฉ์.
//2-1.
//const LikeButton = () => {};
//2-2.
//function LikeButton(){};
</script>
<script type="text/babel">
//LikeButton์ด๋ผ๋ ์ปดํฌ๋ํธ๋ฅผ #root ํ๋ฉด ์์๋ค๊ฐ ๊ทธ๋ฆฐ๋ค.
//์ฐธ๊ณ ๋ก ์๋ ์ฝ๋๋ react17๋ฒ์ ์ฝ๋์ด๋ค.
//ReactDOM.render(React.createElement(LikeButton),document.querySelector('#root'));
//์ ์ฝ๋๋ฅผ jsx์ฝ๋๋ฅผ ์ถ๊ฐํ๋ฉด์ ์๋ ์ฝ๋๋ก ๋ฐ๊พผ๋ค. ์ฆ .createElement๋ฅผ jsx๋ก ๋ฐ๊ฟจ๋ค.
//์ค๋ฌด์์๋ React.createElement๋ฅผ ์์ด๋ค.
ReactDOM.render(<LikeButton/>,document.querySelector('#root'));
</script>
</body>
</html>
ReactDOM.render(<LikeButton/>,document.querySelector('#root')); //React 17๋ฒ์ ์ฝ๋์ด๊ฒ์ React 17 ๋ฒ์ ์ฝ๋์ด๊ธฐ ๋๋ฌธ์ด๋ค.
React 18 ๋ฒ์ ์ 17 ๋ฒ์ ๋ ์ง์ํด์ ํ๋ฉด์ ๋จ๊ธฐ๋ ํ๋ค.
//ReactDOM.render(<LikeButton/>,document.querySelector('#root')); //React 17๋ฒ์ .
ReactDOM.createRoot(document.querySelector('#root')).render(<LikeButton/>); //React 18๋ฒ์ .์ด๋ ๊ฒ 18๋ฒ์ ์ฝ๋๋ก ๋ฐ๊พธ๋ฉด ๋๋ค.
Note!
๊ธฐ์ตํด์ผ ํ ์
์ฐ๋ฆฌ๊ฐ ๋ง๋ ์ปดํฌ๋ํธ๋ ๋ฐ๋์ ๋๋ฌธ์๊ฐ ๋์ด์ผ ํ๋ค. ex) < LikeButton/>
๊ทธ๋ฆฌ๊ณ ๊ธฐ์กด์ HTML ๊ด๋ จ ํ๊ทธ๋ค์ ์๋ฌธ์๊ฐ ๋์ด์ผ ํ๋ค. ex) <button>
์์ง?
JSX ๋ XML์ด์ง HTML ์ด ์๋๋ค. XML ์ธ ์ด์ ๊ฐ ์๊ฒฉํด์ ๊ทธ๋ ๋ค.
๊ทธ๋ฆฌ๊ณ ๋ง์ฝ input ํ๊ทธ๋ฅผ ์ฌ์ฉํ ๋๋ <input type="text" /> ์ฒ๋ผ ๋ซ๋ ํ๊ทธ๋ฅผ ์ถ๊ฐํด์ผ ํ๋ค. ์ฌ๋์ ( / ) ๋ฅผ ์ ๋ถ์ด๋ฉด ์๋ฌ๊ฐ ๋๋ค.
๊ทธ๋ฆฌ๊ณ ๋ฌธ์์ด์ ๋ฐ์ดํ ( " " ) ๋ก ๊ฐ์ธ๊ณ , ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ ๋ถ๋ถ์ ์ค๊ดํธ ( { } ) ๋ก ๊ฐ์ธ์ผ ํ๋ค.
//1.๋ฌธ์์ด ๋ถ๋ถ <input type="text" /> //๋ฌธ์์ด ๋ถ๋ถ์ ๋ฐ์ดํ๋ก ๊ฐ์ผ๋ค. //2.์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ ๋ถ๋ถ <button onClick={()=>this.setState({liked : true})}> //์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ ๋ถ๋ถ์ ์ค๊ดํธ๋ก ๊ฐ์ผ๋ค. like </button>๋ ๊ธฐ์ตํด์ผ ํ ์
if ๋ฌธ๊ณผ for ๋ฌธ ์ฐ๋ ๋ฐฉ๋ฒ์ด ๋ค๋ฅด๋ค.//์ปดํฌ๋ํธ. (๋ฐ์ดํฐ,ํ๋ฉด์ ๋ฌถ์ด๋ ๋ฉ์ด๋ฆฌ) class LikeButton extends React.Component { constructor(props){ super(props); //๋ฐ์ดํฐ. //1.๋ฐ์ดํฐ๊ฐ ๋ฐ๋๋ฉด? this.state = {liked : false}; } render(){ if (this.state.liked){ return 'You liked this.'; } //ํ๋ฉด. //2.ํ๋ฉด์ด ์๋์ผ๋ก ๋ฐ๋๋ค. //return React.createElement('button',{onClick: () => this.setState({liked : true})},'like'); //์ ์ฝ๋๋ฅผ ๊ฐ๋ ์ฑ์ ์ํด jsx(์๋ ์ฝ๋)๋ก ๋ฐ๊ฟ ์ ์๋ค. ์๋ฐ์คํฌ๋ฆฝํธ์ html๋๋์ด๋ผ๊ณ ๋ณด๋ฉด ๋๋ค. return <button onClick={()=>{this.setState({liked : true});}}> //์ฌ๊ธฐ ์์ for๋ฌธ, if๋ฌธ์ ๋ชป ์ด๋ค. {this.state.liked ? 'liked' : 'Like !'} //if๋ฌธ ๋์ ์ ์ผํญ์ฐ์ฐ์๋ฅผ ๋ฃ๊ฑฐ๋, {[1,2,3].map((i) => { //for๋ฌธ ๋์ ์ ๋ฐฐ์ด์ ๋ฃ๋๋ค. return <div>i</div>; })} </button> } };์ด๋ฐ ์์ผ๋ก ์ฌ์ฉํ๋ค.
๋ ๊ธฐ์ตํด์ผ ํ ์
return ์์์ ํ์ ํ๊ทธ ๋ ๋๋ํ ๋ถ์ฌ ์ธ ์ ์๋ค.๊ทธ๋ผ ์ด๋ป๊ฒ ํ๋? ๋ค๋ฅธ ๋ถ๋ชจ ํ๊ทธ๋ก ๊ฐ์ธ์ผ ํ๋ค.
<div> ๋ฅผ ๋ฃ๊ธฐ ์ซ๋ค๋ฉด ๊ฐ์งํ๊ทธ ๋ฅผ ๋ฃ์ด๋ ๋๋ค.
๐ค JSX ์ปดํฌ๋ํธ ์ฌ๋ฌ ๊ฐ ๊ทธ๋ฆฌ๊ธฐ
JSX์์ ์ปดํฌ๋ํธ๋ฅผ ์ฌ๋ฌ๊ฐ ํ๋ฉด์ ๊ทธ๋ฆด ์ ์๋ค.
ReactDOM.createRoot(document.querySelector('#root')).render(
<div>
<LikeButton/>
<LikeButton/>
<LikeButton/>
</div>
); //React 18๋ฒ์ .
๋๋ณด๊ธฐ
- ZeroCho TV_๋ฆฌ์กํธ ๋ฌด๋ฃ๊ฐ์ข -
1-1๊ฐ ~ 1-4๊ฐ
๋ฆฌ์กํธ ๋ฌด๋ฃ ๊ฐ์ข(์น๊ฒ์)
www.youtube.com
