[React] Hello world! feat. ๐ง๋ฆฌ์กํธ๋ฅผ ์์จ์ผํ ๊น?
์๋ก ๐ง
๋๋์ด ๊ธฐ๋ค๋ฆฌ๊ณ ๊ธฐ๋ํ๋ ๋ฆฌ์กํธ์ ๋ํด ์์๋ณด์์ต๋๋ค.
๋
ธ๋ง๋์ฝ๋์ ๊ฐ์ ๋ฐ ๋ฆฌ์กํธ์ฌ์ดํธ,๋๊ตฌ๋ ์ง ๋ฐ๋ผํ๋ ๋ฆฌ์กํธ๋ฅผ ์ฝ๊ณ ๋๋์ ์ ๊ธฐ๋กํ๋ ํฌ์คํ
์
๋๋ค.
๋ฆฌ์กํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๊ณ ์ํธ์์ฉ์ด ๋ง์ ์ฌ์ดํธ๋ฅผ ์ค์ฉ์ ์ผ๋ก ๊ด๋ฆฌํ๊ธฐ ์ํด ๋์์ ์ฃผ๋๊ฒ์ด๋ผ๊ณ ์๊ฐํ์ต๋๋ค. ์ค๋์ ๋ฆฌ์กํธ๊ฐ ์ ํ์ํ๊ฐ,๊ทธ๋ฆฌ๊ณ ๋ชจ๋ ์ธ์ด์ ์ฒซ๊ฑธ์ hello world๋ฅผ ์ฝ๋ฉํด๋ณผ๊ฒ์
๋๋ค.
๐๐ปWhat is React?
React๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋ค๊ธฐ ์ํ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค.
React๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋ค๊ธฐ ์ํ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค.
๋ฆฌ์กํธ๋ ํ์ด์ค๋ถ์์ ์ ๊ณตํด์ฃผ๋ ํ๋ก ํธ์ค๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์
๋๋ค.
์ด๋ ํ ์ ์ ์ธํฐํ์ด์ค๋ฅผ ๋์ ์ผ๋ก ๋ํ๋ด๊ธฐ ์ํด์๋ ๋ง์ DOM์์๋ค์ ๊ด๋ฆฌํ๊ณ ์ฝ๋๋ฅผ ์ ๋ฆฌํด์ผํฉ๋๋ค. ์ด๋ฅผ ์ข ๋ ์ต์ํํ๊ณ ๊ธฐ๋ฅ๊ฐ๋ฐ์๋ง ์ง์คํ ์ ์๋๋กํ๊ธฐ ์ํด์ ๋ง์ ํ๋ ์ ์ํฌ๊ฐ ๋ง๋ค์ด์ก๊ณ ํ๋ ์์ํฌ์ 3๋์ฅ React, Angular, Vue๊ฐ ์๊ฒจ๋ ๊ฒ์ด๋ผ๊ณ ํฉ๋๋ค.
๐๐ปWhy React?
- ๊ธฐ์ ์ ๋ฐฐ์ธ๋ ์ค์ํ ์ ์ ๋๊ฐ ๊ธฐ์ ์ ์ฌ์ฉํ๋์ง ๊ทธ๋ค์ ๊ท๋ชจ๋ ์ผ๋ง๋ ํฐ์ง,์ด ๊ธฐ์ ์ด ์ผ๋ง๋ ์ค์ํ์ง๋ฅผ ๋ด์ผํฉ๋๋ค. ๋ฆฌ์กํธ๋ ํ์ฌ ์์ด๋น์ค๋น,์ธ์คํ๊ทธ๋จ,ํ์ด์ค๋ถ,๋ทํ๋ฆญ์ค ๊ฐ์ ํฐํ์ฌ๋ค์ด ์ฌ์ฉํ๊ณ ์์ต๋๋ค.
- ํ์ฌ ๊ฐ๋ฐ์๋ค์ฌ์ด์์ ๊ฐ์ฅ ์ฌ๋๋ฐ๋ ๊ธฐ์ ์
๋๋ค. ์ด๋ ํธ๋ฆฌํ๊ธฐ๋๋ฌธ์ด๊ฒ ์ฃ ?
- ๋ง์ ํ์ฌ์์ ์ด ๊ธฐ์ ์ ์ฌ์ฉํด๋ณธ ๊ฐ๋ฐ์๋ค์ ์ ํธํฉ๋๋ค.
- ๊ธฐ์ ์ ๋ฐฐ์ธ๋ ์ค์ํ ์ ์ ๋๊ฐ ๊ธฐ์ ์ ์ฌ์ฉํ๋์ง ๊ทธ๋ค์ ๊ท๋ชจ๋ ์ผ๋ง๋ ํฐ์ง,์ด ๊ธฐ์ ์ด ์ผ๋ง๋ ์ค์ํ์ง๋ฅผ ๋ด์ผํฉ๋๋ค. ๋ฆฌ์กํธ๋ ํ์ฌ ์์ด๋น์ค๋น,์ธ์คํ๊ทธ๋จ,ํ์ด์ค๋ถ,๋ทํ๋ฆญ์ค ๊ฐ์ ํฐํ์ฌ๋ค์ด ์ฌ์ฉํ๊ณ ์์ต๋๋ค.
- ํ์ฌ ๊ฐ๋ฐ์๋ค์ฌ์ด์์ ๊ฐ์ฅ ์ฌ๋๋ฐ๋ ๊ธฐ์ ์ ๋๋ค. ์ด๋ ํธ๋ฆฌํ๊ธฐ๋๋ฌธ์ด๊ฒ ์ฃ ?
- ๋ง์ ํ์ฌ์์ ์ด ๊ธฐ์ ์ ์ฌ์ฉํด๋ณธ ๊ฐ๋ฐ์๋ค์ ์ ํธํฉ๋๋ค.
์ ๋ ์์ 3๊ฐ์ง ์ด์ ๋ก ๋ฆฌ์กํธ๋ฅผ ๊ณต๋ถํด์ผ๊ฒ ๋จ ์๊ฐ์ ํ์ต๋๋ค.
์ด์ธ์ ๋ฆฌ์กํธ์ ์ฅ์ ๋ ์์๋ณด์์ต๋๋ค.
๋ฆฌ์กํธ์ 2๊ฐ์ง ํน์ง
-
Vertual Dom(๊ฐ์๋)
๋ฆฌ์กํธ๋ ๊ฐ์๋์ ์ฌ์ฉํด์ ์น ์ดํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ์ ๊ทน๋ํ ์์ผฏ์ต๋๋ค.
๋ณํ๊ฐ ์ผ์ด๋๋ฉด ์ค์ DOM์ ์๋ก์ด๊ฑธ ๋ฃ๋๊ฒ์ด ์๋๋ผ ๊ฐ์์ DOM์ ํ๋ฒ ๋ ๋๋ง์ ํ๊ณ ,๊ธฐ์กด์ DOM๊ณผ ๋น๊ตํด์ ๋ณํ๊ฐ ํ์ํ ๊ณณ์๋ง ์ ๋ฐ์ดํธ๋ฅผ ํด์ค๋๋ค.์ฆ, ๋ณํ๋ฅผ ์ต์ํ ์ํค๊ณ ์ด๋ก์ธํด ์ฑ๋ฅ์ด ์ข์์ง๋๊ฒ์ ๋๋ค.
-
Component(์ปดํฌ๋ํธ)
์ปดํฌ๋ํธ๋ UI๋ฅผ ๊ตฌ์ฑํ๋ ๊ฐ๋ณ์ ์ธ ๋ถ๋ถ์ผ๋ก UI๋ฅผ ์ท์ด๋ผ๊ณ ํ๋ค๋ฉด ์ปดํฌ๋ํธ๋ ์๋จ์ธ๊ฑฐ์ฃ ์๋จ๋ค์ ์ฌ๋จํด ์ท์ ๋ง๋๋๊ฒ์ ๋๋ค. ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํด์ ์ ์ง๋ณด์๊ฐ ์ฌ์์ง๋๋ค.
๐๐ปHow to use react?
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const h3 = React.createElement(
"h3",
{
id: "title",
onMouseenter: () => console.log("mouse enter"),
},
"Hello I'm a title"
);
const btn = React.createElement(
"button",
{
onClick: () => console.log("click"),
},
"Click me"
);
const conatainer = React.createElement("div", null, [h3, btn]);
ReactDOM.render(conatainer, root);
</script>
</html>
- ๊ฐ์ฅ ๋จผ์ React JS(์ด๋ฒคํธ๋ฆฌ์ค๋ ๊ฐ์ ์ธํฐ๋ ํฐ๋ธํ๊ฑธ ๊ฐ๋ฅํ๊ฒ ํด์ค) ์ ReactDOM(๋ฆฌ์ํธ ์์๋ค์ ๊ฐ์ ธ๋ค๊ฐ html๋ก ๋ฐ๊พธ๋ ์ฉ๋)์ฝ๋๋ฅผ importํ์ต๋๋ค.
- root๋ผ๋ ๋น์ด์๋ div๋ฅผ ์์ฑํ์ต๋๋ค. ReactDOM์ด React element๋ค์ ๊ฐ์ ธ๋ค ๋์ ๊ณณ์
๋๋ค.
- ๊ทธ ๋ค์ ReactDOM.render๋ฅผ ํตํด React element๋ค์ root div์์์ ๋ณด์ฌ์ฃผ๊ฒํ์ต๋๋ค.
React.createElement๋ฅผ ํตํด HTML์ ๊ฐ ์์๋ค์ property๋ฅผ ํจ๊ป ์ ์ฉํ ์์์ต๋๋ค. ํ์ง๋ง ์ด๊ฑด ๋ค์ ์ฐ์ง ์์๊ฒ์
๋๋ค. JSX๋ฅผ ์ด์ฉํ ๋ฌธ๋ฒ์ผ๋ก ๋ณด๋ค ํธ๋ฆฌํ๊ฒ ์ธ์์๊ธฐ๋๋ฌธ์
๋๋ค.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const h3 = React.createElement(
"h3",
{
id: "title",
onMouseenter: () => console.log("mouse enter"),
},
"Hello I'm a title"
);
const btn = React.createElement(
"button",
{
onClick: () => console.log("click"),
},
"Click me"
);
const conatainer = React.createElement("div", null, [h3, btn]);
ReactDOM.render(conatainer, root);
</script>
</html>
React.createElement๋ฅผ ํตํด HTML์ ๊ฐ ์์๋ค์ property๋ฅผ ํจ๊ป ์ ์ฉํ ์์์ต๋๋ค. ํ์ง๋ง ์ด๊ฑด ๋ค์ ์ฐ์ง ์์๊ฒ์ ๋๋ค. JSX๋ฅผ ์ด์ฉํ ๋ฌธ๋ฒ์ผ๋ก ๋ณด๋ค ํธ๋ฆฌํ๊ฒ ์ธ์์๊ธฐ๋๋ฌธ์ ๋๋ค.
๋ค์์๊ฐ์๋ JSX๋ฅผ ์๊ฐํด๋ณด๊ฒ ์ต๋๋ค.
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([React] Hello world! feat. ๐ง๋ฆฌ์กํธ๋ฅผ ์์จ์ผํ ๊น?), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@seoeun0321/React-Hello-world-feat.-๋ฆฌ์กํธ๋ฅผ-์์จ์ผํ ๊น์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค