์ ์ธํ(Declarative)์ด๋ค.
๋ค๋ฅธ ๊ธฐ์ ๋ค์ ํ ๊ณณ์ ๋ชจ์ ์ง๊ด์ ์ผ๋ก ์ฝ๋๋ฅผ ์งค ์ ์์ด์ ๊ฐ๋ฐ์๊ฐ ์ฝ๋๋ง ๋ณด๊ณ ๋ ์ค์ ์น์ฑ์ ์ ์ถํ ์ ์๋ค!
const Weather = () => (
<WeatherContainer>
<SearchInput />
<CityInfo />
<CurrentTemperature />
</WeatherContainer>
์ปดํฌ๋ํธ ๊ธฐ๋ฐ(Component-Based)์ด๋ค.
์๋ฅผ ๋ค์ด, ์ด๋ฏธ ๊ตฌํ๋ ์ฌ์ดํธ์ ์๋จ ํค๋๋ฅผ ์ผ์ชฝ ์ฌ์ด๋๋ฐ๋ก ์์น๋ฅผ ๋ณ๊ฒฝํด์ผ ํ ๋, HTML๋ก ๊ตฌ์กฐ๋ฅผ ๋ฐ๊พผ ํ CSS๋ฅผ ์์ ํ๊ณ , ๋ณ๊ฒฝ๋ ๊ตฌ์กฐ์ ๋์์ธ์ ๋ง์ถฐ DOM ๋ก์ง์ ์์ ํด์ผ ํ๋ค. ํ์ง๋ง, ์ปดํฌ๋ํธ ๊ธฐ๋ฐ์ผ๋ก ๋ง๋ค์๋ค๋ฉด ์์น๋ง ์์ ํด์ฃผ๋ฉด ๋๋ค!
๋ฒ์ฉ์ฑ(Learn Once, Write Anywhere)์ด ์ข๋ค.
์ ์ : ๋ฌธ์์ด๋ ์๋๊ณ HTML๋ ์๋ React์์ UI๋ฅผ ๊ตฌ์ฑํ ๋ ์ฌ์ฉํ๋ ๋ฌธ๋ฒ์ผ๋ก JavaScript๋ฅผ ํ์ฅํ ๋ฌธ๋ฒ. React ์๋ฆฌ๋จผํธ๋ฅผ ๋ง๋ค ์ ์๋ค.
Babel : JSX์ ๋ธ๋ผ์ฐ์ ๊ฐ ๋ฐ๋ก ์คํํ ์ ์๋ JavaScript ์ฝ๋๊ฐ ์๋๊ธฐ ๋๋ฌธ์ ๋ธ๋ผ์ฐ์ ๊ฐ ์ดํดํ ์ ์๊ฒ ๋ณํํด์ฃผ์ด์ผ ํจ. Babel์ JSX๋ฅผ ๋ธ๋ผ์ฐ์ ๊ฐ ์ดํดํ ์ ์๋ JavaScript๋ก ์ปดํ์ผํ๋ค.
// ์ผ๋ฐ React ์ฝ๋
return React.createElement (
"hi", null, `Hello, ${formatName(str)}!`
)
// JSX ํ์ฉํ React ์ฝ๋
return <h1>Hello, {formatName(user)}!</h1>;
<div> //opening tag
<div>
<h1>Hello</h1>
</div>
<div>
<h1>World</h1>
</div>
</div> //closing tag
// class๋ก ํ๊ธฐํ ์ React์์๋ JavaScript ํด๋์ค๋ก ๋ฐ์๋ค์
<div className="greeting">Hello!</div>
function App() {
const name = 'Hazel';
return (
<div>
Hello, {name} // {} ์ฌ์ฉํ์ง ์์ผ๋ฉด ์ผ๋ฐ ํ
์คํธ๋ก ์ธ์
</div>
);
}
function Hello() { // PascalCase
return <div>Hello!</div>
}
function HelloWorld() {
return <Hello/>; // ์๋ฌธ์๋ก ์์ฑ ์ ์ผ๋ฐ HTML ์๋ฆฌ๋จผํธ๋ก ์ธ์
}
<div>
{
(1+1 === 2) ? (<p>์ ๋ต</p>) : (<p>ํ๋ฝ</p>)
}
</div>
const posts = [
{id: 1, title: 'Hi', content: 'Welcome!'},
{id: 2, title: 'Hello', content: 'World!'}
];
function Blog() {
const content = posts.map((post) =>
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
return (
<div>{content}</div>
);
}
// ์ด๋ ๊ฒ๋ ์ฌ์ฉ ๊ฐ๋ฅ
function Blog() {
const postToElement = (post) => (
return (
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
);
return (
<div className="App">
<h1>Hello JSX</h1>
{posts.map(postToElement)}
</div>
);
}
์ ์ : SPA(Single Page Application)์ ์ฝ๊ณ ๋น ๋ฅด๊ฒ ๊ฐ๋ฐํ ์ ์๋๋ก ๋ง๋ค์ด์ง ํด ์ฒด์ธ์ด๋ค.
React ์ธ์๋ Babel(JS ์ปดํ์ผ๋ฌ), Jest(ํ ์คํธ ํ๋ ์์ํฌ), PostCSS(css ํธ๋์คํ์ผ๋ฌ), Webpack(๋ชจ๋ ๋ฒ๋ค๋ฌ) ๋ฑ์ด ์ฌ์ฉ๋๋๋ฐ, React๋ ์ด๋ฌํ ๋ชจ๋ ๊ฐ๋ฐ ํ๊ฒฝ ์ ํ ์ ํด ์ฒด์ธ์ผ๋ก ์ ๊ณตํ๋ค.
npx create-react-app [project_name]
| ์ฐธ๊ณ ์๋ฃ |
- CodeStates - UrClass