๐ ์น์ฌ์ดํธ์ React.js ์ถ๊ฐํ๊ธฐ
<!DOCTYPE html>
<html lang="en">
<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>์ด๋ก์ ๋ธ๋ก๊ทธ</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>์ด๋ก์ ๋ธ๋ก๊ทธ</h1>
<div id="root"></div> <!-- DOM Container ์ถ๊ฐ -->
</body>
</html>์ div ํ๊ทธ๊ฐ DOM Container ๋ก ์ฌ์ฉ๋ ์์ ์ด๋ค.
์คํฌ๋ฆฝํธ ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฆฌ์กํธ์ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ๊ฐ์ ธ์ฌ ์ ์๋๋ก ํ๋ค.
<!DOCTYPE html>
<html lang="en">
<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>์ด๋ก์ ๋ธ๋ก๊ทธ</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>์ด๋ก์ ๋ธ๋ก๊ทธ</h1>
<div id="root"></div> <!-- DOM Container ์ถ๊ฐ -->
<!-- ๋ฆฌ์กํธ ๊ฐ์ ธ์ค๊ธฐ -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <!-- ๋ฆฌ์กํธ -->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <!-- ๋ฆฌ์กํธ DOM -->
<!-- ๋ฆฌ์กํธ ์ปดํฌ๋ํธ ๊ฐ์ ธ์ค๊ธฐ -->
<script src="MyButton.js"></script>
</body>
</html>
<!-- ์ฝ๋ ์ถ์ฒ -->
<!-- https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8 -->๐ค MyButton.js
๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค์ด์ ๋ ๋๋ง ํด๋ณด์.
//๋ฆฌ์กํธ์ ํจ์ ์ปดํฌ๋ํธ.
function MyButton(props){
const [isClicked, setIsClicked] = React.useState(false);
return React.createElement(
'button',
{onClick: () => setIsClicked(true)},
isClicked ? 'Clicked!' : 'Click here!'
)
}
//๋ฆฌ์กํธ์ ๋์ ๋ ๋ ํจ์๋ฅผ ์ฌ์ฉํด์ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ฅผ ๋ ์ปจํ
์ด๋์ ๋ ๋๋งํ๋ ์ฝ๋.
//์ด ์ฝ๋๊ฐ ํ์ํ ์ด์ .
//์คํฌ๋ฆฝํธ ํ๊ทธ๋ฅผ ์ฌ์ฉํด์ ์ปดํฌ๋ํธ๋ฅผ ๊ฐ์ ธ์จ๋ค๊ณ ํด๋ ๊ทธ๊ฒ์ด ํ๋ฉด์ ๋ณด์ด๋๊ฒ ์๋๊ธฐ ๋๋ฌธ.
const domComtainer = document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton),domComtainer);
ํ๋ฉด์ ๋์ค๋ ๋ฒํผ์ด MyButton ์ปดํฌ๋ํธ์ด๋ค.
์ด๊ฒ์ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ์ ์คํ ์ดํธ๊ฐ ๋ณ๊ฒฝ๋์๊ธฐ ๋๋ฌธ์ด๋ค.
์์์๋ ๊ธฐ์กด์ ์๋ ์น์ฌ์ดํธ์ ๋ฆฌ์กํธ๋ฅผ ์ ์ฉํ๋ ๋ฐฉ๋ฒ์ด๋ค.
์๋ก์ด ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค ๋์๋ ๊ทธ๋ด ํ์๊ฐ ์๋ค.
์ฒ์๋ถํฐ ๋ฆฌ์กํธ๊ฐ ์ ์ฉ๋์ด ์๋ ์ํ๋ก ๊ฐ๋ฐํ๊ธฐ ๋๋ฌธ์ด๋ค.
๊ทธ๋์ ๋ฆฌ์กํธ๋ก ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค ๋๋ create-react-app ์ด๋ผ๋ ๊ฒ์ ์ฌ์ฉํ๋ค.
๐ create-react-app
| create-react-app | ๋ฆฌ์กํธ๋ก ์น์ฌ์ดํธ๋ฅผ ๊ฐ๋ฐํ๋๋ฐ ํ์ํ ๋ชจ๋ ์ค์ ์ด ๋์ด์๋ ์ํ๋ก ํ๋ก์ ํธ๋ฅผ ์์ฑํด์ฃผ๋ ๋๊ตฌ. C.R.A๋ผ๊ณ ๋ถ๋ฅด๊ธฐ๋ ํ๋ค. |
create-react-app์ ์ฌ์ฉํ๊ธฐ ์ํด์๋ Node.js, npm์ด ํ์ํ๋ค.
create-react-app์ npx ๋ช ๋ น์ด๋ฅผ ์ด์ฉํ์ฌ ์คํํ ์ ์๋ค.
| npx | npm ํจํค์ง๋ฅผ ์ค์นํ ํ ๊ณง๋ฐ๋ก ์คํํ๋ ๋ช
๋ น์ด. ํจํค์ง๋ฅผ ์ ํด์ง ์์น์ ์ค์นํ๊ณ , ์ฐพ์์ ์คํํ๋ฉด ๋ถํธํ๋๊น ๊ฐํธํ๊ฒ ์ฒ๋ฆฌํ๋ ๊ฒ์ด๋ค. |
# ์ฌ์ฉ๋ฒ
$ npx create-react-app <your-project-name>
#์ค์ ์ฌ์ฉ ์์
$ npx create-react-app my-app
์ฌ๊ธฐ์์ ํด๋น ๋ช ๋ น์ด๋ฅผ ๋ฐ๋ก ์ดํด๋ณด์.
# ๊ฒฝ๋ก ๋ณ๊ฒฝ ( cd = change directory ํ์ฌ ์ปค๋ฉ๋๋ผ์ธ ๋๊ตฌ๊ฐ ์์นํ ๊ฒฝ๋ก๋ฅผ ๋ณ๊ฒฝํ๋ ์ญํ )
# ํด๋๋ฅผ ๋ค์ด๊ฐ๊ฑฐ๋ ๋น ์ ธ๋๊ฐ๋ ์ญํ .
$ cd my-app
# ์ ํ๋ฆฌ์ผ์ด์
์คํ
$ npm start์ฌ๊ธฐ์์๋ cd๋ช ๋ น์ด๋ฅผ ์ฌ์ฉํด์ ์ฐ๋ฆฌ๊ฐ ์์ฑํ my-app ํ๋ก์ ํธ ํด๋ ์์ผ๋ก ๋ค์ด๊ฐ๊ณ , ์ดํ์ npm start ๋ช ๋ น์ด๋ฅผ ํตํด ๋ฆฌ์กํธ ์ ํ๋ฆฌ์ผ์ด์ ์ ์คํํ๊ฒ ๋๋ค.
๋ช ๋ น์ด๋ฅผ ์คํํ๊ณ ๊ธฐ๋ค๋ฆฌ๋ฉด...
์ฌ๊ธฐ์์ localhost ๋ ํ์ฌ ๋ด๊ฐ ์ฌ์ฉํ๊ณ ์๋ ์ปดํจํฐ๋ฅผ ์๋ฏธํ๋ค.
ํ์ฌ ๋ฆฌ์กํธ ์ ํ๋ฆฌ์ผ์ด์ ์ด local ๊ฐ๋ฐ ํ๊ฒฝ์์ ์คํ๋๋ ๊ฒ์ด๋ค.
์ด๋ ๊ฒ create-react-app์ ์ด์ฉํ์ฌ ๋ฆฌ์กํธ ์ ํ๋ฆฌ์ผ์ด์ ์ ์คํํด๋ณด์๋ค.
