๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿš€ Development/React Native

React ๊ฐœ๋ฐœ์— Node.js๊ฐ€ ํ•„์š”ํ•œ ์ด์œ 

by Jay Din 2023. 6. 15.
728x90
๋ฐ˜์‘ํ˜•
๋ฐ˜์‘ํ˜•

React๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด Node.js๊ฐ€ ๋ฐ˜๋“œ์‹œ ํ•„์š”ํ•œ ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค.

โ€‹

Node.js๊ฐ€ React๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ๋” ์‰ฝ๊ฒŒ ํ•ด์ฃผ๋Š” ๋„๊ตฌ๋“ค์„ ๋‚ด์žฅํ•˜๊ณ  ์žˆ๋Š” ์˜คํ”ˆ์†Œ์Šค์ด์ž ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹คํ–‰ ํ™˜๊ฒฝ์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

โ€‹

Node.js.๋ฅผ ์„ค์น˜ํ•˜๋Š” ๊ฒฝ์šฐ NPM(Node Package Manager)์ด ๊ฐ™์ด ์„ค์น˜๋˜๋Š”๋ฐ ์ด NPM์ด๋ž€ ๊ฒƒ์„ ํ†ตํ•ด React๊ฐœ๋ฐœ์— ํ•„์š”ํ•œ ๋‹ค์–‘ํ•œ ๋ชจ๋“ˆ๋“ค์„ ๋‹ค์šด๋ฐ›์•„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

โ€‹

NPM์€ Node.js์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ชจ๋“ˆ๋“ค์„ ํŒจํ‚ค์ง€ํ™”ํ•˜์—ฌ ๋ชจ์•„๋‘” ์ €์žฅ์†Œ ์—ญํ• ์„ ํ•˜๋ฉฐ ์„ค์น˜/๊ด€๋ฆฌ๋ฅผ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” CLI๋ฅผ ์ œ๊ณตํ•œ๋‹ค.

โ€‹

React๊ฐœ๋ฐœ์ž๋“ค์€ ๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž๋“ค์ด ๊ตฌํ˜„ํ•ด ๋†’์€ ๊ฐ„ํŽธํ•˜๊ณ  ํ•„์š”ํ•œ ๋ชจ๋“ˆ ๋ฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์„ ๋‹ค์šด ๋ฐ›๊ธฐ ์œ„ํ•ด node.js๋ฅผ ์„ค์น˜ํ•ด์„œ ์‚ฌ์šฉํ•œ๋‹ค.

โ€‹

node.js๋ฅผ ํ†ตํ•ด npm์„ ์„ค์น˜ํ•˜๋Š” ์ด์œ .

node.js๊ฐ€ ์žˆ์œผ๋ฉด ๋ฐ”๋ฒจ์ด๋ผ๋Š” ์ปดํŒŒ์ผ๋Ÿฌ ๋„๊ตฌ๋ฅผ ์ถ”๊ฐ€๋กœ ๋‹ค์šด ๋ฐ›์•„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋Œ€์‹  JSX๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๊ฐ€๋Šฅํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

๋ฐ˜์‘ํ˜•

 

//JSX
Class Hello extends React.Componet{
  render(){
    return <div>Hello world</div>;
  } }
// JavaScript
<!DOCTYPE HTML>
<html>
<body>
  <p>์Šคํฌ๋ฆฝํŠธ ์ „</p>
  <script>
    alert( 'Hello, world!' );
  </script>
  <p>์Šคํฌ๋ฆฝํŠธ ํ›„</p>
</body>
</html>

 

JSX๋ž‘ JavaScript๋ฅผ ๋น„๊ตํ–ˆ์„ ๋•Œ, JSX๋กœ ์ž‘์„ฑ๋œ ์ฝ”๋“œ๊ฐ€ ์ข€ ๋” ์ƒ์‚ฐ์„ฑ์ด ์ข‹๊ณ  ์œ ์ง€๋ณด์ˆ˜๋„ ๊ฐ„๋‹จํ•˜๋‹ค.

728x90
๋ฐ˜์‘ํ˜•