ํ ๋์ ๊ฑฐ์ 7์๊ฐ ๋๊ฒ ToDoList ํ์ดํ๋ก๊ทธ๋๋ฐ์ ์งํํ๋ค.
์บ๋ฆฐ๋์ ํฌ๋ ๋ฆฌ์คํธ ์ถ๊ฐ ๊ธฐ๋ฅ๊น์ง ๊ตฌํ ์๋ฃ! ์ฐ์ ์ ํ์ดํ๋ก๊ทธ๋๋ฐ์ผ๋ก ๊ธฐ๋ฅ ๊ตฌํ์ ํ๊ณ , css style ์ ์ฉ์ figma๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๊ฐ์ ํํธ๋ฅผ ๋๋ ๊ธ์์ผ์ ์งํํ๊ธฐ๋ก ๊ฒฐ์ ํ๋ค.
React๊ฐย ์ฑ๋ฅ์ ํฅ์์ํค๊ธฐ ์ํด ์ฌ๋ฌ ๊ฐ์ state ์ ๋ฐ์ดํธ๋ฅผ ํ๋์ ๋ฆฌ๋ ๋๋ง์ผ๋ก ๋ฌถ๋ ๊ฒ
์๋ฅผ ๋ค์ด, ํ๋์ ํด๋ฆญ ์ด๋ฒคํธ ์์ ๋ ๊ฐ์ state ์ ๋ฐ์ดํธ๋ฅผ ๊ฐ์ง๊ณ ์๋ค๋ฉด, React๋ ์ธ์ ๋ ์ด ์์ ์ batch ์ ๋ฐ์ดํธํ์ฌ ํ๋์ ๋ฆฌ๋ ๋๋ง์ผ๋ก ๋ง๋ญ๋๋ค.ย ์ด ๊ณผ์ ์ ๋ถํ์ํ ๋ฆฌ๋ ๋๋ง์ ์ค์ด๊ณ , ์ปดํฌ๋ํธ๊ฐ โ๋ฐ๋ง ์๋ฃ๋โ state๋ฅผ ๋ ๋๋งํ๋ ๊ฒ์ ๋ฐฉ์งํฉ๋๋ค
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
function increaseCountThree() {
// ์๋์ ์์
์ ๋ชจ๋ ์ผ๊ด์ ์ผ๋ก ๋ฌถ์ฌ ์ฒ๋ฆฌ๋๋ค. ํ ๋ฒ์ ๋ฆฌ๋ ๋๋ง๋ง ๋ฐ์ํ๋ค.
setCount((prev) => prev + 1);
setCount((prev) => prev + 1);
setCount((prev) => prev + 1);
}
return (
<div>
<button onClick={increaseCountThree}>+1</button>
<p>Count : {count}</p>
</div>
);
}
export default Counter;
React 18 ์ด์ ๊น์ง๋ batch ์ ๋ฐ์ดํธ๊ฐย ๋ธ๋ผ์ฐ์ ์ด๋ฒคํธ์ ๋ด์ฅ ํ ์์๋ง ์๋ํ์์ต๋๋ค. ์ฆ, ๋น๋๊ธฐ ์์ (romise, setTimeout ๋ฑ)์ด๋ Native Event Handler ๋ฑ์์ ๋ฐ์ํ๋ state ์ ๋ฐ์ดํธ๋ batch ์ ๋ฐ์ดํธ๋์ง ์์์ต๋๋ค.ย
์ด ๊ฒฝ์ฐ์๋ ์ปดํฌ๋ํธ๊ฐ state ์ ๋ฐ์ดํธ๋ง๋ค ๋ฆฌ๋ ๋๋ง๋์ด ์ฑ๋ฅ ์ ํ์ ๋ฒ๊ทธ ๋ฐ์์ ์ํ์ด ์์์ต๋๋ค.
๋ฌธ์ ์
function App() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
function handleClick() {
fetchSomething().then(() => {
// React 17 ์ด์ ์ ๋ฒ์ ์์๋ ํด๋น ์์
์ Batching ์ฒ๋ฆฌํ์ง ์๋๋ค.
// ์๋ํ๋ฉด ํด๋น ์์
์ ์ด๋ฒคํธ๊ฐ ์ข
๋ฃ๋ ์ดํ (100ms ๋ค) ์ ์คํ๋๊ธฐ ๋๋ฌธ์ด๋ค.
setCount((c) => c + 1); // ๋ฆฌ๋ ๋๋ง ์ ๋ฐ
setFlag((f) => !f); // ๋ฆฌ๋ ๋๋ง ์ ๋ฐ
});
}
return (
<div>
<button onClick={handleClick}>Next</button>
<h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
</div>
);
}
function fetchSomething() {
return new Promise((resolve) => setTimeout(resolve, 100));
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
state update ์์ ์ด ๋น๋๊ธฐ์ ์ผ๋ก ์ฒ๋ฆฌ๋์ด Event๊ฐ ์ข ๋ฃ๋ ํ์ ์คํ๋๊ธฐ ๋๋ฌธ์, React์ Batching ์์ ์ ๊ฑธ๋ฆฌ์ง ์์ ๋ ์ฐจ๋ก ๋ฆฌ๋ ๋๋ง์ ์ ๋ฐ์์ผฐ๋ค.
React์ ๋น๊ณต์์ API
unstable_batchedUpdates()
๋ฅผ ์ฌ์ฉํด์ ๊ฐ์ ๋ฐฐ์น ํ๋ก๊ทธ๋๋ฐ์ ํ ์ ์๋ค๊ณ ํด์! (18๋ฒ์ ์ด์ ์.. ์ง๊ธ์ ์ฌ์ฉํ ํ์๊ฐ ์์)
React 18์์๋
createRoot
๋ฅผ ํตํดย Automatic Batching์ด๋ผ๋ ๊ฐ์ ๋ ๋ฒ์ ์ batch ์ ๋ฐ์ดํธ๋ฅผ ๋์ ํ์ต๋๋ค
Automatic Batching์ย ๋ชจ๋ state ์ ๋ฐ์ดํธ๋ฅผ ์ด๋์ ์๋์ง์ ์๊ด์์ด ์๋์ผ๋ก batch ์ ๋ฐ์ดํธํ๊ฒ ํด์ค๋๋ค. ์ฆ, timeout, promise, ๋ค์ดํฐ๋ธ ์ด๋ฒคํธ ํธ๋ค๋ฌ ๋ฑ ๋ชจ๋ ์ด๋ฒคํธ์์ ๋ฐ์ํ๋ state ์ ๋ฐ์ดํธ๋ React์์ ์ ๊ณตํ๋ ์ด๋ฒคํธ์ ๋์ผํ๊ฒ batch ์ ๋ฐ์ดํธํ ์ ์์ต๋๋ค.ย ์ด๋ฅผ ํตํด ๋ ๋๋ง์ ์ต์ํํ๊ณ , ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋ ๋์ ์ฑ๋ฅ์ ๊ธฐ๋ํ ์ ์์ต๋๋ค.
์ ์์ ์ฝ๋๋ฅผ ์ง๊ธ react๋ก ํ๋ฉด batch๊ฐ ์ ๋๋๊ฑธ ๋ณผ์ ์์ด์
ReactDOM.flushSync()
react-dom ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ถ๊ฐ๋ ReactDOM.flushSync()
๋ฉ์๋๋ Auto Batching ์ ๋ฌด์ํ๊ณ ์ฆ์ DOM์ ๋ ๋๋งํด์ค๋๋ค.
React ์์๋ ๊ณต์์ ์ผ๋ก ํด๋น ๋ฉ์๋์ ์ฌ์ฉ์ ์ถ์ฒํ์ง ์์ผ๋ฉฐ (de-opt case), ํ์ํ ์ํฉ์ด ์์ ๊ฒฝ์ฐ์๋ง ์ฌ์ฉํ ๊ฒ์ ๊ถ์ฅํฉ๋๋ค.
ํ์ดํ๋ก๊ทธ๋๋ฐ์ ์์ฃผ ํ๋ฃจ์ข ์ผ ํ๋ฉด์ state ๊ด๋ฆฌ์ ๋ฆฌ๋๋๋ง์ ๋ํ ์ด์๋ฅผ ๋์์์ด ๋ง์ฃผ์ณค๋ค. ์ ๋ง state๊ฐ ๋ง์์ง๋ค ๋ณด๋ ํท๊ฐ๋ฆฌ๊ณ , ๊ทธ๋ก ์ธํด ๋ถํ์ํ ๋ ๋๋ง์ด ๊ณ์ ๋ฐ์ํ๋ ๋ฌธ์ ๊ฐ ์๊ฒผ๋ค. ์ด์ ๋ํ ์ฐ๋ฆฌ์ ๊น์ ๊ณ ๋ฏผ์ ํ๊ณ ๋ ํ์ด๋ณด๊ธฐ๋ก ํ๊ณ ..
recoil, redux ๋ฑ์ ์ํ๊ด๋ฆฌ ํ๋ก๊ทธ๋จ์ ํ์์ฑ์ ๋ผ์ ๋ฆฌ๊ฒ ๋๋ผ๋ ์๊ฐ์ด์๋ค. state๊ฐ ์ฌ๊ธฐ์ ๊ธฐ ํฉ์ด์ ธ์์ผ๋ ๊ฐ๋นํ๊ธฐ๊ฐ ๋งค์ฐ ํ๋ค์๋ค.. ์ด๋ฒ weekly์ ๋์ ํด๋ณผ๊น? ์ถ์์ง๋ง, ์์ง์ contextAPI๋ก ์ถฉ๋ถํ ๊ตฌํํด๋ณด๊ณ , ๋ค์์ฃผ๋ ๋ค๋ฅธ ์ฃผ๊ฐ์ ๋ ์ด์ด์ ํ๊ฒ ๋๋ค๋ฉด ๋์ ์ ํด๋ณด๋ ๊ฑธ๋ก..!!!
์ด ์ด์ ๋๋ฌธ์ ์๊ฐ๋ณด๋ค ๊ธฐ๋ฅ๊ตฌํ์ ๋ค ๋ชปํด์ ์์ฝ๋ค.
ํ๋ก์ ํธ๋ฅผ ํจ๊ป ํ๋ค๋ณด๋ฉด ์ ๋ง ๋ฐค์ ์ธ๋ ๋ ๋งํผ ์ฌ๋ฏธ์์ด์ ์๊ฐ์ด ๊ฐ๋ ์ค ๋ชจ๋ฅด๊ฒ ๋ค. ๊ทธ๋์ ์ค๋๋ ๊ฐ์ธํ์ต์ ๋ํ ์๊ฐ์ ๋ง์ด ์์ง ๋ชปํ ๊ฒ ๊ฐ์์ ์์ฌ์ ๋ค. ๊ฐ์ธ์ ์ฑ์ฅ์ ์ด ๋ ๋ชจ๋ ๋งค์ฐ ์ค์ํ๊ธฐ ๋๋ฌธ์, ์ด ์ ์ ํ ๋๋ง์ ํธ๋ ์ด๋์คํ๋ฅผ ์ฐพ์์ผํ ๊ฒ๊ฐ๋ค.