React์ useFormStatus๋ฅผ ์ฌ์ฉํ์ฌ ์์ ์ ์ถ ์ค์ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํค๊ธฐ ์ํด ์ค์๊ฐ ์งํ๋ฅ ๊ณ์ฐ๊ธฐ๋ฅผ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์. ์ฆ๊ฐ์ ์ธ ํผ๋๋ฐฑ์ ์ ๊ณตํ๊ณ ์ฌ์ฉ์ ์ฐธ์ฌ๋๋ฅผ ๋์ ๋๋ค.
React useFormStatus ์งํ๋ฅ ๊ณ์ฐ๊ธฐ: ํฅ์๋ UX๋ฅผ ์ํ ์ค์๊ฐ ์งํ๋ฅ ์ถ์
์ต์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์์ ์์ ์ ์ถ ์ค์ ์ฌ์ฉ์์๊ฒ ๋ช ํํ๊ณ ์ฆ๊ฐ์ ์ธ ํผ๋๋ฐฑ์ ์ ๊ณตํ๋ ๊ฒ์ ๊ธ์ ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ์ํด ๋งค์ฐ ์ค์ํฉ๋๋ค. ํจ๊ณผ์ ์ธ ๊ธฐ์ ์ค ํ๋๋ ์ค์๊ฐ ์งํ๋ฅ ๊ณ์ฐ๊ธฐ๋ฅผ ๊ตฌํํ์ฌ ์ฌ์ฉ์์๊ฒ ๋ฐ์ดํฐ๊ฐ ์ฒ๋ฆฌ๋๊ณ ์์์ ์๊ฐ์ ์ผ๋ก ํ์ธํ๋ ๊ฒ์ ๋๋ค. ์ด๋ ์ฌ์ฉ์ ๋ถ์๊ฐ์ ์ค์ผ ๋ฟ๋ง ์๋๋ผ ์ฐธ์ฌ๋๋ ํฅ์์ํต๋๋ค. React์ `useFormStatus` ํ ์ ์ ๋ต์ ์ธ ์งํ๋ฅ ์ถ์ ๊ณผ ๊ฒฐํฉํ๋ฉด ๊ฐ๋ฐ์๊ฐ ์ ๊ตํ๊ณ ์ ์ตํ ์งํ๋ฅ ํ์๊ธฐ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.
React useFormStatus ์ดํดํ๊ธฐ
React 18์ ๋์ ๋ `useFormStatus` ํ ์ `<form>` ์์์ ์ ์ถ ์ํ์ ๋ํ ์ ๋ณด๋ฅผ ์ ๊ณตํฉ๋๋ค. `pending`, `data`, `action`, `error`์ ๊ฐ์ ์์ฑ์ด ์๋ ๊ฐ์ฒด๋ฅผ ๋ฐํํฉ๋๋ค. React Server Components์ ํจ๊ป ๋์ ๋ ์๋ฒ ์์ ์ฉ์ผ๋ก ์ฃผ๋ก ์ค๊ณ๋์์ง๋ง, `pending` ์ํ๋ ์์์ด ์ ์ถ๋๊ณ ์๋์ง ๊ฐ์งํ๊ณ ์งํ๋ฅ ํ์๊ธฐ์ ๋ํ ์ ๋ฐ์ดํธ๋ฅผ ํธ๋ฆฌ๊ฑฐํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค.
useFormStatus๋ก ๊ธฐ๋ณธ ์์ ๋ง๋ค๊ธฐ
๊ธฐ๋ณธ ์์ ์์๋ถํฐ ์์ํด ๋ณด๊ฒ ์ต๋๋ค.
import React from 'react';
import { useFormStatus } from 'react-dom';
function MyForm() {
const { pending } = useFormStatus();
async function handleSubmit(formData: FormData) {
'use server';
// ๋๋ฆฐ ์๋ฒ ์์
์๋ฎฌ๋ ์ด์
await new Promise(resolve => setTimeout(resolve, 2000));
console.log('์์์ด ์ฑ๊ณต์ ์ผ๋ก ์ ์ถ๋์์ต๋๋ค!');
}
return (
);
}
export default MyForm;
์ด ๋จ์ํ๋ ์์ ์์ `useFormStatus`๋ ์์์ด ๋ณด๋ฅ ์ค์ผ ๋ ์ ์ถ ๋ฒํผ์ ๋นํ์ฑํํ๊ณ "์ ์ถ ์ค..." ๋ฉ์์ง๋ฅผ ํ์ํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. ์ด๋ ์ฌ์ฉ์์๊ฒ ๊ธฐ๋ณธ์ ์ธ ํผ๋๋ฐฑ์ ์ ๊ณตํฉ๋๋ค.
์ค์๊ฐ ์งํ๋ฅ ๊ณ์ฐ๊ธฐ ๊ตฌํํ๊ธฐ
๋ ์ ๊ตํ ์งํ๋ฅ ํ์๊ธฐ๋ฅผ ๋ง๋ค๋ ค๋ฉด ์์ ์ ์ถ ํ๋ก์ธ์ค์ ์งํ๋ฅ ์ ์ถ์ ํด์ผ ํฉ๋๋ค. ์ด๋ ์ข ์ข ์ ์ถ์ ์ฌ๋ฌ ๋จ๊ณ ๋๋ ๋จ๊ณ๋ก ๋๋๋ ๊ฒ์ ํฌํจํฉ๋๋ค. `useFormStatus` ์์ฒด๋ ์ธ๋ถํ๋ ์งํ๋ฅ ์ ๋ฐ์ดํธ๋ฅผ ์ ๊ณตํ์ง ์์ง๋ง, ์ด๋ฅผ ์ฌ์ฉ์ ์ ์ ๋ก์ง๊ณผ ๊ฒฐํฉํ์ฌ ์ด๋ฅผ ์ํํ ์ ์์ต๋๋ค.
์์ ์๋๋ฆฌ์ค: ํ์ผ ์ ๋ก๋
ํ์ผ์ ์ ๋ก๋ํ๋ ์๋๋ฆฌ์ค๋ฅผ ์๊ฐํด ๋ณด๊ฒ ์ต๋๋ค. ์ ์ถ ํ๋ก์ธ์ค์๋ ๋ค์ ๋จ๊ณ๊ฐ ํฌํจ๋ ์ ์์ต๋๋ค.
- ํ์ผ ์ ํจ์ฑ ๊ฒ์ฌ.
- ์ด๋ฏธ์ง ํฌ๊ธฐ ์กฐ์ (ํด๋นํ๋ ๊ฒฝ์ฐ).
- ์๋ฒ์ ํ์ผ ์ ๋ก๋.
- ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ ๋ฐ์ดํธ.
๊ฐ ๋จ๊ณ๋ฅผ ์๋ฃํ๋ ๊ฒ์ ๊ธฐ๋ฐ์ผ๋ก ์งํ๋ฅ ์ ์ถ์ ํ ์ ์์ต๋๋ค.
์งํ๋ฅ ์ถ์ ์ ์ฌ์ฉํ ์ฝ๋ ๊ตฌํ
import React, { useState } from 'react';
import { useFormStatus } from 'react-dom';
function FileUploadForm() {
const { pending } = useFormStatus();
const [progress, setProgress] = useState(0);
async function handleSubmit(formData: FormData) {
'use server';
// ์ ํจ์ฑ ๊ฒ์ฌ ์๋ฎฌ๋ ์ด์
(20%)
await simulateProgress(20, setProgress);
console.log('ํ์ผ ์ ํจ์ฑ ๊ฒ์ฌ๊ฐ ์๋ฃ๋์์ต๋๋ค.');
// ํฌ๊ธฐ ์กฐ์ ์๋ฎฌ๋ ์ด์
(30%)
await simulateProgress(30, setProgress);
console.log('ํ์ผ ํฌ๊ธฐ ์กฐ์ ์ด ์๋ฃ๋์์ต๋๋ค.');
// ์
๋ก๋ ์๋ฎฌ๋ ์ด์
(40%)
await simulateProgress(40, setProgress);
console.log('ํ์ผ ์
๋ก๋๊ฐ ์๋ฃ๋์์ต๋๋ค.');
// ๋ฐ์ดํฐ๋ฒ ์ด์ค ์
๋ฐ์ดํธ ์๋ฎฌ๋ ์ด์
(10%)
await simulateProgress(10, setProgress);
console.log('๋ฐ์ดํฐ๋ฒ ์ด์ค๊ฐ ์
๋ฐ์ดํธ๋์์ต๋๋ค.');
console.log('ํ์ผ์ด ์ฑ๊ณต์ ์ผ๋ก ์
๋ก๋๋์์ต๋๋ค!');
}
async function simulateProgress(percentage: number, setProgress: (value: ((prevState: number) => number) | number) => void) {
return new Promise(resolve => {
setTimeout(() => {
setProgress(prevProgress => prevProgress + percentage);
resolve(null);
}, 500);
});
}
return (
);
}
export default FileUploadForm;
์ค๋ช :
- `useState` ํ ์ ์ฌ์ฉํ์ฌ 0์ผ๋ก ์ด๊ธฐํ๋ `progress` ์ํ๋ฅผ ๊ด๋ฆฌํฉ๋๋ค.
- `handleSubmit` ํจ์๋ ์ด์ `simulateProgress` ํจ์๋ฅผ ์ฌ์ฉํ์ฌ `progress` ์ํ๋ฅผ ์ ๋ฐ์ดํธํ์ฌ ํ์ผ ์ ๋ก๋ ํ๋ก์ธ์ค์ ๋ค๋ฅธ ๋จ๊ณ๋ฅผ ์๋ฎฌ๋ ์ด์ ํฉ๋๋ค.
- `simulateProgress` ํจ์๋ `setTimeout`์ ์ฌ์ฉํ์ฌ ๋น๋๊ธฐ ์์ ์ ์๋ฎฌ๋ ์ด์ ํ๊ณ ์งํ๋ฅ ๋ฐฑ๋ถ์จ์ ์ ์ง์ ์ผ๋ก ์ ๋ฐ์ดํธํฉ๋๋ค. ์ด๋ ์ฌ์ฉ์์๊ฒ ์งํ๋ฅ ์ ์๊ฐ์ ํํ์ ์์ฑํฉ๋๋ค.
- ์์์ด `pending` ์ํ์ธ ๋์ HTML5 `<progress>` ์์๋ฅผ ์ฌ์ฉํ์ฌ ํ์ฌ `progress` ๊ฐ์ ๋ฐ์ํ๋ ์งํ๋ฅ ํ์์ค์ ํ์ํฉ๋๋ค.
์งํ๋ฅ ํ์๊ธฐ ์ฌ์ฉ์ ์ง์
์งํ๋ฅ ํ์๊ธฐ์ ์๊ฐ์ ํํ์ ๋ค์ํ ๋ฐฉ์์ผ๋ก ์ฌ์ฉ์ ์ง์ ํ ์ ์์ต๋๋ค.
- ์งํ๋ฅ ํ์์ค ์คํ์ผ๋ง: CSS๋ฅผ ์ฌ์ฉํ์ฌ `<progress>` ์์๋ฅผ ์คํ์ผ๋งํ๊ฑฐ๋ `<div>` ์์์ CSS ์ ๋๋ฉ์ด์ ์ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์ ์ ์ ์งํ๋ฅ ํ์์ค์ ๋ง๋ญ๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ ๋์์ธ์ ๋ง๊ฒ ๋ธ๋๋ ์์๊ณผ ์คํ์ผ๋ง์ ๊ณ ๋ คํฉ๋๋ค.
- ํ ์คํธ ์ ๋ฐ์ดํธ: ์งํ๋ฅ ํ์์ค๊ณผ ํจ๊ป "ํ์ผ ์ ํจ์ฑ ๊ฒ์ฌ ์ค...", "์ด๋ฏธ์ง ํฌ๊ธฐ ์กฐ์ ์ค..." ๋ฑ๊ณผ ๊ฐ์ ๋ฉ์์ง๋ฅผ ํ์ํ์ฌ ๋ ์ค๋ช ์ ์ธ ์ ๋ฐ์ดํธ๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ์๊ฐ์ ํผ๋๋ฐฑ: ์ ๋๋ฉ์ด์ ๋๋ ์์ด์ฝ์ ์ฌ์ฉํ์ฌ ์๊ฐ์ ํผ๋๋ฐฑ์ ๋์ฑ ํฅ์์ํต๋๋ค. ์๋ฃ ์ ๋ก๋ฉ ์คํผ๋ ๋๋ ํ์ธ ํ์ ์ ๋๋ฉ์ด์ ์ ์ฌ์ฉํ๋ฉด ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
์ค๋ฅ ๋ฐ ์์ธ ์ฒ๋ฆฌ
์์ ์ ์ถ ํ๋ก์ธ์ค ์ค์ ๋ฐ์ํ ์ ์๋ ์ค๋ฅ๋ฅผ ์ฒ๋ฆฌํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. `useFormStatus` ํ ์ ์ฌ์ฉ์์๊ฒ ์ค๋ฅ ๋ฉ์์ง๋ฅผ ํ์ํ๋ ๋ฐ ์ฌ์ฉํ ์ ์๋ `error` ์์ฑ์ ์ ๊ณตํฉ๋๋ค.
import React, { useState } from 'react';
import { useFormStatus } from 'react-dom';
function ErrorHandlingForm() {
const { pending, error } = useFormStatus();
const [progress, setProgress] = useState(0);
async function handleSubmit(formData: FormData) {
'use server';
try {
// ์ ํจ์ฑ ๊ฒ์ฌ ์๋ฎฌ๋ ์ด์
(20%)
await simulateProgress(20, setProgress);
console.log('ํ์ผ ์ ํจ์ฑ ๊ฒ์ฌ๊ฐ ์๋ฃ๋์์ต๋๋ค.');
// ์
๋ก๋ ์ค ์ค๋ฅ ์๋ฎฌ๋ ์ด์
(50% ์ดํ)
if (progress >= 50) {
throw new Error('ํ์ผ ์
๋ก๋์ ์คํจํ์ต๋๋ค.');
}
// ํฌ๊ธฐ ์กฐ์ ์๋ฎฌ๋ ์ด์
(30%)
await simulateProgress(30, setProgress);
console.log('ํ์ผ ํฌ๊ธฐ ์กฐ์ ์ด ์๋ฃ๋์์ต๋๋ค.');
// ์
๋ก๋ ์๋ฎฌ๋ ์ด์
(40%)
await simulateProgress(40, setProgress);
console.log('ํ์ผ ์
๋ก๋๊ฐ ์๋ฃ๋์์ต๋๋ค.');
// ๋ฐ์ดํฐ๋ฒ ์ด์ค ์
๋ฐ์ดํธ ์๋ฎฌ๋ ์ด์
(10%)
await simulateProgress(10, setProgress);
console.log('๋ฐ์ดํฐ๋ฒ ์ด์ค๊ฐ ์
๋ฐ์ดํธ๋์์ต๋๋ค.');
console.log('ํ์ผ์ด ์ฑ๊ณต์ ์ผ๋ก ์
๋ก๋๋์์ต๋๋ค!');
} catch (err: any) {
console.error('์
๋ก๋ ์ค ์ค๋ฅ:', err);
//์ค๋ฅ๋ฅผ ์ ์ ํ๊ฒ ์ฒ๋ฆฌํฉ๋๋ค.
throw err;
}
}
async function simulateProgress(percentage: number, setProgress: (value: ((prevState: number) => number) | number) => void) {
return new Promise(resolve => {
setTimeout(() => {
setProgress(prevProgress => prevProgress + percentage);
resolve(null);
}, 500);
});
}
return (
);
}
export default ErrorHandlingForm;
์ค์ ๊ณ ๋ ค ์ฌํญ:
- ์ค๋ฅ ๊ฒฝ๊ณ: ์๊ธฐ์น ์์ ์ค๋ฅ๋ฅผ ์ ์์ ์ผ๋ก ์ฒ๋ฆฌํ๋ ค๋ฉด ์์์ ์ค๋ฅ ๊ฒฝ๊ณ๋ก ๋ํํฉ๋๋ค.
- ์ฌ์ฉ์ ์นํ์ ์ธ ๋ฉ์์ง: ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๋ฐฉ๋ฒ์ ๋ํ ์ง์นจ์ ์ ๊ณตํ์ฌ ์ฌ์ฉ์์๊ฒ ๋ช ํํ๊ณ ์ ์ตํ ์ค๋ฅ ๋ฉ์์ง๋ฅผ ํ์ํฉ๋๋ค. ๊ธฐ์ ์ ์ธ ์ ๋ฌธ ์ฉ์ด๋ฅผ ํผํ๊ณ ์คํ ๊ฐ๋ฅํ ์กฐ์ธ์ ์ง์คํ์ญ์์ค.
- ๋กค๋ฐฑ: ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ฉด ์ ์ถ ํ๋ก์ธ์ค ์ค์ ์ํ๋ ๋ณ๊ฒฝ ์ฌํญ์ ๋๋๋ฆฌ๊ธฐ ์ํ ๋กค๋ฐฑ ๋ฉ์ปค๋์ฆ์ ๊ตฌํํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค.
์ ๊ทผ์ฑ ๊ณ ๋ ค ์ฌํญ
์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๋ฅผ ํฌํจํ ๋ชจ๋ ์ฌ์ฉ์๊ฐ ์งํ๋ฅ ํ์๊ธฐ์ ์ก์ธ์คํ ์ ์๋์ง ํ์ธํฉ๋๋ค.
- ARIA ์์ฑ: `aria-valuenow`, `aria-valuemin`, `aria-valuemax`์ ๊ฐ์ ARIA ์์ฑ์ ์ฌ์ฉํ์ฌ ํ๋ฉด ๋ฆฌ๋์ ์งํ๋ฅ ํ์์ค์ ๋ํ ์๋ฏธ์ ์ ๋ณด๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ์ถฉ๋ถํ ๋๋น: ์๊ฐ ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๋ฅผ ์ํด ์งํ๋ฅ ํ์์ค์ ์ถฉ๋ถํ ์์ ๋๋น๊ฐ ์๋์ง ํ์ธํฉ๋๋ค.
- ํค๋ณด๋ ํ์: ํค๋ณด๋๋ฅผ ์ฌ์ฉํ์ฌ ์์๊ณผ ํด๋น ์์๊ฐ ํ์ ๊ฐ๋ฅํ์ง ํ์ธํฉ๋๋ค.
- ํฌ์ปค์ค ๊ด๋ฆฌ: ํนํ ์ค๋ฅ ๋ฉ์์ง๋ฅผ ํ์ํ๊ฑฐ๋ ์ ์ถ ํ๋ก์ธ์ค๋ฅผ ์๋ฃํ ๋ ์ ์ ํ๊ฒ ํฌ์ปค์ค๋ฅผ ๊ด๋ฆฌํฉ๋๋ค.
์ค์ ์์ ๋ฐ ์ฌ์ฉ ์ฌ๋ก
์ค์๊ฐ ์งํ๋ฅ ๊ณ์ฐ๊ธฐ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๋ค์ํ ์๋๋ฆฌ์ค์์ ์ ์ฉํฉ๋๋ค.
- ๋์ฉ๋ ํ์ผ ์ ๋ก๋: ๋น๋์ค ๋๋ ๊ณ ํด์๋ ์ด๋ฏธ์ง์ ๊ฐ์ ๋์ฉ๋ ํ์ผ์ ์ ๋ก๋ํ๋ ์งํ๋ฅ ์ ๋ํ ํผ๋๋ฐฑ์ ์ฌ์ฉ์์๊ฒ ์ ๊ณตํฉ๋๋ค.
- ๋ณต์กํ ๋ฐ์ดํฐ ์ฒ๋ฆฌ: ๋ณด๊ณ ์ ์์ฑ ๋๋ ๋์ฉ๋ ๋ฐ์ดํฐ ์ธํธ ๋ถ์๊ณผ ๊ฐ์ ๋ณต์กํ ๋ฐ์ดํฐ ์ฒ๋ฆฌ ์์ ์ ์งํ๋ฅ ์ ์ฌ์ฉ์์๊ฒ ์๋ฆฝ๋๋ค.
- ๋ค๋จ๊ณ ์์: ๊ฐ ๋จ๊ณ์์ ์ํ๋ ์งํ๋ฅ ์ ํ์ํ์ฌ ๋ค๋จ๊ณ ์์์ ํตํด ์ฌ์ฉ์๋ฅผ ์๋ดํฉ๋๋ค.
- ์ ์ ์๊ฑฐ๋ ๊ฒฐ์ : ๊ฒฐ์ ํ๋ก์ธ์ค ์ค์ ํผ๋๋ฐฑ์ ์ ๊ณตํ์ฌ ์ฌ์ฉ์์๊ฒ ์ฃผ๋ฌธ์ด ์ฒ๋ฆฌ๋๊ณ ์์์ ์์ฌ์ํต๋๋ค.
- ์ํํธ์จ์ด ์ค์น: ์ํํธ์จ์ด ์ค์น ๋๋ ์ ๋ฐ์ดํธ์ ์งํ๋ฅ ์ ํ์ํฉ๋๋ค.
์๋ฅผ ๋ค์ด, ํด๋ผ์ฐ๋ ์คํ ๋ฆฌ์ง ์๋น์ค๋ ํ์ผ ์ ๋ก๋ ์ํ๋ฅผ ๋ํ๋ด๊ธฐ ์ํด ์งํ๋ฅ ํ์์ค์ ์ฌ์ฉํ ์ ์์ผ๋ฉฐ, ์จ๋ผ์ธ ์ด๋ฏธ์ง ํธ์ง๊ธฐ๋ ํํฐ ๋๋ ํจ๊ณผ ์ ์ฉ ์งํ๋ฅ ์ ํ์ํ๋ ๋ฐ ์ฌ์ฉํ ์ ์์ต๋๋ค.
์งํ๋ฅ ๊ณ์ฐ๊ธฐ ๊ตฌํ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
- ์งํ๋ฅ ์ ํํ๊ฒ ์ถ์ : ๊ฐ๋ฅํ ํ ์ ํํ๊ฒ ์งํ๋ฅ ์ ์ถ์ ํ์ฌ ์ฌ์ฉ์์๊ฒ ํ์ค์ ์ธ ํผ๋๋ฐฑ์ ์ ๊ณตํ์ญ์์ค. ์์๋ณด๋ค ํ๋ก์ธ์ค๊ฐ ์ค๋ ๊ฑธ๋ฆฌ๋ฉด ์งํ๋ฅ ์ ๊ณผ๋ ํ๊ฐํ๋ฉด ์ค๋งํ ์ ์์ต๋๋ค.
- ์ธ๋ถํ๋ ์ ๋ฐ์ดํธ ์ ๊ณต: ์งํ๋ฅ ํ์๊ธฐ์ ๋น๋ฒํ๊ณ ์ธ๋ถํ๋ ์ ๋ฐ์ดํธ๋ฅผ ์ ๊ณตํ์ฌ ์ฌ์ฉ์์๊ฒ ์ง์์ ์ธ ์งํ๋ฅ ์ ๋๋์ ์ค๋๋ค.
- ์งํ๋ฅ ์ ๊ธ๊ฒฉํ ๋ณํ ๋ฐฉ์ง: ์ฌ์ฉ์์๊ฒ ์ถฉ๊ฒฉ์ ์ฃผ๊ณ ํผ๋์ ์ค ์ ์์ผ๋ฏ๋ก ์งํ๋ฅ ์ ๊ฐ์์ค๋ฌ์ด ๋ณํ๋ฅผ ํผํ์ญ์์ค. ๋ถ๋๋ฌ์ด ์ ํ์ด ๋ฐ๋์งํฉ๋๋ค.
- ์ฑ๋ฅ ์ต์ ํ: ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๋ฐ์ ์ธ ์ฑ๋ฅ์ ์ํฅ์ ๋ฏธ์น์ง ์๋๋ก ์งํ๋ฅ ๊ณ์ฐ ๋ก์ง์ ์ฑ๋ฅ์ ์ต์ ํํฉ๋๋ค.
- ์ฒ ์ ํ ํ ์คํธ: ๋ค์ํ ๋คํธ์ํฌ ์๋์ ํ์ผ ํฌ๊ธฐ๋ฅผ ํฌํจํ ๋ค์ํ ์กฐ๊ฑด์์ ์งํ๋ฅ ํ์๊ธฐ๋ฅผ ์ฒ ์ ํ๊ฒ ํ ์คํธํ์ฌ ์ ํํ๊ณ ์ ๋ขฐํ ์ ์๋ ํผ๋๋ฐฑ์ ์ ๊ณตํ๋์ง ํ์ธํฉ๋๋ค.
useFormStatus์ ์งํ๋ฅ ์ถ์ ๋์
`useFormStatus`๋ ๊ธฐ๋ณธ ์์ ์ ์ถ ์ถ์ ์ ๋งค์ฐ ๋ฐ์ด๋์ง๋ง, ๋ ์ธ๋ถํ๋ ์งํ๋ฅ ์ ์ด๋ฅผ ์ํด ๋ค๋ฅธ ์ ๊ทผ ๋ฐฉ์์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
- Promise๋ฅผ ์ฌ์ฉํ ์ฌ์ฉ์ ์ ์ ํ : ๋น๋๊ธฐ ์์ (์: ํ์ผ ์ ๋ก๋)์ ๋ํํ๊ณ ํด๋น ์งํ๋ฅ ์ ์ถ์ ํ๊ธฐ ์ํด Promise๋ฅผ ์ฌ์ฉํ๋ ์ฌ์ฉ์ ์ ์ React ํ ์ ๋ง๋ญ๋๋ค.
- Web Worker: ๊ณ์ฐ ์ง์ฝ์ ์ธ ์์ (์: ์ด๋ฏธ์ง ํฌ๊ธฐ ์กฐ์ )์ Web Worker๋ก ์คํ๋ก๋ํ์ฌ ๋ฉ์ธ ์ค๋ ๋๋ฅผ ์ฐจ๋จํ์ง ์๊ณ ๋ ๋ถ๋๋ฌ์ด ์งํ๋ฅ ์ ๋ฐ์ดํธ๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ์๋ฒ ์ ์ก ์ด๋ฒคํธ(SSE): SSE๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐฑ๊ทธ๋ผ์ด๋ ์์ ์ ์งํ๋ฅ ์ ๋ํ ์๋ฒ์์ ์ค์๊ฐ ์ ๋ฐ์ดํธ๋ฅผ ๋ฐ์ต๋๋ค.
- WebSockets: ์๋ฒ์ ์๋ฐฉํฅ ํต์ ์ ์ํด WebSockets๋ฅผ ์ฌ์ฉํ์ฌ ๋ ๋ณต์กํ ์งํ๋ฅ ์ถ์ ๋ฐ ํผ๋๋ฐฑ ๋ฉ์ปค๋์ฆ์ ํ์ฉํฉ๋๋ค.
๊ฒฐ๋ก
React์ `useFormStatus` ํ ์ ์ฌ์ฉํ์ฌ ์ค์๊ฐ ์งํ๋ฅ ๊ณ์ฐ๊ธฐ๋ฅผ ๊ตฌํํ๋ ๊ฒ์ ์์ ์ ์ถ ์ค์ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํค๋ ๋ฐ ์ ์ฉํ ๊ธฐ์ ์ ๋๋ค. ๋ช ํํ๊ณ ์ฆ๊ฐ์ ์ธ ํผ๋๋ฐฑ์ ์ ๊ณตํ๋ฉด ์ฌ์ฉ์ ๋ถ์๊ฐ์ ์ค์ด๊ณ ์ฐธ์ฌ๋๋ฅผ ๋์ด๋ฉฐ ์ ๋ขฐ๋ฅผ ๊ตฌ์ถํ ์ ์์ต๋๋ค. ์งํ๋ฅ ํ์๊ธฐ๋ฅผ ๊ตฌํํ ๋ ์ ๊ทผ์ฑ, ์ค๋ฅ ์ฒ๋ฆฌ ๋ฐ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ๊ณ ๋ คํ์ญ์์ค. `useFormStatus`๋ ๊ฐ์ํ๋ ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํ์ง๋ง ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ณต์ก์ฑ์ ๊ธฐ๋ฐ์ผ๋ก ๋์ฒด ์งํ๋ฅ ์ถ์ ๋ฐฉ๋ฒ์ ํ์ํ๋ฉด ๋ ๋์ ๊ฒฐ๊ณผ๋ฅผ ์ป์ ์ ์์ต๋๋ค. ์ฌ์ฉ์์ ์๊ตฌ ์ฌํญ๊ณผ ์ ํ๋ฆฌ์ผ์ด์ ์ ํน์ ์๊ตฌ ์ฌํญ์ ์ ์คํ๊ฒ ๊ณ ๋ คํ์ฌ ์ ์ตํ๊ณ ๋งค๋ ฅ์ ์ธ ์งํ๋ฅ ํ์๊ธฐ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.