Jieunny์ ๋ธ๋ก๊ทธ
S2) Unit 4. [React] ๊ธฐ์ด ๋ณธ๋ฌธ
๐ฃ ๋ฆฌ์กํธ
โ๏ธ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์ํ JS ์คํ์์ค ๋ผ์ด๋ธ๋ฌ๋ฆฌ
โ๏ธ ๋ฐ๋์ JSX๋ฅผ ์ฌ์ฉํด์ผ ํ๋ ๊ฑด ์๋๋ค. ๋ค๋ง ๋ฌธ๋ฒ์ ์ผ๋ก ๊ฐ๋ ์ฑ์ด ๋จ์ด์ง๊ณ ๋ณต์กํด์ง๋ ๋จ์ ์ด ์๋ค.
๐ฃ ๋ฆฌ์กํธ์ ํน์ง
1๏ธโฃ ์ ์ธํ(Declarative)
โฐ ํ ํ์ด์ง๋ฅผ ๋ณด์ฌ์ฃผ๊ธฐ ์ํด ํ๋์ ํ์ผ์ ๋ช ์์ ์ผ๋ก ์์ฑํ ์ ์๊ฒ JSX(HTML + JS)๋ฅผ ํ์ฉํ ์ ์ธํ ํ๋ก๊ทธ๋๋ฐ์ ์งํฅ
โฐ HTML/ CSS/ JS ๋ก ๋๋ ์ ์ ํ์๊ฐ ์๋ค.
2๏ธโฃ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ(Component-Based)
โฐ ์ปดํฌ๋ํธ : ํ๋์ ๊ธฐ๋ฅ ๊ตฌํ์ ์ํด ์ฌ๋ฌ ์ข ๋ฅ์ ์ฝ๋๋ฅผ ๋ฌถ์ด๋ ๊ฒ (๊ตฌ์กฐ์ ๋์์ ๋ํ ์ฝ๋๋ฅผ ํ ๋ญ์น๋ก ์ ์ ์ฝ๋์ )
โฐ ์ปดํฌ๋ํธ๋ ์๋ก ๋ ๋ฆฝ์ ์ด๊ณ , ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํ๋ฏ๋ก ๊ธฐ๋ฅ ์์ฒด์ ์ง์คํ์ฌ ๊ฐ๋ฐ ๊ฐ๋ฅํ๊ณ ์ ์ง๋ณด์๊ฐ ์ฉ์ดํ๋ค.
3๏ธโฃ ๋ฒ์ฉ์ฑ(Learn Once, Write Anywhere)
โฐ JS ํ๋ก์ ํธ ์ด๋์๋ ์ ์ฐํ๊ฒ ์ ์ฉ ๊ฐ๋ฅํ๋ค.
โฐ Facebook ์์ ๊ด๋ฆฌ๋์ด ์์ ์ ์ด๋ฉฐ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ฅผ ์ฌ์ฉํ๋ฉด ๋ชจ๋ฐ์ผ ๊ฐ๋ฐ๋ ๊ฐ๋ฅํ๋ค.
๐ฃ JSX ๋?
โ๏ธ JavaScript XML ์ ์ค์๋ง
โ๏ธ ๋ฆฌ์กํธ์์ UI๋ฅผ ๊ตฌ์ฑํ ๋ ์ฌ์ฉํ๋ ๋ฌธ๋ฒ์ผ๋ก JS๋ฅผ ํ์ฅํ ๋ฌธ๋ฒ
โ๏ธ HTML + JS + CSS ๋ฅผ JSX + CSS ๋ก ์ฌ์ฉ๊ฐ๋ฅํ๋ค.
โ๏ธ JSX๋ HTML์ด ์๋๊ธฐ ๋๋ฌธ์ Babel(JSX->JS๋ก ๋ณํ)์ ์ด์ฉํ ์ปดํ์ผ ๊ณผ์ ์ด ํ์ํ๋ค.
๐ฃ React๋ก ์๋ฆฌ๋จผํธ ์์ฑํ๊ธฐ
import React from "react";
import "./styles.css";
function App() {
const user = {
firstName: "React",
lastName: "JSX Activity"
};
return <h1>Hello, {formatName(user)}!</h1>;
}
export default App;
โฐ ํ๋์ ํ์ผ์์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์กฐ์ ๋์์ ํ ๋์ ํ์ ํ ์ ์๋ค.
๐ฃ JSX์ ํ์ฉ
โ๏ธ ์ฌ๋ฌ ์๋ฆฌ๋จผํธ๋ฅผ ์์ฑํ๊ณ ์ ํ ๋๋, ์ต์์์์ opening tag์ closing tag ๋ก ๊ฐ์ธ์ฃผ์ด์ผ ํ๋ค.
<div> //ํ๋์ div๋ก ๊ฐ์ธ์ฃผ์ด์ผ ํ๋ค.
<div>
<h1>Hello</div>
</div>
<div>
<h2>World</h2>
</div>
</div>
โ๏ธ class๋ฅผ ์ค๋๋ className์ผ๋ก ํ๊ธฐํด์ผ ํ๋ค.
<div className="greeting">Hello</div>
๐จ class๋ก ์์ฑํ๋ฉด JSํด๋์ค๋ก ๋ฐ์๋ค์ด๊ฒ ๋๋ค.
โ๏ธ JSX์์ JS๋ฅผ ์ฐ๋ ค๋ฉด ๊ผญ ์ค๊ดํธ๋ฅผ ์ด์ฉํด์ผํ๋ค.
function App() {
const name = 'Jieun';
return (
<div>
Hello, {name}
</div>
);
}
๐จ ์ค๊ดํธ๋ฅผ ์ฌ์ฉํ์ง ์์ผ๋ฉด ์ผ๋ฐ ํ ์คํธ๋ก ์ธ์ํ๋ค.
โ๏ธ ๋ฆฌ์กํธ ์๋ฆฌ๋จผํธ๊ฐ JSX๋ก ์์ฑ๋๋ฉด ๋๋ฌธ์๋ก ์์ํด์ผ ํ๋ค. -> ๋๋ฌธ์๋ก ์์ฑ๋ JSX์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉ์ ์ ์ ์ปดํฌ๋ํธ ๋ผ๊ณ ๋ถ๋ฅธ๋ค.
function Hello() {
return <div>Hello</div>
}
function HelloWorld() {
return <Hello />;
}
๐จ ์๋ฌธ์๋ก ์์ํ๊ฒ ๋๋ฉด ์ผ๋ฐ์ ์ธ HTML ์๋ฆฌ๋จผํธ๋ก ์ธ์ํ๋ค.
โ๏ธ ์กฐ๊ฑด๋ถ ๋ ๋๋ง์ if๋ฌธ์ด ์๋ ์ผํญ์ฐ์ฐ์๋ฅผ ์ด์ฉํด์ผ ํ๋ค.
<div>
{
(1+1 === 2) ? (<p>์ ๋ต</p>) : (<p>ํ๋ฝ</p>)
}
</div>
โ๏ธ ์ฌ๋ฌ ๊ฐ์ HTML ์๋ฆฌ๋จผํธ๋ฅผ ํ์ํ ๋๋ map() ํจ์๋ฅผ ์ฌ์ฉํ๋ค.
const posts = {
{id:1, title:...
}
function Blog() {
const content = posts.map((post) =>
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
return (
<div>
{content}
</div>
);
}
๐จ๋ฐ๋์ 'key' JSX์์ฑ์ ๋ฃ์ด์ผ ํ๋ค.
โ key ์์ฑ
โฐ map() ํจ์ ์ฌ์ฉ์, key์์ฑ์ ๋ฃ์ง ์์ผ๋ฉด ๋ฆฌ์คํธ์ ๊ฐ ํญ๋ชฉ์ key๋ฅผ ๋ฃ์ด์ผ ํ๋ค๋ ๊ฒฝ๊ณ ๊ฐ ํ์๋๋ค.
โฐ key ์์ฑ์ ์์น๋ map ๋ฉ์๋ ๋ด๋ถ์ ์๋ ์ฒซ ์๋ฆฌ๋จผํธ์ ๋ฃ์ด์ค๋ค.
โฐ key ์์ฑ๊ฐ์ id์ ๋ง์ฐฌ๊ฐ์ง๋ก ๋ณํ์ง ์๊ณ , ์์ ๊ฐ๋ฅํ๋ฉฐ, ์ ์ผํด์ผ ํ๋ค.
โฐ ์ ๊ณ ์ ํ id๊ฐ ์๋ ๊ฒฝ์ฐ ์ตํ์ ์๋จ์ผ๋ก ๋ฐฐ์ด ์ธ๋ฑ์ค๋ฅผ ์ฌ์ฉํ๋ค.
โ๏ธ ๋ฌธ์
const posts = [
{ id: 1, title: "Hello World", content: "Welcome to learning React" },
{ id: 2, title: "Installation", content: "You can install React from npm" }
];
export default function App() {
// ํ ํฌ์คํธ์ ์ ๋ณด๋ฅผ ๋ด์ ๊ฐ์ฒด post๋ฅผ ๋งค๊ฐ๋ณ์๋ก ๋ฐ๊ณ
// obj๋ฅผ JSX ํํ์์ผ๋ก ๋ฐ๊ฟ ๋ฆฌํดํด์ฃผ๋ ํจ์ postToJSX
const postToJSX = (post) => {
return (
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
};
// TODO: postToJSX ํจ์๋ฅผ ์ด์ฉํ์ฌ ์๋ฌ๋ฅผ ํด๊ฒฐํ๊ณ ์ฌ๋ฌ ๊ฐ์ ์๋ฆฌ๋จผํธ๋กค ํ์ํด๋ณด์ธ์.
return (
<div className="App">
<h1>Hello JSX</h1>
{posts.map(postToJSX)}
</div>
);
}
๐ฃ Component
โ๏ธ component : ํ๋์ ๊ธฐ๋ฅ ๊ตฌํ์ ์ํ ์ฌ๋ฌ ์ข ๋ฅ์ ์ฝ๋ ๋ฌถ์
โ๏ธ ๋ฆฌ์กํธ์์ ์ปดํฌ๋ํธ๋ ๊ฐ์ ๋ ๋ฆฝ์ ์ธ ๊ธฐ๋ฅ์ ๊ฐ์ง๋ฉฐ, UI์ ํ ๋ถ๋ถ์ ๋ด๋นํ๊ธฐ๋ ํ๋ค.
โ๏ธ ์ฌ๋ฌ๊ฐ์ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค๊ณ ์กฐํฉํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์๋ค.
โ๏ธ ๋ชจ๋ ๋ฆฌ์กํธ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ต์ ํ ๊ฐ์ ์ปดํฌ๋ํธ๋ฅผ ๊ฐ์ง๊ณ ์๋ค.
โ๏ธ ์ด ์ปดํฌ๋ํธ๋ root์ญํ ์ ํ๋ฉฐ, ๋ค๋ฅธ ์์ ์ปดํฌ๋ํธ๋ฅผ ๊ฐ์ง ์ ์๋ค. (์ด ๊ตฌ์กฐ๋ฅผ ํธ๋ฆฌ ๊ตฌ์กฐ๋ก ํ์ํ ํ ์ ์๋ค.)
๐ฃ Create React App
โ๏ธ ๋ฆฌ์กํธ SPA(Single Page Application)๋ฅผ ์ฝ๊ณ ๋น ๋ฅด๊ฒ ๊ฐ๋ฐํ ์ ์๋๋ก ๋ง๋ค์ด์ง ํด ์ฒด์ธ
โ๏ธ ํฐ๋ฏธ๋ -> mkdir ๋ฆฌ์กํธ๋ง๋คํด๋์ด๋ฆ -> npx create-react-app ์ํ๋ํ๋ก์ ํธ๋ช
'CodeStates > learning contents' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
S2) Unit 6. [React] React State & Props (2) | 2023.01.26 |
---|---|
S2) Unit 5. [React] React SPA (0) | 2023.01.25 |
S2) Unit 3. [JS] fetch & Axios (0) | 2023.01.19 |
S2) Unit 3. [JS] Node.js (0) | 2023.01.18 |
S2) Unit 3. [JS] ๋น๋๊ธฐ(Callback, Promise, Async/Await) (0) | 2023.01.17 |