React์ experimental_use ๋ฆฌ์์ค ํ ์ ํ์ํด ๋ณด์ธ์. ๋์์ฑ ๋ ๋๋ง์ ๋ฉ์ปค๋์ฆ, ์ด์ , ์ฌ์ฉ ์ฌ๋ก๋ฅผ ์ดํดํ๊ณ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ๋ฐ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ์ธ์.
React์ experimental_use๋ก ๋์์ฑ ๋ ๋๋ง ์ ๊ธ ํด์ : ์ข ํฉ ๊ฐ์ด๋
React๋ ์ฒ์๋ถํฐ ์ต์ ์น ๊ฐ๋ฐ์ ์๊ตฌ ์ฌํญ์ ์ถฉ์กฑํ๊ธฐ ์ํด ์ง์์ ์ผ๋ก ๋ฐ์ ํด ์์ต๋๋ค. ์ต๊ทผ ๋ช ๋
๊ฐ ๊ฐ์ฅ ์ค์ํ ๋ฐ์ ์ค ํ๋๋ ๋์์ฑ ๋ ๋๋ง์ ๋์
์ผ๋ก, ์ด๋ React ์ ํ๋ฆฌ์ผ์ด์
์ ๋ฐ์์ฑ๊ณผ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ๊ธฐ ์ํด ์ค๊ณ๋ ๊ธฐ๋ฅ์
๋๋ค. ์ด๋ฌํ ํจ๋ฌ๋ค์ ์ ํ์ ์ค์ฌ์๋ ๋น๋๊ธฐ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ๋ฐ ์ปดํฌ๋ํธ ๋ ๋๋ง์ ๊ด๋ฆฌํ๊ธฐ ์ํ ๊ฐ๋ ฅํ ๋๊ตฌ์ธ experimental_use ๋ฆฌ์์ค ํ
์ด ์์ต๋๋ค. ์ด ์ข
ํฉ ๊ฐ์ด๋์์๋ experimental_use์ ๋ณต์ก์ฑ์ ๊น์ด ํ๊ณ ๋ค์ด ๊ทธ ๋ฉ์ปค๋์ฆ, ์ด์ , ์ฌ์ฉ ์ฌ๋ก ๋ฐ React ํ๋ก์ ํธ์ ๋ฏธ์น๋ ์ํฅ์ ํ์ํฉ๋๋ค.
React์ ๋์์ฑ ๋ ๋๋ง ์ดํดํ๊ธฐ
experimental_use์ ๊ตฌ์ฒด์ ์ธ ๋ด์ฉ์ ๋ํด ์์๋ณด๊ธฐ ์ ์ ๋์์ฑ ๋ ๋๋ง์ ๊ธฐ๋ณธ ๊ฐ๋
์ ํ์
ํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์ ํต์ ์ธ React ๋ ๋๋ง์ ๋๊ธฐ์ ์ด๊ณ ๋ธ๋กํน ๋ฐฉ์์ผ๋ก ์๋ํฉ๋๋ค. ์ปดํฌ๋ํธ๊ฐ ์
๋ฐ์ดํธ๋์ด์ผ ํ ๋, React๋ ํ์ํ ๊ณ์ฐ์ ์ํํ๊ณ DOM์ ์
๋ฐ์ดํธํ๊ธฐ ์ํด ๋ค๋ฅธ ๋ชจ๋ ์์
์ ์ค๋จํฉ๋๋ค. ์ด๋ ํนํ ํฐ ์ปดํฌ๋ํธ ํธ๋ฆฌ๋ ๊ณ์ฐ ์ง์ฝ์ ์ธ ์์
์ ๋ค๋ฃฐ ๋ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์ ๋ฐํ ์ ์์ต๋๋ค. ๋ฐ๋ฉด์ ๋์์ฑ ๋ ๋๋ง์ React๊ฐ ์ฌ๋ฌ ์์
์ ๋์์ ์ฒ๋ฆฌํ๊ณ ํ์์ ๋ฐ๋ผ ์ผ์ ์ค์ง ๋ฐ ์ฌ๊ฐํ ์ ์๋๋ก ํฉ๋๋ค. ์ด๋ฅผ ํตํด React๋ ๋ณต์กํ ๋ ๋๋ง ์์
์ ์ํํ๋ ๋์์๋ ์ฌ์ฉ์ ์ํธ์์ฉ์ ๊ณ์ ๋ฐ์ํ ์ ์์ต๋๋ค.
๋์์ฑ ๋ ๋๋ง์ ์ฃผ์ ์ด์ :
- ํฅ์๋ ๋ฐ์์ฑ: React๋ ๋ณต์กํ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ ๋์๋ ์ฌ์ฉ์ ์ํธ์์ฉ์ ๋ ๋น ๋ฅด๊ฒ ์๋ตํ ์ ์์ต๋๋ค.
- ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ: ์ฌ์ฉ์๋ ๋ ๋ถ๋๋ฌ์ด ์ ํ๊ณผ ๋ ์ ์ ์ง์ฐ์ ๊ฒฝํํ์ฌ ๋ ์ฆ๊ฑฐ์ด ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝํํ๊ฒ ๋ฉ๋๋ค.
- ์์ ์ฐ์ ์์ ์ง์ : React๋ ๋ ์ค์ํ ์์ ๋ณด๋ค ๋ณด์ด๋ ์์ ๋ ๋๋ง๊ณผ ๊ฐ์ ์ค์ํ ์์ ์ ์ฐ์ ์์๋ฅผ ์ ํ ์ ์์ต๋๋ค.
- ๋ธ๋กํน ์๊ฐ ๊ฐ์: React๋ ๋ ๋๋ง ์์ ์ ์ผ์ ์ค์งํ๊ณ ์ฌ๊ฐํ์ฌ ๋ฉ์ธ ์ค๋ ๋๋ฅผ ์ฐจ๋จํ๋ ๊ฒ์ ๋ฐฉ์งํ๊ณ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์๋ตํ์ง ์๊ฒ ๋๋ ๊ฒ์ ๋ง์ ์ ์์ต๋๋ค.
React์ experimental_use ๋ฆฌ์์ค ํ ์๊ฐ
experimental_use ๋ฆฌ์์ค ํ
์ React์ ๋์์ฑ ๋ ๋๋ง ์ํคํ
์ฒ์ ํต์ฌ ๊ตฌ์ฑ ์์์
๋๋ค. ์ด๋ ๋น๋๊ธฐ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ๋ฅผ ๊ด๋ฆฌํ๊ณ React Suspense์ ํตํฉํ๋ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํฉ๋๋ค. Suspense๋ฅผ ์ฌ์ฉํ๋ฉด ๋น๋๊ธฐ ๋ฐ์ดํฐ๊ฐ ๋ก๋๋๊ธฐ๋ฅผ ๊ธฐ๋ค๋ฆฌ๋ ๋์ ๋ ๋๋งํ ๋ด์ฉ์ ์ ์ธ์ ์ผ๋ก ์ง์ ํ ์ ์์ต๋๋ค. experimental_use ํ
์ ์ปดํฌ๋ํธ์ API ์๋ํฌ์ธํธ ๋๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ฟผ๋ฆฌ์ ๊ฐ์ ๋น๋๊ธฐ ๋ฆฌ์์ค ๊ฐ์ ์ํธ์์ฉ์ ์ฉ์ดํ๊ฒ ํฉ๋๋ค.
experimental_use์ ๋ชฉ์ :
- ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ํตํฉ: ๋น๋๊ธฐ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ๋ฅผ React ์ปดํฌ๋ํธ์ ์ํํ๊ฒ ํตํฉํฉ๋๋ค.
- Suspense ํตํฉ: ์ ์ธ์ ๋ก๋ฉ ์ํ๋ฅผ ์ํด React Suspense ์ฌ์ฉ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
- ๋จ์ํ๋ ๋น๋๊ธฐ ๋ก์ง: ์ปดํฌ๋ํธ ๋ด์์ ๋น๋๊ธฐ ์์ ๊ด๋ฆฌ๋ฅผ ๋จ์ํํฉ๋๋ค.
- ์ค๋ฅ ์ฒ๋ฆฌ: ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ์ค ์ค๋ฅ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํฉ๋๋ค.
์ค์ ์ฐธ๊ณ ์ฌํญ: ์ด๋ฆ์์ ์ ์ ์๋ฏ์ด experimental_use๋ ์์ง ์คํ์ ์ธ API์ด๋ฉฐ ํฅํ React ๋ฆด๋ฆฌ์ค์์ ๋ณ๊ฒฝ๋ ์ ์์ต๋๋ค. ์ฃผ์ํด์ ์ฌ์ฉํ๊ณ API๊ฐ ๋ฐ์ ํจ์ ๋ฐ๋ผ ์ฝ๋๋ฅผ ์์ ํ ์ค๋น๋ฅผ ํ์ญ์์ค. ํญ์ ๊ณต์ React ๋ฌธ์๋ฅผ ์ฐธ์กฐํ์ฌ ์ต์ ์
๋ฐ์ดํธ๋ฅผ ํ์ธํ์ธ์.
experimental_use ์๋ ๋ฐฉ์: ๋จ๊ณ๋ณ ๊ฐ์ด๋
experimental_use ํ
์ "๋ฆฌ์์ค"๋ผ๋ ๊ฐ๋
์ ์ค์ฌ์ผ๋ก ์๋ํฉ๋๋ค. ๋ฆฌ์์ค๋ API์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ๊ฒ๊ณผ ๊ฐ์ ๋น๋๊ธฐ ์์
์ ์บก์ํํ๋ ๊ฐ์ฒด์
๋๋ค. ์ด ํ
์ ์์
์์, ๋ก๋ฉ ์ํ ์ฒ๋ฆฌ, ์ปดํฌ๋ํธ์ ๊ฒฐ๊ณผ ์ ๊ณต ๋ฑ ์ด ๋ฆฌ์์ค์ ์๋ช
์ฃผ๊ธฐ๋ฅผ ๊ด๋ฆฌํฉ๋๋ค.
1๋จ๊ณ: ๋ฆฌ์์ค ์์ฑ
์ฒซ ๋ฒ์งธ ๋จ๊ณ๋ ๋น๋๊ธฐ ์์
์ ์บก์ํํ๋ ๋ฆฌ์์ค ๊ฐ์ฒด๋ฅผ ๋ง๋๋ ๊ฒ์
๋๋ค. ์ด ๋ฆฌ์์ค ๊ฐ์ฒด์๋ ์์
์ ์์ํ๊ณ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํ๋ read ๋ฉ์๋๊ฐ ์์ด์ผ ํฉ๋๋ค. read ๋ฉ์๋๋ ๋ฐ์ดํฐ๊ฐ ์์ง ์ฌ์ฉ ๊ฐ๋ฅํ์ง ์์ ๊ฒฝ์ฐ Promise๋ฅผ ๋์ ธ React์ ์ปดํฌ๋ํธ๊ฐ ์ผ์ ์ค๋จ๋์ด์ผ ํจ์ ์๋ฆด ์ ์์ต๋๋ค.
์์ (JavaScript):
//Resource creation function
function createResource(promise) {
let status = 'pending';
let result;
let suspender = promise().then(
(r) => {
status = 'success';
result = r;
},
(e) => {
status = 'error';
result = e;
}
);
return {
read() {
if (status === 'pending') {
throw suspender;
} else if (status === 'error') {
throw result;
} else if (status === 'success') {
return result;
}
},
};
}
์ด ์์ ์์ createResource๋ Promise๋ฅผ ๋ฐํํ๋ ํจ์๋ฅผ ์ธ์๋ก ๋ฐ๋ ํจ์์
๋๋ค. ๋น๋๊ธฐ ์์
์ ๋ค์ํ ์ํ(๋๊ธฐ, ์ฑ๊ณต, ์ค๋ฅ)๋ฅผ ์ฒ๋ฆฌํ๋ read ๋ฉ์๋๋ฅผ ๊ฐ์ง ๋ฆฌ์์ค ๊ฐ์ฒด๋ฅผ ์์ฑํฉ๋๋ค. ์ด ํจํด์ ๋๋ฆฌ ์ฌ์ฉ๋๋ฉฐ React ๋ฆฌ์์ค๋ฅผ ๋ง๋๋ ํ์ค์ ์ธ ์ ๊ทผ ๋ฐฉ์์ ๋ํ๋
๋๋ค.
2๋จ๊ณ: ์ปดํฌ๋ํธ์์ experimental_use ํ ์ฌ์ฉํ๊ธฐ
React ์ปดํฌ๋ํธ ๋ด์์ experimental_use ํ
์ ์ฌ์ฉํ์ฌ ๋ฆฌ์์ค์ ๋ฐ์ดํฐ์ ์ ๊ทผํ ์ ์์ต๋๋ค. ์ด ํ
์ ๋ฆฌ์์ค ๊ฐ์ฒด๋ฅผ ์ธ์๋ก ๋ฐ์ ๋น๋๊ธฐ ์์
์ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํฉ๋๋ค. ๋ฐ์ดํฐ๊ฐ ์์ง ์ฌ์ฉ ๊ฐ๋ฅํ์ง ์์ ๊ฒฝ์ฐ, ํ
์ Suspense๋ฅผ ํธ๋ฆฌ๊ฑฐํ์ฌ React๊ฐ ๋ฐ์ดํฐ๊ฐ ๋ก๋๋ ๋๊น์ง ๋์ฒด UI๋ฅผ ๋ ๋๋งํ๋๋ก ํฉ๋๋ค.
์์ (React ์ปดํฌ๋ํธ):
import React, { experimental_use as use, Suspense } from 'react';
function MyComponent({ resource }) {
const data = use(resource);
return <div>{data.message}</div>;
}
function App() {
// Example: create a resource that fetches data from an API
const apiCall = () => new Promise((resolve) => {
setTimeout(() => {
resolve({ message: 'Hello from the API!' });
}, 2000);
});
const resource = React.useMemo(() => createResource(apiCall), []);
return (
<Suspense fallback={<div>Loading...</div>}>
<MyComponent resource={resource} />
</Suspense>
);
}
export default App;
์ด ์์ ์์ MyComponent๋ experimental_use ํ
์ ์ฌ์ฉํ์ฌ resource์ ๋ฐ์ดํฐ์ ์ ๊ทผํฉ๋๋ค. ๋ฐ์ดํฐ๊ฐ ์์ง ์ฌ์ฉ ๊ฐ๋ฅํ์ง ์์ ๊ฒฝ์ฐ, React๋ Suspense ์ปดํฌ๋ํธ์ ์ง์ ๋ ๋์ฒด UI(์ด ๊ฒฝ์ฐ, "Loading...")๋ฅผ ๋ ๋๋งํฉ๋๋ค. ๋ฐ์ดํฐ๊ฐ ๋ก๋๋๋ฉด React๋ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ง๊ณ MyComponent๋ฅผ ๋ค์ ๋ ๋๋งํฉ๋๋ค.
3๋จ๊ณ: ์ค๋ฅ ์ฒ๋ฆฌ
experimental_use ํ
์ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ์ค ์ค๋ฅ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฉ์ปค๋์ฆ๋ ์ ๊ณตํฉ๋๋ค. ๋น๋๊ธฐ ์์
์ด ์คํจํ๋ฉด ๋ฆฌ์์ค ๊ฐ์ฒด์ read ๋ฉ์๋๊ฐ ์ค๋ฅ๋ฅผ ๋์ง๋๋ค. React๋ ์ด ์ค๋ฅ๋ฅผ ์ก์ ์ค๋ฅ ๊ฒฝ๊ณ(error boundary)๋ฅผ ๋ ๋๋งํ์ฌ ์ค๋ฅ๋ฅผ ์ ์์ ์ผ๋ก ์ฒ๋ฆฌํ๊ณ ์ ํ๋ฆฌ์ผ์ด์
์ด ์ถฉ๋ํ๋ ๊ฒ์ ๋ฐฉ์งํ ์ ์์ต๋๋ค.
์์ (์ค๋ฅ ๊ฒฝ๊ณ):
import React, { experimental_use as use, Suspense } from 'react';
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
// You can also log the error to an error reporting service
console.error(error, errorInfo);
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
function MyComponent({ resource }) {
const data = use(resource);
return <div>{data.message}</div>;
}
function App() {
// Example: create a resource that intentionally fails
const apiCall = () => new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error('Failed to fetch data!'));
}, 2000);
});
const resource = React.useMemo(() => createResource(apiCall), []);
return (
<ErrorBoundary>
<Suspense fallback={<div>Loading...</div>}>
<MyComponent resource={resource} />
</Suspense>
</ErrorBoundary>
);
}
export default App;
์ด ์์ ์์ ErrorBoundary ์ปดํฌ๋ํธ๋ MyComponent์์ ๋์ ธ์ง ๋ชจ๋ ์ค๋ฅ๋ฅผ ์ก์ ๋์ฒด UI๋ฅผ ๋ ๋๋งํฉ๋๋ค. ์ด๋ฅผ ํตํด ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ์ค์ ์ค๋ฅ๊ฐ ๋ฐ์ํ๋๋ผ๋ ์ ํ๋ฆฌ์ผ์ด์
์ด ์์ ์ ์ผ๋ก ์ ์ง๋ฉ๋๋ค.
experimental_use์ ์ฌ์ฉ ์ฌ๋ก
experimental_use ๋ฆฌ์์ค ํ
์ ๋ค์ํ ์๋๋ฆฌ์ค์์ ์ฌ์ฉํ ์ ์๋ ๋ค์ฌ๋ค๋ฅํ ๋๊ตฌ์
๋๋ค. ๋ช ๊ฐ์ง ์ผ๋ฐ์ ์ธ ์ฌ์ฉ ์ฌ๋ก๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- API์์ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ: ๊ฐ์ฅ ์ผ๋ฐ์ ์ธ ์ฌ์ฉ ์ฌ๋ก๋ API์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ๊ฒ์
๋๋ค. API ํธ์ถ์ ์บก์ํํ๋ ๋ฆฌ์์ค๋ฅผ ๋ง๋ค๊ณ
experimental_useํ ์ ์ฌ์ฉํ์ฌ ์ปดํฌ๋ํธ์์ ๋ฐ์ดํฐ์ ์ ๊ทผํ ์ ์์ต๋๋ค. - ๋ฐ์ดํฐ๋ฒ ์ด์ค์์ ์ฝ๊ธฐ:
experimental_useํ ์ ์ฌ์ฉํ์ฌ ๋ฐ์ดํฐ๋ฒ ์ด์ค์์ ๋ฐ์ดํฐ๋ฅผ ์ฝ์ ์ ์์ต๋๋ค. ์ด๋ ๋ฐ์ดํฐ ์ค์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐ ์ ์ฉํ ์ ์์ต๋๋ค. - ์ด๋ฏธ์ง ๋ฐ ๊ธฐํ ์์ฐ ๋ก๋:
experimental_useํ ์ ์ฌ์ฉํ์ฌ ์ด๋ฏธ์ง ๋ฐ ๊ธฐํ ์์ฐ์ ๋ก๋ํ ์ ์์ต๋๋ค. ์ด๋ ์์ฐ์ด ๋ก๋๋๋ ๋์ ํ๋ ์ด์คํ๋๋ฅผ ๋ ๋๋งํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฒด๊ฐ ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์์ต๋๋ค. - ๋ณต์กํ ๊ณ์ฐ ์ํ:
experimental_useํ ์ ์ฌ์ฉํ์ฌ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋ณต์กํ ๊ณ์ฐ์ ์ํํ ์ ์์ต๋๋ค. ์ด๋ ์ฅ์๊ฐ ์คํ๋๋ ๊ณ์ฐ ์ค์ UI๊ฐ ์๋ตํ์ง ์๊ฒ ๋๋ ๊ฒ์ ๋ฐฉ์งํ ์ ์์ต๋๋ค.
experimental_use ์ฌ์ฉ์ ์ด์
experimental_use ๋ฆฌ์์ค ํ
์ ์ฌ์ฉํ๋ฉด ๋ค์๊ณผ ๊ฐ์ ๋ช ๊ฐ์ง ์ด์ ์ด ์์ต๋๋ค:
- ํฅ์๋ ์ฌ์ฉ์ ๊ฒฝํ: ๋ก๋ฉ ์ํ๋ฅผ ์ ์ธ์ ์ผ๋ก ์ง์ ํ ์ ์๊ฒ ํจ์ผ๋ก์จ
experimental_useํ ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฌ์ฉ์ ๊ฒฝํ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค. - ๋จ์ํ๋ ๋น๋๊ธฐ ๋ก์ง:
experimental_useํ ์ ์ปดํฌ๋ํธ ๋ด์์ ๋น๋๊ธฐ ์์ ๊ด๋ฆฌ๋ฅผ ๋จ์ํํ์ฌ ์ฝ๋๋ฅผ ๋ ์ฝ๊ธฐ ์ฝ๊ณ ์ ์ง ๊ด๋ฆฌํ๊ธฐ ์ฝ๊ฒ ๋ง๋ญ๋๋ค. - ๋ ๋์ ์ฑ๋ฅ: ๋์์ฑ ๋ ๋๋ง๊ณผ Suspense๋ React๊ฐ ์์ ์ ์ฐ์ ์์๋ฅผ ์ ํ๊ณ ๋ฉ์ธ ์ค๋ ๋๋ฅผ ์ฐจ๋จํ์ง ์๋๋ก ํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
- ์ ์ธ์ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ: Suspense์
experimental_use๋ฅผ ์ฌ์ฉํ๋ฉด ๋ฐ์ดํฐ ์์กด์ฑ์ ์ ์ธ์ ์ผ๋ก ์ ์ํ์ฌ ์ฝ๋ ๋ช ํ์ฑ๊ณผ ์ ์ง ๊ด๋ฆฌ์ฑ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
์ค์ ์ฌ๋ก: ๊ตญ์ ์ ํ๋ฆฌ์ผ์ด์
experimental_use๊ฐ ๊ตญ์ ์ ํ๋ฆฌ์ผ์ด์
์์ ํนํ ์ ์ฉํ ์ ์๋ ๋ช ๊ฐ์ง ์ค์ ์ฌ๋ก๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค:
- ๋ค์ค ํตํ ์ ์์๊ฑฐ๋ ํ๋ซํผ: ์ฌ๋ฌ ํตํ๋ฅผ ์ง์ํ๋ ์ ์์๊ฑฐ๋ ํ๋ซํผ์ ์์ํด ๋ณด์ญ์์ค.
experimental_use๋ฅผ ์ฌ์ฉํ์ฌ API์์ ํ์จ์ ๊ฐ์ ธ์ ์ฌ์ฉ์์ ํ์ง ํตํ๋ก ๊ฐ๊ฒฉ์ ํ์ํ ์ ์์ต๋๋ค. Suspense ์ปดํฌ๋ํธ๋ ํ์จ์ ๊ฐ์ ธ์ค๋ ๋์ ๋ก๋ฉ ์ํ๋ฅผ ํ์ํ ์ ์์ต๋๋ค. - ๊ตญ์ ๋ด์ค ์น์ฌ์ดํธ: ๊ตญ์ ๋ด์ค ์น์ฌ์ดํธ๋
experimental_use๋ฅผ ์ฌ์ฉํ์ฌ ๋ค๋ฅธ ์์ค์์ ๋ด์ค ๊ธฐ์ฌ๋ฅผ ๊ฐ์ ธ์ ์ฌ์ฉ์๊ฐ ์ ํธํ๋ ์ธ์ด๋ก ํ์ํ ์ ์์ต๋๋ค. Suspense ์ปดํฌ๋ํธ๋ ๊ธฐ์ฌ๊ฐ ๋ฒ์ญ๋๋ ๋์ ๋ก๋ฉ ์ํ๋ฅผ ํ์ํ ์ ์์ต๋๋ค. - ๊ธ๋ก๋ฒ ์ฌํ ์์ฝ ์ ํ๋ฆฌ์ผ์ด์
: ๊ธ๋ก๋ฒ ์ฌํ ์์ฝ ์ ํ๋ฆฌ์ผ์ด์
์
experimental_use๋ฅผ ์ฌ์ฉํ์ฌ ๋ค๋ฅธ ์ ๊ณต์ ์ฒด๋ก๋ถํฐ ํญ๊ณตํธ ๋ฐ ํธํ ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ ์ฌ์ฉ์์๊ฒ ํ์ํ ์ ์์ต๋๋ค. Suspense ์ปดํฌ๋ํธ๋ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ๋์ ๋ก๋ฉ ์ํ๋ฅผ ํ์ํ ์ ์์ต๋๋ค.
์ด๋ฌํ ์๋ค์ experimental_use๊ฐ ๋น๋๊ธฐ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ๋ฅผ ์ํํ๊ฒ ๊ด๋ฆฌํ๊ณ ์ ์ ํ ๋ก๋ฉ ์ํ๋ฅผ ํ์ํจ์ผ๋ก์จ ์ด๋ป๊ฒ ๋ ๋ฐ์์ฑ ์๊ณ ์ฌ์ฉ์ ์นํ์ ์ธ ๊ตญ์ ์ ํ๋ฆฌ์ผ์ด์
์ ๋ง๋๋ ๋ฐ ์ฌ์ฉ๋ ์ ์๋์ง๋ฅผ ๋ณด์ฌ์ค๋๋ค.
experimental_use ์ฌ์ฉ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
experimental_use ๋ฆฌ์์ค ํ
์ ์ต๋ํ ํ์ฉํ๋ ค๋ฉด ๋ค์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด์ญ์์ค:
- ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ๋ฆฌ์์ค ์์ฑ: ์ฌ๋ฌ ์ปดํฌ๋ํธ์์ ์ฌ์ฉํ ์ ์๋ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ๋ฆฌ์์ค ๊ฐ์ฒด๋ฅผ ๋ง๋์ญ์์ค. ์ด๋ ์ฝ๋ ์ค๋ณต์ ํผํ๊ณ ์ฝ๋๋ฅผ ๋ ์ ์ง ๊ด๋ฆฌํ๊ธฐ ์ฝ๊ฒ ๋ง๋๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
- ์ค๋ฅ ๊ฒฝ๊ณ ์ฌ์ฉ: ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ์ค ์ค๋ฅ๋ฅผ ์ ์์ ์ผ๋ก ์ฒ๋ฆฌํ๊ธฐ ์ํด ํญ์
experimental_useํ ์ ์ฌ์ฉํ๋ ์ปดํฌ๋ํธ๋ฅผ ์ค๋ฅ ๊ฒฝ๊ณ๋ก ๊ฐ์ธ์ญ์์ค. - ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ์ต์ ํ: ๊ฐ์ ธ์์ผ ํ ๋ฐ์ดํฐ์ ์์ ์ต์ํํ๋๋ก ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ๋ก์ง์ ์ต์ ํํ์ญ์์ค. ์ด๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์์ต๋๋ค. ์บ์ฑ ๋ฐ ๋ฉ๋ชจ์ด์ ์ด์ ๊ณผ ๊ฐ์ ๊ธฐ์ ์ฌ์ฉ์ ๊ณ ๋ คํ์ญ์์ค.
- ์๋ฏธ ์๋ ๋์ฒด UI ์ ๊ณต: Suspense ์ปดํฌ๋ํธ์ ์๋ฏธ ์๋ ๋์ฒด UI๋ฅผ ์ ๊ณตํ์ญ์์ค. ์ด๋ ์ฌ์ฉ์๊ฐ ๋ฐ์ดํฐ๊ฐ ๋ก๋ ์ค์์ ์ดํดํ๊ณ ๋ต๋ตํดํ์ง ์๋๋ก ๋์์ค๋๋ค.
- ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง: ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํ๊ธฐ ์ํด ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ์ ๋ชจ๋ํฐ๋งํ์ญ์์ค. React Profiler์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์ผ์ผํค๋ ์ปดํฌ๋ํธ๋ฅผ ์๋ณํ์ญ์์ค.
๊ณ ๋ ค ์ฌํญ ๋ฐ ์ ์ฌ์ ๋จ์
experimental_use๊ฐ ์๋นํ ์ด์ ์ ์ ๊ณตํ์ง๋ง, ์ ์ฌ์ ์ธ ๋จ์ ์ ์ธ์งํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค:
- ์คํ์ API: ์คํ์ API๋ก์
experimental_use๋ ๋ณ๊ฒฝ๋ ์ ์์ต๋๋ค. ์ด๋ ํฅํ React ๋ฆด๋ฆฌ์ค์์ ์ฝ๋๋ฅผ ์ ๋ฐ์ดํธํด์ผ ํ ์๋ ์์์ ์๋ฏธํฉ๋๋ค. - ํ์ต ๊ณก์ : ๋์์ฑ ๋ ๋๋ง๊ณผ Suspense๋ฅผ ์ดํดํ๋ ๊ฒ์ React๋ฅผ ์ฒ์ ์ ํ๋ ๊ฐ๋ฐ์์๊ฒ๋ ์ด๋ ค์ธ ์ ์์ต๋๋ค.
- ๋ณต์ก์ฑ:
experimental_use๋ฅผ ์ฌ์ฉํ๋ฉด ํนํ ๋น๋๊ธฐ ํ๋ก๊ทธ๋๋ฐ์ ์ต์ํ์ง ์์ ๊ฒฝ์ฐ ์ฝ๋์ ๋ณต์ก์ฑ์ ๋ํ ์ ์์ต๋๋ค. - ๊ณผ๋ํ ์ฌ์ฉ ๊ฐ๋ฅ์ฑ:
experimental_use๋ฅผ ํ๋ช ํ๊ฒ ์ฌ์ฉํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. Suspense๋ฅผ ๊ณผ๋ํ๊ฒ ์ฌ์ฉํ๋ฉด ๊ณผ๋ํ ๋ก๋ฉ ์ํ๋ก ์ธํด ๋จํธ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ์ด๋ํ ์ ์์ต๋๋ค.
experimental_use์ ๋์
์คํ์ API ์ฌ์ฉ์ด ๋ถํธํ๋ค๋ฉด, experimental_use์ ๋ํ ๋ช ๊ฐ์ง ๋์์ด ์์ต๋๋ค:
- ์ ํต์ ์ธ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ๊ธฐ๋ฒ:
useEffect์useState์ ๊ฐ์ ์ ํต์ ์ธ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ๊ธฐ๋ฒ์ ์ฌ์ฉํ์ฌ ์ปดํฌ๋ํธ์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค. - ์๋ํํฐ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ: SWR์ด๋ React Query์ ๊ฐ์ ์๋ํํฐ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋น๋๊ธฐ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ๋ฅผ ๊ด๋ฆฌํ ์ ์์ต๋๋ค. ์ด๋ฌํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์บ์ฑ, ์ฌ๊ฒ์ฆ, ์ค๋ฅ ์ฒ๋ฆฌ์ ๊ฐ์ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
- GraphQL ํด๋ผ์ด์ธํธ: GraphQL์ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ, Apollo Client๋ Relay์ ๊ฐ์ GraphQL ํด๋ผ์ด์ธํธ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ๋ฅผ ๊ด๋ฆฌํ ์ ์์ต๋๋ค.
๊ฒฐ๋ก : experimental_use๋ก ๋์์ฑ ๋ ๋๋ง ์์ฉํ๊ธฐ
experimental_use ๋ฆฌ์์ค ํ
์ React์ ๋ฐ์ ์ ์์ด ์ค์ํ ์ง์ ์ ๋ํ๋ด๋ฉฐ, ๊ฐ๋ฐ์๋ค์ด ๋์์ฑ ๋ ๋๋ง์ ํตํด ๋ ๋ฐ์์ฑ ์๊ณ ์ฌ์ฉ์ ์นํ์ ์ธ ์ ํ๋ฆฌ์ผ์ด์
์ ๊ตฌ์ถํ ์ ์๊ฒ ํด์ค๋๋ค. ์์ง ์คํ์ ์ธ API์ด์ง๋ง, ๊ทธ ๋ฉ์ปค๋์ฆ๊ณผ ์ด์ ์ ์ดํดํ๋ ๊ฒ์ ๋์์์ด ์งํํ๋ ์น ๊ฐ๋ฐ ํ๊ฒฝ์์ ์์ ๋๊ฐ๊ธฐ ์ํด ๋งค์ฐ ์ค์ํฉ๋๋ค. ๋์์ฑ ๋ ๋๋ง์ ์์ฉํ๊ณ experimental_use์ ๊ธฐ๋ฅ์ ํ์ํจ์ผ๋ก์จ, ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํ ์ฑ๋ฅ์ด ๋ฐ์ด๋๊ณ ๋งค๋ ฅ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ตฌ์ถํ ์๋ก์ด ๊ฐ๋ฅ์ฑ์ ์ด ์ ์์ต๋๋ค.
experimental_use๋ฅผ ์คํํ๋ฉด์ ์ต์ ์
๋ฐ์ดํธ์ ๋ชจ๋ฒ ์ฌ๋ก์ ๋ํด์๋ ๊ณต์ React ๋ฌธ์์ ์ปค๋ฎค๋ํฐ ์๋ฃ๋ฅผ ์ฐธ์กฐํ๋ ๊ฒ์ ์์ง ๋ง์ญ์์ค. ์ ์คํ ๊ณํ๊ณผ ๊ตฌํ์ ํตํด ๋์์ฑ ๋ ๋๋ง์ ํ์ ํ์ฉํ์ฌ ํ๋ ์ฌ์ฉ์์ ์๊ตฌ๋ฅผ ์ถฉ์กฑ์ํค๋ ๋ฐ์ด๋ ์น ์ ํ๋ฆฌ์ผ์ด์
์ ๋ง๋ค ์ ์์ต๋๋ค.
์ถ๊ฐ ํ์ต ์๋ฃ
- React ๊ณต์ ๋ฌธ์: https://react.dev/
- React Suspense ๊ณต์ ๋ฌธ์: https://react.dev/reference/react/Suspense
- React RFCs (์๊ฒฌ ์๋ ด ์์ฒญ): https://github.com/reactjs/rfcs
- Kent C. Dodds์ ๋ธ๋ก๊ทธ: ํ๋ฅญํ React ์ฝํ ์ธ ๋ก ์ ๋ช ํฉ๋๋ค.
- ์จ๋ผ์ธ React ์ปค๋ฎค๋ํฐ: Stack Overflow, Reddit (r/reactjs)