[React] ์์ํ๊ธฐ ๐ฏ๏ธ
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
//2 props๋ฅผ {name: "sara"}๋กํด์ welcomeํจ์์ปดํฌ๋ํธ๋ฅผ ํธ์ถํ๋ค
//3 Welcome ์ปดํฌ๋ํธ๋ ๊ฒฐ๊ณผ์ ์ผ๋ก <h1>Hello, Sara</h1> ์๋ฆฌ๋จผํธ๋ฅผ ๋ฐํํ๋ค
//4 React DOM์ <h1>Hello, Sara</h1> ์๋ฆฌ๋จผํธ์ ์ผ์นํ๋๋ก DOM์ ํจ์จ์ ์ผ๋ก ์
๋ฐ์ดํธํ๋ค
const element = <Welcome name="Sara" />;
ReactDOM.render(element, document.getElementById('root'));
// ReactDOM.render()๋ก element๋ฅผ ํธ์ถํ๋ค.
//1. <Welcome name="Sara" /> ์๋ฆฌ๋จผํธ๋ก ReactDOM.render()๋ฅผ ํธ์ถํ๋ค ????????????
-------> 1๋ฒ์ ์ ํํ ๋ชจ๋ฅด๊ฒ ์...
React ์์ํ๊ธฐ (with Nomad coder) ๐ฏ๏ธ
1. ์ค์นํด๋ณด์
- node.js / npm / npx / create-react-app ์ค์นํ๊ธฐ
create-react-app
: React Web App์ ๊ธฐ๋ณธ ์ ์ ์ ํด์ค๋คnpx create-react-app [ํด๋๋ช ]
npx create-react-app movie-app
์ผ๋ก ์ธํ ํ๋ฉด ์๋ก์ด ํ์ผ๋ค์ด ์ค์น๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
- [ํด๋น ํด๋]๋ก ๋ค์ด๊ฐ์
npm start
ํ๋ฉด ์ฑ๊ณต์ ์ผ๋ก ์ปดํ์ผ๋์๋ค๋ ๋ฌธ๊ตฌ์ ํจ๊ป ๋ธ๋ผ์ฐ์ ์ ๋์ด๋ค.
2. ๋ง๋ ํ์ผ์ github repo์ ๋ฃ์ด๋ณด์
- [ํด๋น ํด๋]์์
git init
์ ์คํํ๋ฉด,~์์ ๊ธฐ์กด ๊น ์ ์ฅ์๋ฅผ ๋ค์ ์ด๊ธฐํํ์ต๋๋ค
๋ผ๋ ๋ฌธ๊ตฌ๊ฐ ๋ฌ๋ค. - github์ ๋ค์ด๊ฐ์ ์๋ก์ด repo๋ฅผ ์์ฑํ ํ, url์ ๋ณต์ฌํ๋ค.
- ๋ค์ ํฐ๋ฏธ๋์์,
git remote add origin [๋ณต์ฌํ url]
์ผ๋ก ์๊ฒฉ์ ์ ์ฅ์๋ฅผ ์ถ๊ฐํ๋ค. git status
๋ก ๋ณ๊ฒฝ ์ํ ํ์ธ /git add .
๋ก ๋ณ๊ฒฝ์ฌํญ ์ถ๊ฐ /git commit -m "์ถ๊ฐํ ๋ฉ์์ง"
๋ก ์ปค๋ฐ /git push origin master
๋ก ๊น์ ํธ์
3. react๊ฐ ๋์ํ๋ ๋ฐฉ์
- react๋ ์์ค์ฝ๋์ ์ฒ์๋ถํฐ html์ ๋ฃ์ง ์๊ณ , html์์ html์ ์ถ๊ฐ or ์ ๊ฑฐํ๋ค.
=> virtual DOM์ ๋ง๋ ๋ค. (๋น ๋ฆ)
4. ํด๋น repo์ ์ฃผ์์ผ๋ก ์์ธํ ์ค๋ช ๋ง๋ถ์ > ์ฌ๊ธฐ๋ฅผ ์ฐธ๊ณ
๋๋ง ํท๊ฐ๋ ธ๋ ์ฌ์ํ ๋ฌธ๋ฒ๋ค ๐ฏ๏ธ
- index.js > App.js > Food.js > Kimchi.js
// App.js
...
render() {
return (
<Food
name = "Kimchi"
color = { [1,2,3] } // ๋ฐฐ์ด๋ { } ์ด ์์ ๋ด์์ฃผ์ด์ผ ํ๋ค!
/>
);
}
...
---------------------------------------------------------------
// Food.js
function Food (props) { // props๋ obj
console.log(props) // {name: "Kimchi", color: Array(3)}
return (
<Kimchi name = "Kimchi" // props์ ์์ฑ์ ์ฌ๊ธฐ์ ์ฐ์ง ์๋๋ผ๋ ๋ค์ ์์์๊ฒ ์ ๋ฌํด์ฃผ๋ ค๋ฉด ๊ณ์ ๋ช
์์ฃผ์ด์ผ ํ๋ค.
color = {[1,2,3, "โ๏ธ"]}/> // ์ค๋์ ์ด๋ ๊ฒ ์ถ๊ฐํ ์๋ ์๋ค. ๊ทธ๋ผ ๋ค์ props์๋ ์ถ๊ฐ๋ ๋ฐ์ดํฐ๊ฐ ๋ค์ด๊ฐ๋ค.
)
}
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([React] ์์ํ๊ธฐ ๐ฏ๏ธ), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@delilah/React์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค