๊ณ ๊ธ ๋ณ๊ฒฝ ๊ฐ๋ฅ ๋ฐ์ดํฐ ์ฒ๋ฆฌ๋ฅผ ์ํ React์ experimental_useMutableSource ํ ์ ํ์ํฉ๋๋ค. ์ต์ ํ๋ ์ฑ๋ฅ์ ์ํ ์ด์ , ๋จ์ ๋ฐ ์ค์ ์ ์ฉ ์ฌ๋ก๋ฅผ ์ดํดํฉ๋๋ค.
React experimental_useMutableSource: ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ ๊ด๋ฆฌ์ ๋ํ ์ฌ์ธต ๋ถ์
React๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๊ตฌ์ถํ๊ธฐ ์ํ ์ ์ธ์ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก์ ์ผ๋ฐ์ ์ผ๋ก ๋ถ๋ณ์ฑ์ ์ฅ๋ คํฉ๋๋ค. ๊ทธ๋ฌ๋ ํน์ ์๋๋ฆฌ์ค์์๋ ํนํ ์ธ๋ถ ์์คํ
๋๋ ๋ณต์กํ ์ํ ๊ด๋ฆฌ๋ฅผ ์ฒ๋ฆฌํ ๋ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ๊ฐ ์ ๋ฆฌํฉ๋๋ค. React์ ์คํ์ API์ ์ผ๋ถ์ธ experimental_useMutableSource ํ
์ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ ์์ค๋ฅผ React ์ปดํฌ๋ํธ์ ํจ์จ์ ์ผ๋ก ํตํฉํ๋ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํฉ๋๋ค. ์ด ๊ฒ์๋ฌผ์์๋ experimental_useMutableSource์ ๋ณต์ก์ฑ์ ์์ธํ ์ดํด๋ณด๊ณ , ์ฌ์ฉ ์ฌ๋ก, ์ด์ , ๋จ์ ๋ฐ ํจ๊ณผ์ ์ธ ๊ตฌํ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ํ์ํฉ๋๋ค.
React์์ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ ์ดํด
experimental_useMutableSource์ ์ธ๋ถ ์ฌํญ์ ์ดํด๋ณด๊ธฐ ์ ์ React ์ํ๊ณ ๋ด์์ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ์ ์ปจํ
์คํธ๋ฅผ ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
React์ ๋ถ๋ณ์ฑ ํจ๋ฌ๋ค์
React์ ํต์ฌ ์์น์ธ ๋ถ๋ณ์ฑ์ ๋ฐ์ดํฐ๋ฅผ ์์ฑ ํ ์ง์ ์์ ํด์๋ ์ ๋๋ค๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค. ๋์ ์ํ๋ ์์ ์ฌํญ์ผ๋ก ๋ฐ์ดํฐ์ ์ ๋ณต์ฌ๋ณธ์ ๋ง๋ค์ด ๋ณ๊ฒฝํฉ๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ๋ค์๊ณผ ๊ฐ์ ์ฌ๋ฌ ๊ฐ์ง ์ด์ ์ ์ ๊ณตํฉ๋๋ค.
- ์์ธก ๊ฐ๋ฅ์ฑ: ๋ถ๋ณ์ฑ์ ์ํ ๋ณ๊ฒฝ์ ์ถ๋ก ํ๊ณ ๋ฌธ์ ๋ฅผ ๋๋ฒ๊น ํ๊ธฐ ์ฝ๊ฒ ๋ง๋ญ๋๋ค. ๋ฐ์ดํฐ๊ฐ ๋ช ์์ ์ผ๋ก ์์ ๋์ง ์๋ ํ ์ผ๊ด์ฑ์ ์ ์งํ๊ธฐ ๋๋ฌธ์ ๋๋ค.
- ์ฑ๋ฅ ์ต์ ํ: React๋ ๋ฐ์ดํฐ์ ๋ํ ์ฐธ์กฐ๋ฅผ ๋น๊ตํ์ฌ ๋ณ๊ฒฝ ์ฌํญ์ ํจ์จ์ ์ผ๋ก ๊ฐ์งํ์ฌ ๋น์ฉ์ด ๋ง์ด ๋๋ ๊น์ ๋น๊ต๋ฅผ ํผํ ์ ์์ต๋๋ค.
- ๊ฐ์ํ๋ ์ํ ๊ด๋ฆฌ: ๋ถ๋ณ ๋ฐ์ดํฐ ๊ตฌ์กฐ๋ Redux ๋ฐ Zustand์ ๊ฐ์ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ํํ๊ฒ ์๋ํ์ฌ ์์ธก ๊ฐ๋ฅํ ์ํ ์ ๋ฐ์ดํธ๋ฅผ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ๊ฐ ์๋ฏธ๊ฐ ์๋ ๊ฒฝ์ฐ
๋ถ๋ณ์ฑ์ ์ด์ ์๋ ๋ถ๊ตฌํ๊ณ ํน์ ์๋๋ฆฌ์ค์์๋ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ ์ฌ์ฉ์ ์ ๋นํํฉ๋๋ค.
- ์ธ๋ถ ๋ฐ์ดํฐ ์์ค: ๋ฐ์ดํฐ๋ฒ ์ด์ค ๋๋ WebSocket ์ฐ๊ฒฐ๊ณผ ๊ฐ์ ์ธ๋ถ ์์คํ ๊ณผ์ ์ํธ ์์ฉ์ ์ข ์ข ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ์ ๋ํ ์ ๋ฐ์ดํธ ์์ ๊ณผ ๊ด๋ จ๋ฉ๋๋ค. ์๋ฅผ ๋ค์ด ๊ธ์ต ์ ํ๋ฆฌ์ผ์ด์ ์ ์์ฃผ ์ ๋ฐ์ดํธ๋๋ ์ค์๊ฐ ์ฃผ๊ฐ๋ฅผ ๋ฐ์ ์ ์์ต๋๋ค.
- ์ฑ๋ฅ์ด ์ค์ํ ์ ํ๋ฆฌ์ผ์ด์ : ๊ฒฝ์ฐ์ ๋ฐ๋ผ ๋ฐ์ดํฐ์ ์ ๋ณต์ฌ๋ณธ์ ๋ง๋๋ ์ค๋ฒํค๋๊ฐ ๊ธ์ง๋ ์ ์์ต๋๋ค. ํนํ ๋๊ท๋ชจ ๋ฐ์ดํฐ ์ธํธ ๋๋ ๋น๋ฒํ ์ ๋ฐ์ดํธ๋ฅผ ์ฒ๋ฆฌํ ๋ ๊ทธ๋ ์ต๋๋ค. ๊ฒ์ ๋ฐ ๋ฐ์ดํฐ ์๊ฐํ ๋๊ตฌ๋ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ๊ฐ ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์๋ ์์ ๋๋ค.
- ๋ ๊ฑฐ์ ์ฝ๋์์ ํตํฉ: ๊ธฐ์กด ์ฝ๋๋ฒ ์ด์ค๋ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ์ ํฌ๊ฒ ์์กดํ ์ ์์ผ๋ฏ๋ก ์๋นํ ๋ฆฌํฉํ ๋ง ์์ด ๋ถ๋ณ์ฑ์ ์ฑํํ๊ธฐ๊ฐ ์ด๋ ต์ต๋๋ค.
experimental_useMutableSource ์๊ฐ
experimental_useMutableSource ํ
์ React ์ปดํฌ๋ํธ๋ฅผ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ ์์ค์ ๊ตฌ๋
ํ์ฌ ๊ธฐ๋ณธ ๋ฐ์ดํฐ๊ฐ ๋ณ๊ฒฝ๋ ๋ ํจ์จ์ ์ผ๋ก ์
๋ฐ์ดํธํ ์ ์๋๋ก ํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. ์ด ํ
์ React์ ์คํ์ API์ ์ผ๋ถ์ด๋ฏ๋ก ๋ณ๊ฒฝ๋ ์ ์์ผ๋ฉฐ ํ๋ก๋์
ํ๊ฒฝ์์ ์ฌ์ฉํ ๋๋ ์ฃผ์ํด์ผ ํฉ๋๋ค.
์๋ ๋ฐฉ์
experimental_useMutableSource๋ ๋ ๊ฐ์ ์ธ์๋ฅผ ์ฌ์ฉํฉ๋๋ค.
- source: ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ์ ๋ํ ์ก์ธ์ค๋ฅผ ์ ๊ณตํ๋ ๊ฐ์ฒด์ ๋๋ค. ์ด ๊ฐ์ฒด์๋ ๋ ๊ฐ์ง ๋ฉ์๋๊ฐ ์์ด์ผ ํฉ๋๋ค.
getVersion():๋ฐ์ดํฐ์ ํ์ฌ ๋ฒ์ ์ ๋ํ๋ด๋ ๊ฐ์ ๋ฐํํฉ๋๋ค. React๋ ์ด ๊ฐ์ ์ฌ์ฉํ์ฌ ๋ฐ์ดํฐ๊ฐ ๋ณ๊ฒฝ๋์๋์ง ์ฌ๋ถ๋ฅผ ๊ฒฐ์ ํฉ๋๋ค.subscribe(callback):๋ฐ์ดํฐ๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง๋ค ํธ์ถ๋ ์ฝ๋ฐฑ ํจ์๋ฅผ ๋ฑ๋กํฉ๋๋ค. ์ฝ๋ฐฑ ํจ์๋ ์ปดํฌ๋ํธ์์forceUpdate๋ฅผ ํธ์ถํ์ฌ ๋ค์ ๋ ๋๋ง์ ํธ๋ฆฌ๊ฑฐํด์ผ ํฉ๋๋ค.- getSnapshot: ํ์ฌ ๋ฐ์ดํฐ์ ์ค๋ ์ท์ ๋ฐํํ๋ ํจ์์ ๋๋ค. ์ด ํจ์๋ ๋ ๋๋ง ์ค์ ํธ์ถ๋๋ฏ๋ก ์์ํ๊ณ ๋๊ธฐ์ ์ด์ด์ผ ํฉ๋๋ค.
๊ตฌํ ์
experimental_useMutableSource๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ํ ๊ธฐ๋ณธ ์์ ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
import { experimental_useMutableSource as useMutableSource } from 'react';
import { useState, useRef, useEffect } from 'react';
// Mutable data source
const createMutableSource = (initialValue) => {
let value = initialValue;
let version = 0;
let listeners = [];
const source = {
getVersion() {
return version;
},
subscribe(listener) {
listeners.push(listener);
return () => {
listeners = listeners.filter((l) => l !== listener);
};
},
setValue(newValue) {
value = newValue;
version++;
listeners.forEach((listener) => listener());
},
getValue() {
return value;
},
};
return source;
};
function MyComponent() {
const [mySource, setMySource] = useState(() => createMutableSource("Initial Value"));
const snapshot = useMutableSource(mySource, (source) => source.getValue());
const handleChange = () => {
mySource.setValue(Date.now().toString());
};
return (
Current Value: {snapshot}
);
}
export default MyComponent;
์ด ์์ ์์:
createMutableSource๋getValue,setValue,getVersion๋ฐsubscribe๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ๋จํ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ ์์ค๋ฅผ ๋ง๋ญ๋๋ค.useMutableSource๋MyComponent๋ฅผmySource์ ๊ตฌ๋ ํฉ๋๋ค.snapshot๋ณ์๋ ๋ฐ์ดํฐ์ ํ์ฌ ๊ฐ์ ๋ณด์ ํ๋ฉฐ, ๋ฐ์ดํฐ๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง๋ค ์ ๋ฐ์ดํธ๋ฉ๋๋ค.handleChangeํจ์๋ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ๋ฅผ ์์ ํ์ฌ ์ปดํฌ๋ํธ์ ๋ค์ ๋ ๋๋ง์ ํธ๋ฆฌ๊ฑฐํฉ๋๋ค.
์ฌ์ฉ ์ฌ๋ก ๋ฐ ์
experimental_useMutableSource๋ ์ธ๋ถ ์์คํ
๊ณผ ํตํฉํ๊ฑฐ๋ ๋ณต์กํ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ์ํ๋ฅผ ๊ด๋ฆฌํด์ผ ํ๋ ์๋๋ฆฌ์ค์์ ํนํ ์ ์ฉํฉ๋๋ค. ๋ช ๊ฐ์ง ๊ตฌ์ฒด์ ์ธ ์๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
์ค์๊ฐ ๋ฐ์ดํฐ ์๊ฐํ
์ค์๊ฐ ์ฃผ๊ฐ๋ฅผ ํ์ํ๋ ์ฃผ์ ์์ฅ ๋์๋ณด๋๋ฅผ ๊ณ ๋ คํ์ญ์์ค. ๋ฐ์ดํฐ๋ ์ธ๋ถ ๋ฐ์ดํฐ ํผ๋์ ์ํด ์ง์์ ์ผ๋ก ์
๋ฐ์ดํธ๋ฉ๋๋ค. experimental_useMutableSource๋ฅผ ์ฌ์ฉํ๋ฉด ๋ถํ์ํ ๋ค์ ๋ ๋๋ง์ ๋ฐ์์ํค์ง ์๊ณ ๋์๋ณด๋๋ฅผ ํจ์จ์ ์ผ๋ก ์
๋ฐ์ดํธํ ์ ์์ต๋๋ค.
import { experimental_useMutableSource as useMutableSource } from 'react';
import { useEffect, useRef, useState } from 'react';
// Assume this function fetches stock data from an external API
const fetchStockData = async (symbol) => {
//Replace with actual api call
await new Promise((resolve) => setTimeout(resolve, 500))
return {price: Math.random()*100, timestamp: Date.now()};
};
// Mutable data source
const createStockSource = (symbol) => {
let stockData = {price:0, timestamp:0};
let version = 0;
let listeners = [];
let fetching = false;
const updateStockData = async () => {
if (fetching) return;
fetching = true;
try{
const newData = await fetchStockData(symbol);
stockData = newData;
version++;
listeners.forEach((listener) => listener());
} catch (error) {
console.error("Failed to update stock data", error);
} finally{
fetching = false;
}
}
const source = {
getVersion() {
return version;
},
subscribe(listener) {
listeners.push(listener);
return () => {
listeners = listeners.filter((l) => l !== listener);
};
},
getStockData() {
return stockData;
},
updateStockData,
};
return source;
};
function StockDashboard({ symbol }) {
const [stockSource, setStockSource] = useState(() => createStockSource(symbol));
useEffect(() => {
stockSource.updateStockData()
const intervalId = setInterval(stockSource.updateStockData, 2000);
return () => clearInterval(intervalId);
}, [symbol, stockSource]);
const stockData = useMutableSource(stockSource, (source) => source.getStockData());
return (
{symbol}
Price: {stockData.price}
Last Updated: {new Date(stockData.timestamp).toLocaleTimeString()}
);
}
export default StockDashboard;
์ด ์์ ์์:
fetchStockDataํจ์๋ ์ธ๋ถ API์์ ์ฃผ์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ต๋๋ค. ์ด๋ 0.5์ด ๋์ ๋๊ธฐํ๋ ๋น๋๊ธฐ ์ฝ์์ ์ํด ์๋ฎฌ๋ ์ด์ ๋ฉ๋๋ค.createStockSource๋ ์ฃผ๊ฐ๋ฅผ ๋ณด์ ํ๋ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ ์์ค๋ฅผ ๋ง๋ญ๋๋ค.setInterval์ ์ฌ์ฉํ์ฌ 2์ด๋ง๋ค ์ ๋ฐ์ดํธ๋ฉ๋๋ค.StockDashboard์ปดํฌ๋ํธ๋experimental_useMutableSource๋ฅผ ์ฌ์ฉํ์ฌ ์ฃผ์ ๋ฐ์ดํฐ ์์ค๋ฅผ ๊ตฌ๋ ํ๊ณ ๊ฐ๊ฒฉ์ด ๋ณ๊ฒฝ๋ ๋๋ง๋ค ๋์คํ๋ ์ด๋ฅผ ์ ๋ฐ์ดํธํฉ๋๋ค.
๊ฒ์ ๊ฐ๋ฐ
๊ฒ์ ๊ฐ๋ฐ์์๋ ๊ฒ์ ์ํ๋ฅผ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํ๋ ๊ฒ์ด ์ฑ๋ฅ์ ์ค์ํฉ๋๋ค. experimental_useMutableSource๋ฅผ ์ฌ์ฉํ๋ฉด ์ ์ฒด ๊ฒ์ ์ฅ๋ฉด์ ๋ถํ์ํ ๋ค์ ๋ ๋๋ง์ ๋ฐ์์ํค์ง ์๊ณ ๊ฒ์ ์ํฐํฐ(์: ํ๋ ์ด์ด ์์น, ์ ์์น)๋ฅผ ํจ์จ์ ์ผ๋ก ์
๋ฐ์ดํธํ ์ ์์ต๋๋ค.
import { experimental_useMutableSource as useMutableSource } from 'react';
import { useEffect, useRef, useState } from 'react';
// Mutable data source for player position
const createPlayerSource = () => {
let playerPosition = {x: 0, y: 0};
let version = 0;
let listeners = [];
const movePlayer = (dx, dy) => {
playerPosition = {x: playerPosition.x + dx, y: playerPosition.y + dy};
version++;
listeners.forEach(listener => listener());
};
const getPlayerPosition = () => playerPosition;
const source = {
getVersion: () => version,
subscribe: (listener) => {
listeners.push(listener);
return () => {
listeners = listeners.filter(l => l !== listener);
};
},
movePlayer,
getPlayerPosition,
};
return source;
};
function GameComponent() {
const [playerSource, setPlayerSource] = useState(() => createPlayerSource());
const playerPosition = useMutableSource(playerSource, source => source.getPlayerPosition());
const handleMove = (dx, dy) => {
playerSource.movePlayer(dx, dy);
};
useEffect(() => {
const handleKeyDown = (e) => {
switch (e.key) {
case 'ArrowUp': handleMove(0, -1); break;
case 'ArrowDown': handleMove(0, 1); break;
case 'ArrowLeft': handleMove(-1, 0); break;
case 'ArrowRight': handleMove(1, 0); break;
default: break;
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [playerSource]);
return (
Player Position: X = {playerPosition.x}, Y = {playerPosition.y}
{/* Game rendering logic here */}
);
}
export default GameComponent;
์ด ์์ ์์:
createPlayerSource๋ ํ๋ ์ด์ด์ ์์น๋ฅผ ์ ์ฅํ๋ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ ์์ค๋ฅผ ๋ง๋ญ๋๋ค.GameComponent๋experimental_useMutableSource๋ฅผ ์ฌ์ฉํ์ฌ ํ๋ ์ด์ด์ ์์น๋ฅผ ๊ตฌ๋ ํ๊ณ ๋ณ๊ฒฝ๋ ๋๋ง๋ค ๋์คํ๋ ์ด๋ฅผ ์ ๋ฐ์ดํธํฉ๋๋ค.handleMoveํจ์๋ ํ๋ ์ด์ด์ ์์น๋ฅผ ์ ๋ฐ์ดํธํ์ฌ ์ปดํฌ๋ํธ์ ๋ค์ ๋ ๋๋ง์ ํธ๋ฆฌ๊ฑฐํฉ๋๋ค.
ํ์ ๋ฌธ์ ํธ์ง
ํ์
๋ฌธ์ ํธ์ง์ ๊ฒฝ์ฐ ํ ์ฌ์ฉ์๊ฐ ๋ณ๊ฒฝํ ๋ด์ฉ์ ๋ค๋ฅธ ์ฌ์ฉ์์๊ฒ ์ค์๊ฐ์ผ๋ก ๋ฐ์๋์ด์ผ ํฉ๋๋ค. ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๊ณต์ ๋ฌธ์ ๊ฐ์ฒด์ experimental_useMutableSource๋ฅผ ์ฌ์ฉํ๋ฉด ํจ์จ์ ์ด๊ณ ์๋ต์ฑ์ด ๋ฐ์ด๋ ์
๋ฐ์ดํธ๊ฐ ๋ณด์ฅ๋ฉ๋๋ค.
experimental_useMutableSource์ ์ด์
experimental_useMutableSource๋ฅผ ์ฌ์ฉํ๋ฉด ๋ค์๊ณผ ๊ฐ์ ์ฌ๋ฌ ๊ฐ์ง ์ด์ ์ด ์์ต๋๋ค.
- ์ฑ๋ฅ ์ต์ ํ: ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ ์์ค๋ฅผ ๊ตฌ๋ ํ๋ฉด ์ปดํฌ๋ํธ๋ ๊ธฐ๋ณธ ๋ฐ์ดํฐ๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง ๋ค์ ๋ ๋๋ง๋๋ฏ๋ก ๋ถํ์ํ ๋ ๋๋ง์ ์ค์ด๊ณ ์ฑ๋ฅ์ ํฅ์์ํต๋๋ค.
- ์ํํ ํตํฉ:
experimental_useMutableSource๋ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ๋ฅผ ์ ๊ณตํ๋ ์ธ๋ถ ์์คํ ๊ณผ ํตํฉํ๋ ๊นจ๋ํ๊ณ ํจ์จ์ ์ธ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. - ๊ฐ์ํ๋ ์ํ ๊ด๋ฆฌ: ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ ๊ด๋ฆฌ๋ฅผ ์ธ๋ถ ์์ค๋ก ์คํ๋ก๋ํ๋ฉด ์ปดํฌ๋ํธ์ ์ํ ๋ ผ๋ฆฌ๋ฅผ ๊ฐ์ํํ๊ณ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ณต์ก์ฑ์ ์ค์ผ ์ ์์ต๋๋ค.
๋จ์ ๋ฐ ๊ณ ๋ ค ์ฌํญ
์ด์ ์๋ ๋ถ๊ตฌํ๊ณ experimental_useMutableSource์๋ ๋ช ๊ฐ์ง ๋จ์ ๊ณผ ๊ณ ๋ ค ์ฌํญ๋ ์์ต๋๋ค.
- ์คํ์ API: ์คํ์ API์ธ
experimental_useMutableSource๋ ๋ณ๊ฒฝ๋ ์ ์์ผ๋ฉฐ ํฅํ React ๋ฆด๋ฆฌ์ค์์ ์์ ์ ์ด์ง ์์ ์ ์์ต๋๋ค. - ๋ณต์ก์ฑ:
experimental_useMutableSource๋ฅผ ๊ตฌํํ๋ ค๋ฉด ๊ฒฝํฉ ์กฐ๊ฑด ๋ฐ ๋ฐ์ดํฐ ๋ถ์ผ์น๋ฅผ ํผํ๊ธฐ ์ํด ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ ์์ค ๋ฐ ๋๊ธฐํ๋ฅผ ์ ์คํ๊ฒ ๊ด๋ฆฌํด์ผ ํฉ๋๋ค. - ๋ฒ๊ทธ ๋ฐ์ ๊ฐ๋ฅ์ฑ: ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ๋ ์ฌ๋ฐ๋ฅด๊ฒ ์ฒ๋ฆฌ๋์ง ์์ผ๋ฉด ๋ฏธ๋ฌํ ๋ฒ๊ทธ๋ฅผ ์ ๋ฐํ ์ ์์ต๋๋ค. ์ฝ๋๋ฅผ ์ฒ ์ ํ ํ ์คํธํ๊ณ ์๊ธฐ์น ์์ ๋ถ์์ฉ์ ๋ฐฉ์งํ๊ธฐ ์ํด ๋ฐฉ์ด์ ๋ณต์ฌ์ ๊ฐ์ ๊ธฐ์ ์ ์ฌ์ฉํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
- ํญ์ ์ต์์ ์๋ฃจ์
์ ์๋:
experimental_useMutableSource๋ฅผ ์ฌ์ฉํ๊ธฐ ์ ์ ๋ถ๋ณ ํจํด์ด ๊ทํ์ ๊ฒฝ์ฐ์ ์ถฉ๋ถํ์ง ๊ณ ๋ คํ์ญ์์ค. ๋ถ๋ณ์ฑ์ ๋ ๋์ ์์ธก ๊ฐ๋ฅ์ฑ๊ณผ ๋๋ฒ๊น ๊ฐ๋ฅ์ฑ์ ์ ๊ณตํฉ๋๋ค.
experimental_useMutableSource ์ฌ์ฉ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
experimental_useMutableSource๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์ฌ์ฉํ๋ ค๋ฉด ๋ค์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ณ ๋ คํ์ญ์์ค.
- ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ ์ต์ํ: ํ์ํ ๊ฒฝ์ฐ์๋ง ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ์ญ์์ค. ์์ธก ๊ฐ๋ฅ์ฑ์ ์ ์งํ๊ณ ์ํ ๊ด๋ฆฌ๋ฅผ ๊ฐ์ํํ๊ธฐ ์ํด ๊ฐ๋ฅํ ํ ๋ถ๋ณ ๋ฐ์ดํฐ ๊ตฌ์กฐ๋ฅผ ์ ํธํ์ญ์์ค.
- ๋ณ๊ฒฝ ๊ฐ๋ฅํ ์ํ ์บก์ํ: ์ก์ธ์ค๋ฅผ ์ ์ดํ๊ณ ์๋ํ์ง ์์ ์์ ์ ๋ฐฉ์งํ๊ธฐ ์ํด ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ๋ฅผ ์ ์ ์๋ ๋ชจ๋ ๋๋ ํด๋์ค ๋ด์ ์บก์ํํฉ๋๋ค.
- ๋ฒ์ ๊ด๋ฆฌ ์ฌ์ฉ: ๋ณ๊ฒฝ ์ฌํญ์ ์ถ์ ํ๊ณ ์ปดํฌ๋ํธ๊ฐ ํ์ํ ๊ฒฝ์ฐ์๋ง ๋ค์ ๋ ๋๋ง๋๋๋ก ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ์ ๋ํ ๋ฒ์ ๊ด๋ฆฌ ๋ฉ์ปค๋์ฆ์ ๊ตฌํํฉ๋๋ค.
getVersion๋ฉ์๋๋ ์ด๋ฅผ ์ํด ๋งค์ฐ ์ค์ํฉ๋๋ค. - ๋ ๋๋ง์์ ์ง์ ๋ณํ ๋ฐฉ์ง: ์ปดํฌ๋ํธ์ ๋ ๋ ํจ์ ๋ด์์ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ๋ฅผ ์ง์ ์์ ํ์ง ๋ง์ญ์์ค. ๋ฌดํ ๋ฃจํ ๋ฐ ์๊ธฐ์น ์์ ๋์์ผ๋ก ์ด์ด์ง ์ ์์ต๋๋ค.
- ์ฒ ์ ํ ํ ์คํธ: ์ฝ๋๋ฅผ ์ฒ ์ ํ ํ ์คํธํ์ฌ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ๊ฐ ์ฌ๋ฐ๋ฅด๊ฒ ์ฒ๋ฆฌ๋๊ณ ๊ฒฝํฉ ์กฐ๊ฑด ๋๋ ๋ฐ์ดํฐ ๋ถ์ผ์น๊ฐ ์๋์ง ํ์ธํฉ๋๋ค.
- ์ ์คํ ๋๊ธฐํ: ์ฌ๋ฌ ์ปดํฌ๋ํธ๊ฐ ๋์ผํ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ ์์ค๋ฅผ ๊ณต์ ํ๋ ๊ฒฝ์ฐ ๋ฐ์ดํฐ์ ๋ํ ์ก์ธ์ค๋ฅผ ์ ์คํ๊ฒ ๋๊ธฐํํ์ฌ ์ถฉ๋์ ํผํ๊ณ ๋ฐ์ดํฐ ์ผ๊ด์ฑ์ ๋ณด์ฅํฉ๋๋ค. ๋์ ์ก์ธ์ค๋ฅผ ๊ด๋ฆฌํ๊ธฐ ์ํด ์ ๊ธ ๋๋ ํธ๋์ญ์ ์ ๋ฐ์ดํธ์ ๊ฐ์ ๊ธฐ์ ์ ์ฌ์ฉํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค.
- ๋์ ๊ณ ๋ ค:
experimental_useMutableSource๋ฅผ ์ฌ์ฉํ๊ธฐ ์ ์ ๋ถ๋ณ ๋ฐ์ดํฐ ๊ตฌ์กฐ ๋๋ ์ ์ญ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ๊ณผ ๊ฐ์ ๋ค๋ฅธ ์ ๊ทผ ๋ฐฉ์์ด ์ฌ์ฉ ์ฌ๋ก์ ๋ ์ ํฉํ ์ ์๋์ง ํ๊ฐํฉ๋๋ค.
experimental_useMutableSource์ ๋ํ ๋์
experimental_useMutableSource๋ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ๋ฅผ React ์ปดํฌ๋ํธ์ ํตํฉํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ์ง๋ง ์ฌ๋ฌ ๊ฐ์ง ๋์์ด ์์ต๋๋ค.
- ์ ์ญ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ: Redux, Zustand ๋ฐ Recoil๊ณผ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ธ๋ถ ์์คํ ์์ ์ ๋ฐ์ดํธ๋ฅผ ์ฒ๋ฆฌํ๋ ๊ฒ์ ํฌํจํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ํ๋ฅผ ๊ด๋ฆฌํ๊ธฐ ์ํ ๊ฐ๋ ฅํ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํฉ๋๋ค. ์ด๋ฌํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ผ๋ฐ์ ์ผ๋ก ๋ถ๋ณ ๋ฐ์ดํฐ ๊ตฌ์กฐ์ ์์กดํ๋ฉฐ ์๊ฐ ์ฌํ ๋๋ฒ๊น ๋ฐ ๋ถ์์ฉ ์ฒ๋ฆฌ๋ฅผ ์ํ ๋ฏธ๋ค์จ์ด์ ๊ฐ์ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
- Context API: React์ Context API๋ฅผ ์ฌ์ฉํ๋ฉด props๋ฅผ ๋ช ์์ ์ผ๋ก ์ ๋ฌํ์ง ์๊ณ ๋ ์ปดํฌ๋ํธ ๊ฐ์ ์ํ๋ฅผ ๊ณต์ ํ ์ ์์ต๋๋ค. Context๋ ์ผ๋ฐ์ ์ผ๋ก ๋ถ๋ณ ๋ฐ์ดํฐ์ ํจ๊ป ์ฌ์ฉ๋์ง๋ง ์ ๋ฐ์ดํธ ๋ฐ ๊ตฌ๋ ์ ์ ์คํ๊ฒ ๊ด๋ฆฌํ์ฌ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ์ ํจ๊ป ์ฌ์ฉํ ์๋ ์์ต๋๋ค.
- ์ฌ์ฉ์ ์ ์ ํ : ์ฌ์ฉ์ ์ ์ ํ ์ ๋ง๋ค์ด ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ๊ณ ์ปดํฌ๋ํธ๋ฅผ ๋ณ๊ฒฝ ์ฌํญ์ ๊ตฌ๋ ํ ์ ์์ต๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ๋ ๋ง์ ์ ์ฐ์ฑ์ ์ ๊ณตํ์ง๋ง ์ฑ๋ฅ ๋ฌธ์ ๋ฐ ๋ฐ์ดํฐ ๋ถ์ผ์น๋ฅผ ํผํ๊ธฐ ์ํด ์ ์คํ ๊ตฌํ์ด ํ์ํฉ๋๋ค.
- ์๊ทธ๋: Preact ์๊ทธ๋๊ณผ ๊ฐ์ ๋ฐ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๋ณ๊ฒฝ๋๋ ๊ฐ์ ๊ด๋ฆฌํ๊ณ ๊ตฌ๋ ํ๋ ํจ์จ์ ์ธ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ React ํ๋ก์ ํธ์ ํตํฉํ๊ณ React์ ํ ์ ํตํด ์ง์ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ๋ ๋์์ ์ ๊ณตํ ์ ์์ต๋๋ค.
๊ฒฐ๋ก
experimental_useMutableSource๋ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ๋ฅผ React ์ปดํฌ๋ํธ์ ํตํฉํ๋ ๊ฐ๋ ฅํ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํ์ฌ ํน์ ์๋๋ฆฌ์ค์์ ํจ์จ์ ์ธ ์
๋ฐ์ดํธ์ ํฅ์๋ ์ฑ๋ฅ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. ๊ทธ๋ฌ๋ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ์ ๊ด๋ จ๋ ๋จ์ ๊ณผ ๊ณ ๋ ค ์ฌํญ์ ์ดํดํ๊ณ ์ ์ฌ์ ์ธ ๋ฌธ์ ๋ฅผ ํผํ๊ธฐ ์ํด ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. experimental_useMutableSource๋ฅผ ์ฌ์ฉํ๊ธฐ ์ ์ ์ฌ์ฉ ์ฌ๋ก์ ๊ฐ์ฅ ์ ํฉํ ์๋ฃจ์
์ธ์ง ์ ์คํ๊ฒ ํ๊ฐํ๊ณ ๋ ๋์ ์์ ์ฑ๊ณผ ์ ์ง ๊ด๋ฆฌ์ฑ์ ์ ๊ณตํ ์ ์๋ ๋์ฒด ์ ๊ทผ ๋ฐฉ์์ ๊ณ ๋ คํ์ญ์์ค. ์คํ์ API๋ก์ ๋์ ๋๋ ๊ฐ์ฉ์ฑ์ด ํฅํ React ๋ฒ์ ์์ ๋ณ๊ฒฝ๋ ์ ์๋ค๋ ์ ์ ์ ์ํ์ญ์์ค. experimental_useMutableSource์ ๊ทธ ๋์์ ๋ณต์ก์ฑ์ ์ดํดํจ์ผ๋ก์จ React ์ ํ๋ฆฌ์ผ์ด์
์์ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ๋ํ ์ ๋ณด์ ์
๊ฐํ ๊ฒฐ์ ์ ๋ด๋ฆด ์ ์์ต๋๋ค.