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๋ก ์์ฑ๋ ์ฝ๋๊ฐ ์ข ๋ ์์ฐ์ฑ์ด ์ข๊ณ ์ ์ง๋ณด์๋ ๊ฐ๋จํ๋ค.
'๐ Development > React Native' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[React Native] ๋ ์ด์์ ์คํ์ผ๋ง (0) | 2023.06.15 |
---|---|
[React Native] ์ปดํฌ๋ํธ ์คํ์ผ๋ง (0) | 2023.06.15 |
[React Native] context API๋ (0) | 2023.06.15 |
[React Native] State์ React Hook(useState) - ํจ์ํ ์ปดํฌ๋ํธ์ ํด๋์คํ ์ปดํฌ๋ํธ ๋์ ์ธ ๋ฐ์ดํฐ ๋ค๋ฃจ๊ธฐ (0) | 2023.06.15 |
[React Native] Props ๋? ์์ (0) | 2023.06.15 |