React app์ component๋ก ๋ง๋ค์ด์ก๋ค. component๋ ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํ ์ฝ๋์ ๋ฌถ์ ๊ฐ์๊ฒ์ผ๋ก ํ๋์ ์ผ์ ์ํํ๋ค. ๊ทธ๋ฆฌ๊ณ ๊ทธ ์ผ์ HTML์ re-rendering ํ๋ ๊ฒ์ ์๋ฏธํ๋ค.
import React from 'react'
: ์ด ์ฝ๋๋ React๋ผ๋ ์ด๋ฆ์ ๋ณ์๋ฅผ ์์ฑํ๋ค. ์ด๋ ๊ฒ ์์ฑํ ๋ณ์๋ JavaScrip object library๋ฅผ ๋ถ๋ฌ์ค๋ ์ฝ๋์ด๋ค.(ex: React.createElement(), React.Component
)
import ReactDOM from 'react-dom
: React์ ๊ด๋ จ์ด ์๋ method๋ฅผ ๋ถ๋ฌ์ค๋ ์ฝ๋์ด๋ฉฐ 'react-dom'์ DOM๊ณผ ์ํธ์์ฉ ํ ์ ์๋ DOM์ ํนํ๋ method์ด๋ค.(ex:ReactDOM.render()
)
class YourComponentNameGoesHere
extends React.Component {}: ์ฌ์ฉ์ ์ง์ component์ class๋ฅผ ๋ง๋ค ๋ ์ฌ์ฉํ๋ ๋ฌธ๋ฒ์ด๋ค. ์ด ๋ compolnent class์ ์ด๋ฆ์ UpperCamelCase๋ก ์์ฑํด์ผ ํ๋ค.(ex: MyComponentClass
) ๊ทธ ์ด์ ๋ ๊ธฐ์กด์ JSX element์ ๊ตฌ๋ถํ๊ธฐ ์ํจ์ด๋ค.
React.js๋ฅผ ์ฌ์ฉํ ๋ JavaScript ํ์ผ์ ์๋ก ๋ค๋ฅธ ํ์ผ๋ค์ ๊ธฐ๋ณธ์ ์ผ๋ก๋ ์ ๊ทผํ ์ ์๋ ์ํ์ด๋ค. ๋น์ ์ด ๋ง๋ component๋ค์ ์ ๊ธฐ์ ์ผ๋ก ์ฌ์ฉํ๊ธฐ ์ํด์๋ import/export ์ ์ธ์ด ํ์
ํ๋ค. import๋ export์ ํญ์ ํจ๊ป ์ฌ์ฉ๋๋ค.
[Named exports]
import
: import๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด . ๋๋ / ํํ์ file ๊ฒฝ๋ก
๋ฅผ ์
๋ ฅํด์ผํ๋๋ฐ ๊ทธ ๋ ๋ค์ ๋ถ๋ ํ์ฅ์ ๋ช
์ ์๋ต์ด ๊ฐ๋ฅํ๋ฉฐ(./NavBar.js โ ./NavBar) import์ ์ด๋ฆ์ ๋ณ์/ํจ์/Class ์ด๋ฆ์ผ๋ก ์ง์ ํ๊ณ {}๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค. import { NavBar } from './NavBar.js';
import { NavBar } from './NavBar';
export
: export ์ ์ธ์ ๋ค๋ฅธ ๊ณณ์ผ๋ก code๋ฅผ ๊ณต์ ํ๋ ๊ฒ์ ๊ฐ๋ฅํ๊ฒ ํด์ฃผ๋ฉฐ export๊ฐ ํ์ํ ์ฝ๋๋ฌธ ๋ฐ๋ก ๋ค์ ์์ฑ๋๋ค. ์ด๋ export๋ var, let, const, function, class
๋ฑ ์ด๋ค ๊ฒ๋ ๊ฐ๋ฅํ๋ฉฐ ๊ฐ์ ํ์ผ์์ 2๊ฐ ์ด์์ export๋ ๊ฐ๋ฅํ๋ค. export const alsoRan = 'TimeCube';
class๋ฅผ ์์ฑํ ๋ class body ๋ถ๋ถ์๋ render() method๊ฐ ์์ด์ผ ํ๊ณ โ method๋ return์ ๊ผญ ํฌํจ
ํด์ผ ํ๋ค. ๋ณดํต return ๋ฌธ์ JSX ์ฝ๋๋ฅผ return ํ๋ค. render ํจ์๋ class๋ก ์์ฑ๋ component๊ฐ ์ํํ๋ ์ผ์ ์ ์ํ๋ค.
class ComponentFactory extends React.Component {
render() {
return <h1>Hello world</h1>;
}
}
โก render logic์ด ์คํ๋๊ธฐ ์ ์ logic์ reder method ์์์ ์งํ
๋์ด์ผ ํ๋ค.
class Random extends React.Component {
render() {
// First, some logic that must happen
// before rendering:
const n = Math.floor(Math.random() * 10 + 1);
// Next, a return statement
// using that logic:
return <h1>The number is {n}!</h1>;
}
}
โ์๋ชป๋ ๋ฐฉ์: render() ๋ฐ๊นฅ์ ๋ณ์ ์ ์ธ์ syntax error๋ฅผ ๋ฐ์์ํจ๋ค.
class Random extends React.Component {
// This should be in the render function:
const n = Math.floor(Math.random() * 10 + 1);
render() {
return <h1>The number is {n}!</h1>;
}
};