๐ ๊ฐ๋ฐ ๊ณต๋ถ 1๊ฐ์ ์ฐจ์ธ to-be ๊ฐ๋ฐ์์ ์์ต ๋ธ๋ก๊ทธ๐๏พ Sep 13 ~ 17, 2021
ํ์ฌ ์ํ
App.js๊ฐ Hello.js๋ฅผ importํ๊ณ ์๋ ์ํฉ
React๋ก ๋ง๋ page๋ component๋ค๋ก ๊ตฌ์ฑ๋์ด ์๋ค.
์ด์ page ๋จ์๋ก HTML file์ ๋ง๋๋ ๊ฒ ์๋๋ผ ๊ฐ ๋ถ๋ถ์ compoenent๋ก ๋ง๋ค์ด ์กฐ๋ฆฝํด์ ์ฌ์ฉํ๋ ๊ฒ์ด๋ค.
๋น์ทํ component๋ ์ฌ์ฌ์ฉํ ์ ์์ด์ ํธํ๋ค.
ex. header component, menu component ๋ฑ
App.js๊ฐ ํ๋์ component์ธ๋ฐ, component๋ classํ์ผ๋ก๋ ๋ง๋ค ์ ์๊ณ , ํจ์ํ์ผ๋ก๋ ๋ง๋ค ์ ์๋ค.
// component folder ๋ด file์ code ์์ฑ
// ํจ์ํ component
const Hello = function() {
<p>Hello</p>;
};
โ ํ์ดํํจ์๋ก ๋ณ๊ฒฝ
const Hello = () => {
<p>Hello</p>;
};
โ export๊น์ง ํ ์ค๋ก ์์ฑ
export default function Hello(){
<p>Hello</p>;
}
component๋ช ์ ์๊ธ์๋ฅผ ๋๋ฌธ์๋ก ์ ์ด์ผ ํ๋ค.
component folder๋ฅผ ๋ง๋ค์ด .js file๋ ๋ง๋ค๊ณ ํจ์๋ ๋ง๋ค์ด์ exportํ๋ฉด ํ์ํ ๊ณณ์์ ํด๋น component๋ฅผ importํด ์ฌ์ฉํ๋ค.
'.js'๋ ์๋ตํด์ ์์ฑํ๋ฉฐ, importํ ํ HTML tag์ฒ๋ผ ํ์ํ ๊ณณ์ ์์ฑํ๋ค.
// import๊ฐ ํ์ํ file์ code ์์ฑ
import "./App.css";
import Hello from './component/Hello';
function App(){
return <div className="App">
<Hello />
</div>;
}
component๋ ์ด๋์์๋ ๋ช ๋ฒ์ด๋ ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํ๋ค.
JSX๋ 'JavaScript XML'์ ์ฝ์์ด๋ค.
ํจ์ํ component๋ฅผ ์ฐ๋ฉด ์ด JSX๋ฅผ ํธ์ถํ๋ค.
class
๋ HTML์ ์์ฝ์ด์ด๋ฏ๋ก JSX์์๋ class
๋์ className
์ ์ด๋ค.
style์ ๊ฐ์ฒด๋ก ์ ์ด์ผ ์ ๋ฌ๋๋ค.
import ".APP.css"
function App() {
return <div className="App">
<h1 style={{
color: 'red'
}}>Welcome</h1>
</div>;
export default App;
return ์์์ ๋ณ์๋ฅผ ์ ์ธํ๊ณ (const name = "Jane";
), return ์์์ ์ค๊ดํธ์ ๋ณ์๋ช
์ ์
๋ ฅํด ๋ณ์์ ๊ฐ์ ์ฌ์ฉํ ์ ์๋ค. ({name}
)
return ์์ ํ๋์ tag๋ก ๊ฐ์ธ์ ธ์์ด์ผ ํ๋ค.
๏พ ๏พ 1) ๋ณ๋์ .scss file์ ๊ธฐ์กด์ SCSS ๋ฌธ๋ฒ์ผ๋ก ์์ฑ
๏พ ๏พ ๏พ ๏พ (1) ์ถํ ์์ฑ
๏พ ๏พ 2) ๋ณ๋์ .css file์ ๊ธฐ์กด์ CSS ๋ฌธ๋ฒ์ผ๋ก ์์ฑ
๏พ ๏พ ๏พ ๏พ (1) ๊ฐ .css file์ ์์ฑํ์ฌ CSS ์์ฑ
๏พ ๏พ ๏พ ๏พ ๏พ ๏พ ๏พ index.css file์ ์์ฑํ style์ ์ ์ญ์, component์ด๋ฆ.css์ ์์ฑํ style์ ๊ฐ component์ ์ํฅ์ ๋ฏธ์น ๊ฒ ๊ฐ์ง๋ง clss๋ช
์ด ๊ฐ์ผ๋ฉด ๊ฐ component.css์ ์์ฑํ style๋ ์ ์ญ์ ์ํฅ์ ๋ฏธ์น๋ค. ๊ทธ๋ฌ๋ฏ๋ก ๊ฐ file๋ก ์์ฑํ๊ณ ์ถ๋ค๋ฉด (2)๋ฒ ๋ฐฉ์์ ์ฑํํ๋ ๊ฒ ์ข๋ค.
๏พ ๏พ ๏พ ๏พ (2) ๊ฐ .module.css file์ ์์ฑํ์ฌ CSS ์์ฑ
๏พ ๏พ ๏พ ๏พ ๏พ ๏พ ๏พ 'styles'๋ฅผ importํด์ผ ํ๋ฉฐ, CSS component๋ฅผ ์ค๊ดํธ ์์ ์ ์ด์ผ ํ๋ค.
import styled from "./App.module.css";
...
<div className={styles.box}>App</div>
๏พ ๏พ 3) ๋ชจ๋ style์ index.css์ ์์ฑ
๏พ ๏พ ๏พ ๏พ component๋ page๊ฐ ๋ง์ง ์์ ๋ ์ฌ์ฉํ๊ธฐ ํธํจ
๏พ ๏พ 4) in-line style
๏พ ๏พ ๏พ ๏พ ๋จ, ๊ฐ์ฒด๋ก ์์ฑํด์ผ ํ๋ฉฐ dash๊ฐ ์๋ camelCase๋ก ์์ฑํด์ผ ํจ
๏พ ๏พ ๏พ ๏พ ํน๋ณํ ์ด์ ๊ฐ ์๋ค๋ฉด ์ฌ๋งํ๋ฉด in-line์ผ๋ก ์์ฑํ์ง ์์
<h1
style = {{
color: '#f00'
borderRight: "12px solid #000",
marginBottom: "50px",
opacity: 0.5,
}}
๏พ ๏พ 1) ๋ฏธ๋ฆฌ ํจ์๋ฅผ ๋ง๋ค์ด๋๊ณ ์ ๋ฌ
export default function Hello() {
function showNmae() {
console.log("Jane");
}
return (
<div>
<button onClick={showName}>Show Name</button>
</div>
);
}
๏พ ๏พ ๏พ ๏พ ์ฐธ๊ณ ๋ก {showName()}
์ด๋ผ๊ณ ์ ์ผ๋ฉด(์ฆ, ํจ์๋ช
์ ๊ดํธ๋ฅผ ์ถ๊ฐํ๋ฉด) return ์์ ์๋ 'ํจ์๊ฐ ๋ฐํํ๋ ๊ฐ์ ํธ์ถํ๋ค'๋ ์๋ฏธ์ด๋ฏ๋ก 'Jane'์ด ์๋ undefined
๊ฐ ๋ฐํ๋๋ค. ์ง๊ธ์ showName ํจ์๊ฐ ๋ฐํํ๋ ๊ฐ์ด ์๊ธฐ ๋๋ฌธ์ด๋ค.
๏พ ๏พ 2) ๋ด๋ถ์ ์ง์ ํจ์๋ฅผ ์์ฑ
export default function Hello() {
function showNmae(age) {
console.log(age);
}
return (
<div>
<button onClick={() => {
console.log(30);
}}
>Show Name</button>
</div>
);
}
๏พ ๏พ ๏พ ๏พ ์ ๋ฐฉ์์ผ๋ก ํ๋ฉด ๋งค๊ฐ๋ณ์๋ฅผ ์ ๋ฌํ๊ธฐ ์ฝ๋ค. ์๋ฅผ ๋ค์ด, console.log(30);
์๋ฆฌ์ showAge(10);
์ ์
๋ ฅํ๋ฉด ๋ฐ๋ก showAge ๊ฐ์ด 10์ด ๋๋ค.
state๋ component๊ฐ ๊ฐ์ง๊ณ ์๋ ์์ฑ ๊ฐ์ด๋ค.
์ด ์์ฑ ๊ฐ์ด ๋ณํ๋ฉด React๊ฐ ์๋์ผ๋ก UI๋ฅผ updateํด์ค๋ค.
๋ฒํผ์ ๋๋ฅผ ๋๋ง๋ค ์ด๋ฆ์ ๋ณ๊ฒฝํ๋ code
changeName ํจ์๋ name์ ๋ฐ๊ฟ์ฃผ๋๋ฐ, Mike์ผ ๋ Jane์ผ๋ก Jane์ผ ๋ Mike๋ก ๋ณ๊ฒฝํ๋ค.
return์ {name}
์ผ๋ก ์ด๋ฆ์ ํํํด ์ค๋ค.
button์ ๋ง๋ค์ด clickํ๋ฉด (onClick
) ์ด๋ฆ์ ๋ฐ๊ฟ์ฃผ๊ฒ ํ๋ค.
let name = "Mike";
function changeName() {
name = name === "Mike" ? "Jane" : "Mike";
consoel.log(name)
}
return (
<div>
<h2>{name}</h2>
<button onClick={changeName}>Change</button>
</div>
);
ํ์ง๋ง ์ด๋ ๊ฒ ์
๋ ฅํด๋ Console tab์๋ง ๊ฐ์ด ์ ๋์ฌ ๋ฟ ํ๋ฉด์์๋ ์ด๋ฆ์ด ๋ฐ๋์ง ์๋๋ค.
๋ง์ฝ Vanilla JavaScript๋ก codingํ๋ค๋ฉด ๋ค์๊ณผ ๊ฐ์ด Dom update ์์
์ ํด์ฃผ์ด์ผ ์ํ๋ ๊ฒฐ๊ณผ๊ฐ ๋์จ๋ค.
ID๊ฐ name์ธ element์ text (innerText
) ๋ฅผ name
์ผ๋ก ๋ฐ๊ฟ์ฃผ๋ code
//Dom update code ์
๋ ฅ
let name = "Mike";
function changeName() {
name = name === "Mike" ? "Jane" : "Mike";
consoel.log(name);
document.getElementById("name").innerText = name;
}
return (
<div>
<h2 id="name">{name}</h2>
<button onClick={changeName}>Change</button>
</div>
);
์ฌ๊ธฐ์์์ name์ ๋ณ์์ผ ๋ฟ ์ด React๊ฐ ๊ด๋ฆฌํ๋ state๊ฐ ์๋๋ค.
๊ทธ๋์ ๊ฐ์ด ๋ฐ๋์ด๋ React๊ฐ ๋ณ๊ฒฝ๋ ์ฌ์ค์ ๋ชจ๋ฅด๊ธฐ ๋๋ฌธ์ UI๋ฅผ updateํด์ฃผ์ง ์๋๋ค.
์ด๋ state๋ก ๋ฐ๊พธ์ด์ค ์ ์๋ ๊ฒ React Hooks์ useState์ด๋ค.
React Hooks๋ React 16.8๋ถํฐ ์ฌ์ฉํ ์ ์๋๋ฐ, UI component๋ง ํจ์ํ์ผ๋ก ํํํ๋ ์ด์ ๊ณผ ๋ฌ๋ฆฌ, ๋ชจ๋ component๋ฅผ ํจ์ํ์ผ๋ก ๋ง๋ค ์ ์๊ฒ ๋์๋ค.
์ฆ Hooks์์๋ state์ lifecycle์ ๊ด๋ฆฌํ ์ ์๋ค.
๊ฐ๋ฐ์๊ฐ ์์ ๋ง์ custom Hooks๋ฅผ ๋ง๋ค ์๋ ์๋ค.
์ํ ๊ฐ (state) ๊ด๋ฆฌ๋ฅผ ์ํด Hooks์์ ์ฌ์ฉํ๋ค.
import๋ฅผ ํ๊ณ ์ฌ์ฉํด์ผ ํ๋ค.
useState๋ ๋ฐฐ์ด์ ๋ฐํํ๋ค.
๋ฐฐ์ด์ ์ฒซ ๋ฒ์งธ ๊ฐ์ state์ธ๋ฐ, ์ผ์ข
์ ๋ณ์๋ช
์ด๋ผ๊ณ ์๊ฐํ๋ฉด ๋๋ค.
๋ ๋ฒ์งธ ๊ฐ์ state๋ฅผ ๋ณ๊ฒฝํด ์ฃผ๋ ํจ์์ด๋ค.
setName ํจ์๊ฐ ํธ์ถ๋ผ์ name์ด ๋ฐ๋๋ฉด React๋ ํด๋น component๋ฅผ ๋ค์ renderingํ๋ค.
useState ๊ดํธ ์์ ์ด๊ธฐ ๊ฐ์ด ๋ค์ด๊ฐ๋ฉด ๋๋ค.
import { useState } from "react";
export default function Hello() {
const [name, setName] = useState("Mike"); // ๋ฐฐ์ด ๊ตฌ์กฐ๋ถํด
function changeName() {
const newName = name === "Mike" ? "Jane" : "Mike";
setName(newName);
}
return(
<div>
<h2 id="name">{name}</h2>
<button onClick={changeName}>Change</button>
๊ฐ์ component๋ฅผ ์ฌ๋ฌ ๊ฐ ์ฌ์ฉํ๋๋ผ๋ state๊ฐ ๊ฐ๊ฐ ๊ด๋ฆฌ๋๋ฉฐ, ๋ค๋ฅธ state์ ์ํฅ์ ๋ฏธ์น์ง ์๋๋ค.
ex. <Hello />
๋ฅผ ์ฌ๋ฌ ๊ฐ ์ฌ์ฉํ๋ ์ํฉ์์ ๊ฐ event๊ฐ ํด๋นํ๋ button์ ์ํด์๋ง ์คํ๋จ
props๋ properties์ ์ฝ์๋ก์ ์์ฑ ๊ฐ์ด๋ค.
์๋์ code๋ App.js๊ฐ Hello.js๋ผ๋ component๋ฅผ ์ธ ๋ฒ ์ฌ์ฉํ ๊ฒ์ด๋ค.
import "./App.css";
import Hello from "./component/Hello";
function App() {
return (
<div className="App">
<Hello />
<Hello />
<Hello />
</div>
);
}
export default App;
์ฌ๊ธฐ์์ ๋ง์ฝ <Hello />
์ ํจ์๋ฅผ ์
๋ ฅํ๋ฉด Hello.js ํจ์๋ก ์
๋ ฅํ ๊ฐ์ด ์ ๋ฌ๋๋ค.
import "./App.css";
import Hello from "./component/Hello";
function App() {
return (
<div className="App">
<Hello age={10}/>
<Hello age={20}/>
<Hello age={30}/>
</div>
);
}
export default App;
Hello.js์์ export default function Hello() {
๋ถ๋ถ์ export default function Hello(props) {
๋ก ์์ ํด์ผ App.js์ ์๋ {age}
๊ฐ์ ๋ฐ์ ์ ์๋ค.
import { useState } from "react";
export default function Hello(props) {
const [name, setName] = useState("Mike");
return(
<div>
<h2 id="name">{name}({props.age})</h2>
<button onClick={() => {
setName(name === "Mike" ? "Jane" : "Mike");
}}
>Change
</button>
</div>
์ด ์ํ์์๋ Hello.js๊ฐ {age}
๋ฅผ App.js๋ก๋ถํฐ ๋ฐ์ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ props์ธ Hello.js์์๋ {age}
๋ฅผ ์์ ํ ์ ์๋ค. (Read Only) Hello.js์์ age๋ฅผ ์์ ํ๋ ค๋ฉด ์๋กญ๊ฒ state๋ฅผ ์ค์ ํด ์ฃผ์ด์ผ ํ๋ค. ex. const [age, setAge] = useState(props.age);
map()
์ ๋ฐฐ์ด์ ๋ฐ์์ ๋ ๋ค๋ฅธ ๋ฐฐ์ด์ ๋ฐํํ๋ค.
๋ฐฐ์ด ์์๋ JSX๋ก ์์ฑํ๊ณ ํ์ดํํจ์๋ก ๋ฐ๋ก return๋ฌธ์ ์์ฑํ๋ค.
import mockdata from "..db/data.json";
export default function DayList() {
return (
<ul className="list_day">
{mockdata.days.map(day => (
<li>Day {day.day}</li>
))}
</ul>
);
}
์ด๋ ๊ฐ๋ฐ์๋๊ตฌ์์ Warning: Each child in a list should have a unique "key" prop.
์ด๋ผ๋ ๊ฒฝ๊ณ ๋ฌธ์ด ๋จ๋๋ฐ, ๋ฐ๋ณต๋๋ ์์์ key๋ผ๋ ๊ณ ์ ํ ์์๋ฅผ ์
๋ ฅํ๋ผ๋ ๋ป์ด๋ค.
์ด๋ฅผ ์ํด code๋ฅผ ์ด๋ฐ ์์ผ๋ก ์์ ํ ์ ์๋ค.
import mockdata from "..db/data.json";
export default function DayList() {
return (
<ul className="list_day">
{mockdata.days.map(day => (
<li key={day.id}>Day {day.day}</li>
))}
</ul>
);
}
react-router-dom
์ ์ค์นํ ํ App.js์ ๋ค์๊ณผ ๊ฐ์ด ์์ฑํ๋ค.
import { BrowserRouter, Route, Switch } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<div className="App">
<Header />
<Switch>
<Route exact path ="/" />
<Route path="/day" />
</Switch>
</div>
</BrowserRouter>
);
}
<Switch />
๋ฐ์ ์๋ ๊ฒ์ ๊ณ ์ ๋ component์ด๊ณ , ์์ ์๋ ๊ฒ์ ๋ณ๋๋๋ค.
Route exact path ="" />
๋ก ์์ฑํ๋ฉด ์ฃผ์๊ฐ ์ ํํ ๋๋ง page๋ฅผ ๋ณด์ฌ์ค๋ค.
Route path ="/day" />
๋ก ์์ฑํ๋ฉด ์ฃผ์์ '/day'๊ฐ ์์ผ๋ฉด ์ ํํ ์ผ์นํ์ง ์๋๋ผ๋ page๋ฅผ ๋ณด์ฌ์ค๋ค.
useParams๋ฅผ ์ด์ฉํด ์ฃผ์์ฐฝ์ ์๋ ๋ฌธ์์ด์ด ์
๋ ฅ๋๋ค.
<Route path="/day/:id">
๋ผ๊ณ ์
๋ ฅํ๊ณ component์์ useParms๋ฅผ importํ๋ฉด URL์ด ๊ฐ์ด ๋ฐ๋๋ค. (${day}
๋ถ๋ถ)
import { useParams } from "react-router-dom";
export default function Day() {
const { day } = useParams();
useEffect(() => {
fetch('http://localhost:3001/words?day=${day}`)
.then(res => {
return res.json);
}) ...
HTML์์๋ <a />
tag๋ฅผ ์ฌ์ฉํ์ง๋ง, React Router๋ <Link />
tag๋ฅผ ์ฌ์ฉํ๋ค.
import๋ฅผ ํ ํ ์ฌ์ฉํด์ผ ํ๋ค. import { Link } from "react-router-dom";
<Link to="/day">Day {day.day}</Link>
์ด๋ฐ ์์ผ๋ก ์์ฑํ๋ค.
์ด๋ ๊ฒ ์์ฑํด๋ ๊ฐ๋ฐ์๋๊ตฌ Elements tab์๋ <a />
tag๋ก ํ๊ธฐ๋๋ค.
terminal์์ npm install -g json-server
์ดํ json-server --watch ./src/db/data.json --port 3001
ํ๊ณ clickํ๋ฉด ๋ด๊ฐ editor์์ ๋ง๋ mockup data๊ฐ ๋ฌ๋ค.
REST API๋ URI ์ฃผ์์ method๋ก CRUD๋ฅผ ์์ฒญํ๋ ๊ฒ์ด๋ค.
URI๋ง ๋ณด๊ณ ๋ ์ด๋ค ์์ฒญ์ธ์ง ์ง์ํ ์ ์๋ค.
ex. localhost:3002/words?day=1
์ด์ ๊น์ง ํ ์์ ์ ์๋ก๊ณ ์นจํ๋ฉด ์๋๋๋ก ๋์์์ง๋ง, ์ง๊ธ๋ถํฐ ํ๋ ์์ ์ data์ ๋ฐ์๋ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ ์๋ก๊ณ ์นจ์ ํด๋ ์๋๋๋ก ๋์๊ฐ์ง ์๋๋ค.
useState์ ๋ง์ฐฌ๊ฐ์ง๋ก importํด์ผ ํ๋ค. import { useEffect, useState } from "react";
์ํ ๊ฐ์ด ๋ฐ๋์์ ๋ ๋์ํ๋ ํจ์๋ฅผ ์์ฑํ ์ ์๋ค.
useEffect์ ์ฒซ ๋ฒ์งธ ๋งค๊ฐ๋ณ์๋ก ํจ์๋ฅผ ๋ฃ๋๋ฐ, ์ด ํจ์๊ฐ ํธ์ถ๋๋ timing์ rendering ๊ฒฐ๊ณผ๊ฐ ์ค์ DOM์ ๋ฐ์๋ ์งํ์ด๋ฉฐ component๊ฐ ์ฌ๋ผ์ง๊ธฐ ์ง์ ์๋ ๋ง์ง๋ง์ผ๋ก ํธ์ถ๋๋ค.
useEffect์ ๋ ๋ฒ์งธ ๋งค๊ฐ๋ณ์๋ก ์์กด์ฑ๋ฐฐ์ด์ ๋ฃ๋๋ฐ, ์์กด์ฑ๋ฐฐ์ด์ ๋ฃ์ง ์์ผ๋ฉด ํด๋น ํจ์๊ฐ ๋ค๋ฅธ event๊ฐ ์งํ๋ ๋๋ ์ค์๋๊ธฐ ๋๋ฌธ์ด๋ค.
์์กด์ฑ๋ฐฐ์ด์ ์๋ํ๋ ํจ์๋ช
์ ๋ฃ์ด ๋ค๋ฅธ ์ด๋ฒคํธ ์งํ ๋ ์ด ํจ์๊ฐ ์คํ๋์ง ์๊ฒ ํด์ฃผ์ด์ผ ๋์์ ๋ฌด๋ฆฌ๊ฐ ์๋ค.
useEFfect๋ rendering ํ API๋ฅผ ํธ์ถํ ๋ ์ฌ์ฉํ๋๋ฐ, ์ด๋์๋ ์์กด์ฑ๋ฐฐ์ด์ ๋น ๋ฐฐ์ด๋ก ๋น์๋๋ค.
์ํ ๊ฐ๊ณผ ๋ฌด๊ดํ๊ฒ rendering ์งํ ๋ฑ ํ ๋ฒ๋ง ์คํ๋๋ ์์ ์ ๋น ๋ฐฐ์ด๋ก ์์ฑํ๋ค.
from Nomad Coders
react hooks๋ functional component์ state๋ฅผ ๊ฐ์ง ์ ์๊ฒ ํด์ค
(์๋๋ class component๋ง ๊ฐ์ง ์ ์์์)
react hooks์ ์ฌ์ฉํ๋ฉด class component, CMD(componentDidMount), render ์ด๋ฐ ๊ฒ๋ค์ ์ ํด๋ ๋จ
๋ชจ๋ ๊ฒ์ด ํ๋์ function์ด ๋จ
๊ฒฐ๊ตญ funtional programming style์ด ๋๋ ๊ฒ
hooks์ ์์ด์ธ recompose
hooks์ ๊ณต์ ๋ฌธ์ hooks
counting with class component
- class component๊ฐ ํ์
- state ํ์
- state ์ ์ ํ์
- render ๋ค์์ผ๋ก ํจ์ค ํ์
- etc
import React, { Component } from "react"; class App extends Component { state = { count : 0 }; modify = (n) => { this.setState({ count:n }); }; render() { const { count } = this.state; return ( <> <div>{count}</div> <button onClick{() => this.modify(count + 1)}>Increment</button> </>; ); } } export default App;
counting with hooks
- ๋ ๊ฐ๊ฒฐํจ
- state๋ฅผ ๋ค ๋ฐ๋ก ๋ง๋ค์ง ์์๋ ๋จ
import React, { Component, useState } from "react"; const App = () => { const [count, setCount] = useState(0); return ( <> {count} <button onClick={() => setCount(count + 1)}>Increment</button> </> ); }; export default App;
const [count(์ฒซ ๋ฒ์งธ ์์), setCount(๋ ๋ฒ์งธ ์์)]
class component์์๋ react state management๋ฅผ ์ผ์ผ์ด ์ ์ด์ผ ํ๋๋ฐ
useState๋ react state management ๋ฐ์ผ๋ก ๋ค์ด๊ฐ hook์ ๋ก๊ธฐ๋ ๊ฑฐ์ผ(?)
์ถ๊ฐ๋ก input์ ๋ง๋ค์ด ๋ณด๋ฉด
import React, { Component, useState } from "react"; const App = () => { const [count, setCount] = useState(0); const [email, setEmail] = useState(""); const undateEmail = e => { const { target: { value } } = e; setEmail(value); }; return ( <> {count} <button onClick={() => setCount(count + 1)}>Increment</button> <input placeholder="Email" value={email} onChange={updateEmail} /> </> ); }; export default App;
componentDidMount๋ componentDidUpdate์ ๋น์ทํจ (์ด๊ฒ๋ค์ ์ฃผ๋ก API ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ ๋ ์ฌ์ฉํจ)
https://www.notion.so/wecode/React-Hooks-b07fdc9d5d82470492a0b4fa8e800c41
intro
ํจ์ ์ปดํผ๋ํธ๋ ํ
์ค๋ ์๋ก ๋ค๋ฅธ ๊ฑฐ์
ํด๋์คํ ์ปดํฌ๋ํธ์ ํจ์ ์ปดํฌ๋ํธ์ ํน์ง๊ณผ hooks์ ํ์์ฑ ์ดํด
hook๋ 2018๋
์ ์ฒซ ๊ณต๊ฐ
hook์ ๊ทธ๋ฅ ํจ์์ผ
useState hook์ ์ฌ์ฉํด React์ ์ปดํฌ๋ํธ์ ์ํ๋ฅผ ๊ด๋ฆฌ
useEffect hook์ ์ฌ์ฉํด React ์ปดํฌ๋ํธ์ ๋ผ์ดํ์ฌ์ดํด์ ๊ด๋ฆฌ
๊ธฐ์กด ๊ฐ๋ ์ ๋ค๋ฅธ ํํ์ผ ๋ฟ
(์ฐธ๊ณ ) Dan Abramov๋ Create React ๋ง๋ ์ฌ๋์ด๊ณ , Facebook ๊ฐ๋ฐ์์ธ๋ฐ useEffect์ ๋ํด ์์ฃผ ์์ธํ ์ค๋ช ํด ๋์์
ํจ์ ์ปดํฌ๋ํธ๋ state๋ lifecycle์ ์ฌ์ฉํ ์ ์์
hooks์ ๋ฑ์ฅ์ผ๋ก ํจ์ ์ปดํฌ๋ํธ๋ state์ lifecycle์ ์ฌ์ฉํ ์ ์๊ฒ ๋จ
hooks๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด ํจ์ ์ปดํฌ๋ํธ๋ก ์จ์ผ ํจ
ํด๋์ค ์ปดํฌ๋ํธ๋ ํจ์ ์ปดํฌ๋ํธ ํธํ๋จ
์ปดํฌ๋ํธ๋ ๋ผ์ฐํธ ๊ธฐ๋ฅ ์์ง๋ง withRoute๋ก ์ฐ์์, ์ด๊ฒ์ฒ๋ผ
ํ ์ปดํฌ๋ํธ์ lifecycle ํ๋๋ง ๋ค์ด์ฌ ์ ์์ผ๋๊น ์กฐ๊ฑด๋ฌธ ๊ฐ์ ๊ฒ๋ค์ ํ๋์ method์ ๋ค ๋ฃ์ด์ผ ํ์ด
ํ์ง๋ง useEffect๋ฅผ ์ฌ์ฉํ๋ฉด...
ํ์
๊ธฐ์น์ useState...
์ด์ useEffect
useEffect๋ ํจ์
๋ค์ ์๊ดํธ ์์
useEffect(๋์ function, ํ์ด๋ฐ Array)
๋ฅผ ์๋์ ๋น์ ํ๋ฉด
window.addEventListener("click", () => {
console.log("click!")
})
window.addEventListener(์ด๋ฒคํธ ์ข ๋ฅ(ํ์ด๋ฐ), ๋์ function)
useEffect(() => {
console.log("trigger!!")
})