[React] ์‹œ์ž‘ํ•˜๊ธฐ ๐Ÿ’ฏ๏ธ

7641 ๋‹จ์–ด ReactReact
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์—๋Š” ์ถ”๊ฐ€๋œ ๋ฐ์ดํ„ฐ๊ฐ€ ๋“ค์–ด๊ฐ„๋‹ค.
    )
}

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ