์ด ๊ธ์ udemy์ React ์๋ฒฝ ๊ฐ์ด๋ with Redux, Next.js, TypeScript ๊ฐ์ข๋ฅผ ๋ฐํ์ผ๋ก ์ ๋ฆฌํ ๋ด์ฉ์ ๋๋ค.
24. Module Content
- React Core Syntax & JSX
- Working with Components
- Working with Data
25. ์ปดํฌ๋ํธ๋ ๋ฌด์์ธ๊ฐ? ์ ๋ฆฌ์กํธ๋ ์ปดํฌ๋ํธ์ ์ ๋ถ๋ผ๊ณ ํ๋๊ฐ?
- you will be able to focus on your core business logic that makes up your application instead of having to focus on the actual steps of updating the page when something happens somewhere.
- React is a JavaScript library for building user interfaces
- HTML, CSS & JavaScript are about building user interfaces as well.
- React makes building complex, interactive and reactive user interfaces simpler
- React is all about components.
What is Components?
- Because all user interfaces in the end are made up of components
Why components?
- Reusablility - Don't repoeat yourself
- Separation of Concerns - Don't do too many things in one and the same place (function)
- conclusion : Split big chunks of code into multiple smaller functions
26. ๋ฆฌ์กํธ ์ฝ๋๋ "์ ์ธ์ ๋ฐฉ์"์ผ๋ก ์์ฑ๋์์ต๋๋ค!
- React allows you to create re-usable and reactive components consisting of HTML and JavaScript (and CSS)
- Declarative Approach
(๋ฐ๋์ "ํจ์ํ ํ๋ก๊ทธ๋๋ฐ"์ ์์์ผ ํ ๊น? ๊ธ์์ ๋ ์์ธํ ๋ด์ฉ์ ์ดํด๋ณผ ์ ์๋ค. ) - Define the desired target state(s) and let React figure out the actual JavaScript DOM instructions
27. A Note About New React Projects & NodeJS
- DON'T download NodeJS version 17! Because at the moment, the created projects won't work with that version.
- ์ฐธ๊ณ ๋ก ๋๋ ๊ฒฝ์ฐ nvm ์ ์ฌ์ฉํ์ฌ v16.17.0 ๋ฒ์ ์ ์ถ๊ฐ ์ค์นํ์ฌ ์ฌ์ฉํจ.
28. ์๋ก์ด ๋ฆฌ์กํธ ํ๋ก์ ํธ ์์ฑํ๊ธฐ
- nodeJs : ๋ธ๋ผ์ฐ์ ๋ฐ์์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๊ฐ ์คํ๋ ์ ์๋๋ก ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐํ์ ํ๊ฒฝ์ด๋ค.
- create react app ํด์ ์ํด ์ด node.js๊ฐ ํ์ํ๋ค.
- https://nodejs.org/en/ ๋ฅผ ํตํด ์ต์ ๋ฒ์ ์ค์น
29. ์์ ํ๋ก์ ํธ
- ์ฒจ๋ถํ์ผ & github ์ฐธ๊ณ
30. ํ์ค ๋ฆฌ์กํธ ํ๋ก์ ํธ ๋ถ์ํ๊ธฐ
// index.js
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
- index.html ํ์ผ์ div ํ๊ทธ๊ฐ ์๊ณ , ์ด div ํ๊ทธ์ ๋ฌด์์ ๋ ๋๋ง ํด์ผ ํ๋์ง ์๋ฆฐ๋ค.
// package.json
"react": "^18.0.0",
"react-dom": "^18.0.0",
- react, react-dom ์ Rect ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก๋ถํฐ ๊ฐ์ ์์กด์ฑ์ ๊ฐ๋๋ค.
Tips
- import ์ third party libraries or ๋ง๋ js ํ์ผ ์ค ํ๋๋ผ๋ฉด .js๋ ์๋ตํด๋ ๋๋ค.
31. JSX ์๊ฐ
function App() {
return (
<div>
<h2>Let's get started!</h2>
</div>
);
}
export default App;
- JSX๋ ์๋ฐ์คํฌ๋ฆฝํธ XML์ ์๋ฏธํ๋ค. HTML์ XML์ด๋ผ๊ณ ํ ์ ์์
- ๋ชจ๋ ์์ค์ ์คํฌ๋ฆฝํธ๋ค์ ๋ณด์ฌ์ค๋ค. ๋ค์ ๋ํดํ ์ฝ๋๋ค์ ๋ณผ ์ ์๋ค.
- ์ ์ฒด ๋ฆฌ์กํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ค์ฝ๋์ ์ ์ฒด ๋ฆฌ์กํธ ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ค์ฝ๋๋ฅผ ํฌํจํ๊ธฐ ๋๋ฌธ์ด๋ค.
- ๋ธ๋ผ์ฐ์ ์์ ์คํ๋๋ ๋ณํ๋ ์ฝ๋๋ผ๊ณ ํ ์ ์๋ค. ์ฐ๋ฆฌ๊ฐ ์์ฑ๋ ์ฝ๋๊ฐ ์๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ๋ธ๋ผ์ฐ์ ์์ ์ง์๋์ง ์์ง๋ง, ์๋์ ์ผ๋ก ๋ธ๋ผ์ฐ์ ์์ ์๋ํ๋ ์ฝ๋๋ก ๋ณํ๋ ๊ฒ์ด๋ค.
- App()์ ๊ฒ์ํ ๊ฒฐ๊ณผ ๊ธฐ์กด ์์ฑํ ์ฝ๋๋ณด๋ค ๋ค๋ฅธ ์ฝ๋๋ค์ด ์ถ๊ฐ๋ ๋ชจ์ต์ ํ์ธํ ์ ์๋ค.
32.๋ฆฌ์กํธ ์๋ ๋ฐฉ์
์ปดํฌ๋ํธ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์์ฒด html ์์์ผ ๋ฟ์ด๋ค.
- React allows you to create re-usable and reactive components consisting of HTML and JavaScript (and CSS)
- Declarative Approach (์ ์ธํ ์ ๊ทผ / How ๋ณด๋ค What์ ์ด์ !๐จ )
- Define the desired tagert state(s) and let React figure out the actual JavaScript DOM instructions
function App() {
return (
<div>
<h2>Let's get started!</h2>
<p>This is also visible! </p>
</div>
);
}
export default App;
→ ์๋ฒ๋ ์๋์ ๋ณํ๋ฅผ ์์์ฑ๊ณ ์ ๋ฐ์ดํธ ํ๋ค.
→ ์ด๋ฌํ ์ด์ ๋ค๋ก ๋ฆฌ์กํธ๋ ์ปดํฌ๋ํธ๋ผ๋ ๊ฐ๋ ์ ๋์ ํ๋ค.
33. ์ฒซ ๋ฒ์งธ ์ฌ์ฉ์ ์ง์ ์ปดํฌ๋ํธ ๋ง๋ค๊ธฐ
- ํ ์ปดํฌ๋ํธ๋น ํ๋์ ํ์ผ์ ๊ฐ๋๋ก ์ฐ์ตํ๋ ๊ฒ ์ข๋ค.
- ๋ฆฌ์กํธ์ ์๋ ์ปดํฌ๋ํธ๋ ๋จ์ง ์๋ฐ์คํฌ๋ฆฝํธ์ ํจ์์ผ ๋ฟ์ด๋ค. (Just javascript function!)
const root = ReactDOM.createRoot(document.getElementById('root'));
→ ์ด ์์ ์ ๋ฃจํธ ์ปดํฌ๋ํธ๋ฅผ ์ํด ํ๋ฒ๋ง ํ๋ ์์ ์ด๋ค.
import './App.css';
import ExpenseItem from './components/ExpenseItem';
function App() {
return (
<div>
<h2>Let's get started!</h2>
<ExpenseItem>This is also visible!</ExpenseItem>
</div>
);
}
export default App;
→ ์๋ฌธ์๋ก ์์ํ๋ ์์๋ ๋ด์ฅ๋ html ์์์ด๊ณ , ๋๋ฌธ์๋ก ์์ํ๋ ์์๋ ๊ฐ๋ฐ์๊ฐ ์ ์ํ ์์์ด๋ค.
34.๋ ๋ณต์กํ JSX ์ฝ๋ ์์ฑ
- ๊ฐ์ฅ ์ค์ํ ๊ท์น! JSX ์์ฑ์ ๋ฐ๋์ ํ๊ฐ์ ๋ฃจํธ ์์๋ฅผ ๊ฐ์ ธ์ผ ํ๋ค.
- ๊ฐ๋ ์ฑ์ ๊ณ ๋ คํ์ฌ ๊ดํธ๋ฅผ ์ฌ์ฉํ ์๋ ์๋ค. ()
35. ๊ธฐ๋ณธ CSS ์คํ์ผ ์ถ๊ฐ
- ์ผ๋ฐ์ ์ธ html์์๋ class๋ฅผ ์ฌ์ฉํ์ง๋ง, jsx์์๋ className์ ์ฌ์ฉํ๋ค.
- class๋ javascript์์ ์์ฝ๋ ๋จ์ด์ด๊ธฐ ๋๋ฌธ!
36. JSX์์ ๋์ ๋ฐ์ดํฐ ์ถ๋ ฅ ๋ฐ ํํ์ ์์ ํ๊ธฐ
- ์ค๊ดํธ (Curly braces)๋ฅผ ์ฌ์ฉํ๋ค.
- ๋ชจ๋ data ๊ฐ์ฒด์์ ์ฌ์ฉ ๊ฐ๋ฅํ ๋ด์ฅ ๋ฉ์๋์ธ toISOString์ ํธ์ถํด์ ๋ฌธ์์ด๋ก ์ถ๋ ฅํ ์ ์๋ค.
37. "props"๋ฅผ ํตํด ๋ฐ์ดํฐ ์ ๋ฌํ๊ธฐ
- ๊ธฐ๋ณธ์ ์ผ๋ก ์ฐ๋ฆฌ๋ง์ ์ฌ์ฉ์ ์ง์ html ์์์ฒ๋ผ ์์ฑ์ ๊ตฌ์ถํ๊ณ ์๋ค. ๋ฆฌ์กํธ๋ก๋ ์ฌ์ฉ์ ์ง์ ์ปดํฌ๋ํธ๋ ์์ฑ์ ๊ฐ์ง ์ ์๋๋ฐ, ๋ฆฌ์กํธ์์ ์ด ๊ฐ๋ ์ ์์ฑ ๋์ props ๋ผ๊ณ ๋ถ๋ฆฐ๋ค.
- props ๋ properties ๋ฅผ ๋ํ๋ธ ๊ฒ
- props๊ฐ์ฒด์์ ํค์ ๋ฐธ๋ฅ๋ก ์ด๋ฃจ์ด์ง ํ์ผ ํฌ๋งท์ ๊ฐ๊ณ ์๋ค.
- ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค ์ ์๊ฒ ํด์ค๋ค. (์ค์ ๐ฏ ๐ฏ ๐ฏ)
function ExpenseItem(props) {
return (
<div className='expense-item'>
<div>{expenseDate.toISOString}</div>
<div className='expense-item__description'>
<h2>{props.title}</h2>
<div className='expense-item__price'>${expenseAmount}</div>
</div>
</div>
)
}
→ props ์ ๊ฐ์ ํ์ฉํ ์ ์์! ๐คง
<ExpenseItem
title={expenses[0].title}
amount={expenses[0].amount}
date={expenses[0].amount}>
</ExpenseItem>
→ ํค๋ ์ ์๋ค ์์ฑ ์ด๋ฆ์ธ title, amount, date๊ฐ ๋ ๊ฒ์ด๊ณ , ๋ฐธ๋ฅ๋ ์ฌ๊ธฐ์ ์ค์ ๋ ๊ฐ์ด ๋ ๊ฒ์ด๋ค.
38. ์ปดํฌ๋ํธ์ "์ผ๋ฐ" JavaScript ๋ ผ๋ฆฌ ์ถ๊ฐํ๊ธฐ ์ปดํฌ๋ํธ๋ฅผ ์ฌ๋ฌ ์ปดํฌ๋ํธ๋ก ๋ถํ ํ๊ธฐ
- You can Google for JS toLocaleString to find an official article on this method. And this method simply helps you with outputting dates in human readable formats.
- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString
function ExpenseItem(props) {
const month = props.date.toLocaleString("en-US", { month: "long" });
const day = props.date.toLocaleString("en-US", { day: "2-digit" });
const year = props.date.getFullYear();
return (
<div className="expense-item">
{/* <div>{props.date.toISOString()}</div> */}
<div>
<div>{month}</div>
<div>{year}</div>
<div>{day}</div>
</div>
<div className="expense-item__description">
<h2>{props.title}</h2>
<div className="expense-item__price">${props.amount}</div>
</div>
</div>
);
}
export default ExpenseItem;
39. ์ปดํฌ๋ํธ๋ฅผ ์ฌ๋ฌ ์ปดํฌ๋ํธ๋ก ๋ถํํ๊ธฐ
- convention of naming
- ์ฌ๋ซ๋ ํ๊ทธ์ ์ปจํ ์ธ ์๋ ์ปดํฌ๋ํธ๊ฐ ์๋ค๋ฉด ์๋์ผ๋ก ๋ซํ๋ ์์๋ก ์์ฑํ ์ ์๋ค.
<ExpenseDate><ExpenseDate />
<ExpenseDate /> // O
40. ์ฐ์ตํ๊ธฐ : ๋ฆฌ์กํธ ๋ฐ ์ปดํฌ๋ํธ ๊ธฐ๋ณธ ์ฌํญ
- pass !
41. ์ฐ์ตํ๊ธฐ : ๋ฆฌ์กํธ ๋ฐ ์ปดํฌ๋ํธ ๊ธฐ๋ณธ ์ฌํญ(์ ๋ต)
- ๋ ๊ฐ์ ์๋ก์ด ์ปดํฌ๋ํธ๋ฅผ ์ถ๊ฐํ๊ณ , props๋ฅผ ์ด์ฉํด์ ์ปดํฌ๋ํธ์ ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ๊ณ , css ๋ฅผ ์ด์ฉํ์ฌ ๊ธฐ๋ณธ์ ์ธ ์คํ์ผ์ ์ถ๊ฐํ๋ค.
42. composition์ ๊ฐ๋ ("children prop")
- App.js ์์๋ Expenses ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๊ณ , Expenses ์์๋ ExpenseItem์ ์ฌ์ฉํ๋ค.
- Generally, this approach of building a user interface from smaller building blocks is called composition.
- ๊ธฐ์กด์ border-radius, box-shadow๋ฅผ Card ์ปดํฌ๋ํธ๋ก ๋ฐ๋ก ๋ง๋ค์ด๋ณด์.
import "./Card.css";
function Card(props) {
return <div className="card"></div>;
}
export default Card;
.card {
border-radius: 12px;
box-shadow: 0 1px 8px rgba(0, 0, 0.25);
}
import "./ExpenseItem.css";
import ExpenseDate from "./ExpenseDate";
import Card from "./Card";
function ExpenseItem(props) {
return (
<Card className="expense-item">
<ExpenseDate date={props.date} />
<div className="expense-item__description">
<h2>{props.title}</h2>
<div className="expense-item__price">${props.amount}</div>
</div>
</Card>
);
}
export default ExpenseItem;
- Card ์ปดํฌ๋ํธ๊ฐ ์ ๋๋ก ๋์ํ์ง ์๋๋ค.
- we will use one special prop which is built into React, which every component receives, even if you're never setting it explicitly.
import "./Card.css";
function Card(props) {
return <div className="card">{props.children}</div>;
}
export default Card;
- Children, as I said, is a reserved name and the value of this special children prop will always be the content between the opening and closing tags of your custom component.
import "./Card.css";
function Card(props) {
const classes = "card " + props.className;
return <div className={classes}>{props.children}</div>;
}
export default Card;
- now anything we receive as a class name from outside is added to that string.
Now, why would we do that? What did we gain by doing that?
๋ฆฌ์กํธ๋ก ์์ ํ ๋ ํญ์ composition ์ ์ฌ์ฉํ๊ฒ ๋ ๊ฒ์ด๋ค. ์ปดํฌ๋ํธ๋ฅผ ๊ฒฐํฉํ ๋๋ง๋ค, ์ฌ๋ฌ๋ถ์ composition์ ์ด์ฉํ๋ค. composition์์ ํนํ ์ค์ํ ๋ถ๋ถ์ props.children์ด๋ค. wrapper ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ๊ฒ ํ๋ฉฐ ํน๋ณํ ์ปดํฌ๋ํธ์ด๋ฉฐ, ์ข ์ข ์ฌ์ฉํ ์ผ์ด ์๊ธด๋ค.
43. ์ฒซ ๋ฒ์งธ ์์ฝ
- component, jsx
- how we organize our files
- how we write our functions
44. JSX ์์ธํ ๋ณด๊ธฐ
![](https://blog.kakaocdn.net/dn/etDUTa/btrLufLDz37/bQK8bWdWqfFjMtRKffcCd1/img.png)
- ๋ธ๋ผ์ฐ์ ๋ JSX ์ฝ๋๋ฅผ ์ง์ํ์ง ์๋๋ค.
"react": "^18.2.0",
"react-dom": "^18.2.0",
- package.json ์์ ๋ฆฌ์กํธ์ ๊ด๋ จ์๋ ๋ ๊ฐ์ง ์ข ์ ์์๋ฅผ ๊ฐ๊ณ ์๋ค.
- ์ฌ๊ธฐ ๋ถ๋ถ์ ๊ฐ์์ ๋์์๋ ๋ถ๋ถ์ด๋ ์ด์ง ๋ค๋ฅด๊ธด ํ๋ค. version ์ด ๋ค๋ฅธ๊ฑด์ง.. ๐ถ๐ถ
![](https://blog.kakaocdn.net/dn/CteGr/btrLAqkZpFT/WTLPZWnT0OQOhh2xWBGzqk/img.png)
- ๊ณผ๊ฑฐ ๋ฒ์ ์์๋ ํญ์ react๋ฅผ import ํด์ผ ํ๋ค. ์ต์ ๋ฒ์ ์์๋ ํ์ํ์ง ์์!
return React.createElement(
"div",
{},
React.createElement("h2", {}, "Let's get started!"),
React.createElement(Expenses, { itmes: expenses })
);
// return (
// <div>
// <h2>Let's get started!</h2>
// <div>
// <Expenses items={expenses} />
// </div>
// </div>
// );
import React from "react";
- ๊ธฐ์ ์ ์ผ๋ก ์ ์ฝ๋๋ฅผ Import ํ ํ์๋ ์์ง๋ง, JSX ์ฝ๋๋ฅผ ์ฌ์ฉํ ๋ ๋ฆฌ์กํธ๊ฐ ์ฌ์ค์ ๋ด๋ถ์์ ์ฌ์ฉ๋๊ณ ์๋ค๋ ๊ฒ์ ๊ฐ์กฐํ๊ธฐ ์ํด ํด๋น ๊ตฌ๋ฌธ์ import ํด๋ณด์.
- ๋ฃจํธ jsx ์์๋ก ์ ์ผ๋ถ wrapping ์์๊ฐ ํ์ํ์ง ์ ์ ์๋ค. (๋ฐํ๋๋ ๋ ์์๋ฅผ ๋๋ํ ๊ฐ์ง ์ ์๋ ์ด์ ) ๋ฆฌ์กํธ createElement ์ธ๊ณ์์๋ ํ ๊ฐ ์ด์์ children element ๋ฅผ ๊ฐ์ง ์ ์๋ element 1๊ฐ๋ฅผ ์์ฑํ๊ธฐ ๋๋ฌธ์ด๋ค. ๋ฐ๋ผ์ ์ด ํ๊ฐ์ wrapper root jsx element๋ฅผ ๊ฐ๋ ๊ฒ์ด๋ค. ํ๋ ์ด์์ ๋ฐํํ ์ ์๋ค. ์ด๋ ๋ณด์ด์ง ์๋ ๊ณณ์์ ์ผ์ด๋๋ ์์ ๋ค์ด๋ค.
45. ์ปดํฌ๋ํธ ํ์ผ ๊ตฌ์ฑํ๊ธฐ
- components ํด๋ ์์์๋ ์ ์ ํ๊ฒ ํด๋๋ฅผ ๋๋ ์ ํ์ฉํ๋ ๊ฒ ์ข๋ค.
46. ๋์ฒด ํจ์ ๋ฌธ๋ฒ(syntax)
- arrow function ํ์ฉํ๊ธฐ
- ํ์ง๋ง ๊ฐ์ธ์ ์ทจํฅ์ด๋ ์ทจํฅ๊ป ์ฌ์ฉํ๋ฉด ๋๋ค. (just personal preference)
function App() {
...
}
const App = () => { // arrow function
...
}
https://www.udemy.com/course/best-react/
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString
https://www.codingfactory.net/12959