Reactμ experimental_useFormState μ±λ₯ μ΅μ ν λΉλ²μ μμ보μΈμ. κ³ κΈ κΈ°μ μ λ°°μ νΌ μν μ²λ¦¬ μλλ₯Ό λμ΄κ³ React μ ν리μΌμ΄μ μ μ¬μ©μ κ²½νμ ν₯μμν€μΈμ.
React experimental_useFormState μ±λ₯ μ΅μ ν: νΌ μν μ²λ¦¬ μλ λ§μ€ν°νκΈ°
Reactμ experimental_useFormState ν
μ React μ»΄ν¬λνΈ λ΄μμ νΌ μνμ μλ² μ‘μ
μ κ΄λ¦¬νλ κ°λ ₯ν λ°©λ²μ μ 곡ν©λλ€. νμ§λ§ λ€λ₯Έ 볡μ‘ν λꡬμ λ§μ°¬κ°μ§λ‘, μ±λ₯ λ³λͺ© νμμ νΌνκΈ° μν΄ ν¨μ¨μ μΌλ‘ μ¬μ©νλ λ°©λ²μ μ΄ν΄νλ κ²μ΄ μ€μν©λλ€. μ΄ κ°μ΄λμμλ experimental_useFormStateλ₯Ό μ¬μ©ν λ νΌ μν μ²λ¦¬ μλλ₯Ό μ΅μ ννλ λ°©λ²μ κΈ°λ³Έ κ°λ
λΆν° κ³ κΈ κΈ°μ κΉμ§ μ¬μΈ΅μ μΌλ‘ λ€λ£Ήλλ€. μΌλ°μ μΈ ν¨μ μ μ΄ν΄λ³΄κ³ , React μ ν리μΌμ΄μ
μ΄ μ μΈκ³ μ¬μ©μμκ² λΆλλ½κ³ λ°μμ±μ΄ λ°μ΄λ μ¬μ©μ κ²½νμ μ 곡νλλ‘ λ³΄μ₯νκΈ° μν μ€ν κ°λ₯ν μ λ΅μ μ 곡ν©λλ€.
experimental_useFormState μ΄ν΄νκΈ°
μ΅μ νμ λν΄ μμ보기 μ μ, experimental_useFormStateκ° λ¬΄μμ νλμ§ κ°λ΅νκ² λ³΅μ΅ν΄ λ³΄κ² μ΅λλ€. μ΄ ν
μ μ¬μ©νλ©΄ μλ² μ‘μ
μ νΌμ λ°μΈλ©νκ³ κ·Έ κ²°κ³Ό μνλ₯Ό μ»΄ν¬λνΈ λ΄μμ μ§μ κ΄λ¦¬ν μ μμ΅λλ€. μ΄λ νΌ μ μΆ, μλ² μΈ‘ μ ν¨μ± κ²μ¬, μ¬μ©μμκ² νΌλλ°± νμ κ³Όμ μ λ¨μνν©λλ€. μ΄ ν
μ νμ¬ νΌ μνμ λ°μΈλ©λ μ‘μ
ν¨μλ₯Ό λ°νν©λλ€.
κΈ°λ³Έ μμλ λ€μκ³Ό κ°μ΅λλ€:
import { useFormState } from 'react';
import { myServerAction } from './actions';
function MyForm() {
const [state, action] = useFormState(myServerAction, { message: '' });
return (
);
}
μ΄ μμμμ myServerActionμ νΌ λ°μ΄ν°λ₯Ό μ²λ¦¬νλ μλ² ν¨μμ
λλ€. useFormState ν
μ νΌ μ μΆ μ μ΄ ν¨μλ₯Ό νΈμΆνκ³ state λ³μμ μ μ₯λλ κ²°κ³Όλ‘ μ»΄ν¬λνΈλ₯Ό μ
λ°μ΄νΈνλ κ²μ μ²λ¦¬ν©λλ€.
μΌλ°μ μΈ μ±λ₯ μ ν μμΈ
experimental_useFormStateκ° νΌ μ²λ¦¬λ₯Ό λ¨μννμ§λ§, λͺ κ°μ§ νν μ€μλ‘ μΈν΄ μ±λ₯ λ¬Έμ κ° λ°μν μ μμ΅λλ€. μ΄λ¬ν ν¨μ κ³Ό μ΄λ₯Ό νΌνλ λ°©λ²μ μ΄ν΄λ³΄κ² μ΅λλ€:
1. λΆνμν 리λ λλ§
React μ ν리μΌμ΄μ
μμ κ°μ₯ νν μ±λ₯ λ³λͺ© νμ μ€ νλλ λΆνμν 리λ λλ§μ
λλ€. μ»΄ν¬λνΈκ° 리λ λλ§λ λλ§λ€ Reactλ κ°μ DOMμ μ¬μ‘°μ ν΄μΌ νλ©°, μ΄λ νΉν 볡μ‘ν μ»΄ν¬λνΈμ κ²½μ° κ³μ° λΉμ©μ΄ λ§μ΄ λ€ μ μμ΅λλ€. experimental_useFormStateλ₯Ό λΆμ£Όμνκ² μ¬μ©νλ©΄ μ±λ₯μ μν₯μ λ―Έμ³ λΉλ²ν 리λ λλ§μ μ λ°ν μ μμ΅λλ€.
μμΈ: useFormState ν
μ μλ² μ‘μ
μ΄ μλ£λ λλ§λ€, λ°μ΄ν°κ° λ³κ²½λμ§ μμλλΌλ μλ‘μ΄ μν κ°μ²΄λ₯Ό λ°νν©λλ€. μ΄ κ°μ²΄ μλ³μμ λ³κ²½μ μ»΄ν¬λνΈμ κ·Έ μμλ€μ 리λ λλ§μ μ λ°ν©λλ€.
ν΄κ²°μ±
: useMemo λλ useCallbackμ μ¬μ©νμ¬ κ°κ° μνλ μ‘μ
ν¨μλ₯Ό λ©λͺ¨μ΄μ§ν¨μΌλ‘μ¨ λΆνμν 리λ λλ§μ λ°©μ§νμΈμ. λ°μ΄ν°κ° μ€μ λ‘ λ³κ²½λ κ²½μ°μλ§ μνλ₯Ό μ
λ°μ΄νΈνμΈμ.
μμ:
import { useFormState } from 'react';
import { useCallback, useMemo } from 'react';
import { myServerAction } from './actions';
function MyForm() {
const initialState = useMemo(() => ({ message: '' }), []);
const [state, action] = useFormState(myServerAction, initialState);
//λ©μμ§κ° λ³κ²½λμ§ μμ κ²½μ° λ¦¬λ λλ§ λ°©μ§
const memoizedState = useMemo(() => {
return state
}, [state?.message]);
const memoizedAction = useCallback((formData) => {
action(formData);
}, [action]);
return (
);
}
2. 볡μ‘ν μν μ λ°μ΄νΈ
ν¬κ±°λ κΉκ² μ€μ²©λ μν κ°μ²΄λ₯Ό μ λ°μ΄νΈνλ κ²μ λΉμ©μ΄ λ§μ΄ λ€ μ μμ΅λλ€. κ° μ λ°μ΄νΈλ 리λ λλ§μ μ λ°νλ©°, Reactλ λ³κ²½ μ¬νμ μλ³νκΈ° μν΄ μ΄μ μνμ μ μνλ₯Ό λΉκ΅ν΄μΌ ν©λλ€. 볡μ‘ν μν μ λ°μ΄νΈλ μ ν리μΌμ΄μ μ ν¬κ² λλ¦¬κ² λ§λ€ μ μμ΅λλ€.
μμΈ: experimental_useFormStateλ μλ² μ‘μ
μ΄ λ°νλ λ μ 체 μν κ°μ²΄λ₯Ό μλμΌλ‘ μ
λ°μ΄νΈν©λλ€. μν κ°μ²΄κ° ν¬κ±°λ κΉκ² μ€μ²©λ λ°μ΄ν°λ₯Ό ν¬ν¨νλ κ²½μ°, μ΄λ μ±λ₯ λ¬Έμ λ₯Ό μ΄λν μ μμ΅λλ€.
ν΄κ²°μ± : μν κ°μ²΄λ₯Ό κ°λ₯ν ν λ¨μνκ² μ μ§νμΈμ. μνμ λΆνμν λ°μ΄ν°λ₯Ό μ μ₯νμ§ λ§μΈμ. μνκ° ν¬λ€λ©΄ λ μκ³ κ΄λ¦¬νκΈ° μ¬μ΄ μ‘°κ°μΌλ‘ λλλ κ²μ κ³ λ €νμΈμ. μνμ μΌλΆλ₯Ό ν¨μ¨μ μΌλ‘ μ λ°μ΄νΈνκΈ° μν΄ λΆλ³μ±κ³Ό κ°μ κΈ°μ μ μ¬μ©νμΈμ.
μμ: λͺ¨λ νΌ λ°μ΄ν°λ₯Ό λ¨μΌ μν κ°μ²΄μ μ μ₯νλ λμ , useStateλ₯Ό μ¬μ©νμ¬ κ° νλμ κ°μ λ³λμ μν λ³μμ μ μ₯νμΈμ. μ΄λ κ² νλ©΄ λ³κ²½λ νλμ κ΄λ ¨λ μ»΄ν¬λνΈλ§ 리λ λλ§λ©λλ€.
3. λΉμ©μ΄ λ§μ΄ λλ μλ² μ‘μ
μλ² μ‘μ μ μ±λ₯μ νΌμ μ±λ₯μ μ§μ μ μΈ μν₯μ λ―ΈμΉ©λλ€. μλ² μ‘μ μ΄ λ리거λ 리μμ€λ₯Ό λ§μ΄ μ¬μ©νλ κ²½μ°, μν μ λ°μ΄νΈλ₯Ό μ§μ°μν€κ³ μ ν리μΌμ΄μ μ΄ λλ¦¬κ² λκ»΄μ§κ² λ§λλλ€.
μμΈ: μλ² μ‘μ μμμ λλ¦° λ°μ΄ν°λ² μ΄μ€ 쿼리, 볡μ‘ν κ³μ° λλ λΉν¨μ¨μ μΈ λ€νΈμν¬ μμ².
ν΄κ²°μ± : μλ² μ‘μ μ μ΅μ ννμ¬ μ€ν μκ°μ μ΅μννμΈμ. ν¨μ¨μ μΈ μκ³ λ¦¬μ¦μ μ¬μ©νκ³ , λ°μ΄ν°λ² μ΄μ€ 쿼리λ₯Ό μ΅μ ννλ©°, μμ£Ό μ‘μΈμ€νλ λ°μ΄ν°λ₯Ό μΊμνμΈμ. μ€λ μ€νλλ μμ μ λΉλκΈ°μ μΌλ‘ μ²λ¦¬νκΈ° μν΄ λ°±κ·ΈλΌμ΄λ μμ μ΄λ νλ₯Ό μ¬μ©νλ κ²μ κ³ λ €νμΈμ. μ¬μ©μ κ²½νμ μ ν΄ν μ μλ μλ² μ‘μ μ μκΈ°μΉ μμ μ€ν¨λ₯Ό λ°©μ§νκΈ° μν΄ κ°λ ₯ν μ€λ₯ μ²λ¦¬λ₯Ό ꡬννμΈμ.
4. λ©μΈ μ€λ λ μ°¨λ¨
JavaScriptλ μ±κΈ μ€λ λμ΄λ©°, μ΄λ λͺ¨λ μ½λκ° λ©μΈ μ€λ λλΌκ³ λΆλ¦¬λ λ¨μΌ μ€λ λμμ μ€νλ¨μ μλ―Έν©λλ€. μ€λ μ€νλλ μμ μ΄ λ©μΈ μ€λ λλ₯Ό μ°¨λ¨νλ©΄ λΈλΌμ°μ κ° μλ΅νμ§ μκ² λμ΄ μ’μ§ μμ μ¬μ©μ κ²½νμ μ΄λν©λλ€.
μμΈ: μλ² μ‘μ μ λκΈ°μ μμ λλ μ€νμ μ€λ μκ°μ΄ 걸리λ μ»΄ν¬λνΈ μ λ°μ΄νΈ.
ν΄κ²°μ±
: λΉλκΈ° μμ
μ μ¬μ©νμ¬ λ©μΈ μ€λ λ μ°¨λ¨μ νΌνμΈμ. λΉλκΈ° μμ
μ μ²λ¦¬νκΈ° μν΄ async/awaitλ Promiseλ₯Ό μ¬μ©νμΈμ. κ³μ° μ§μ½μ μΈ μμ
μ λ°±κ·ΈλΌμ΄λ μ€λ λλ‘ μ€νλ‘λνκΈ° μν΄ μΉ μ컀λ₯Ό μ¬μ©νλ κ²μ κ³ λ €νμΈμ. λ©μΈ μ€λ λλ₯Ό μ°¨λ¨νμ§ μκ³ λκ·λͺ¨ λ°μ΄ν° μΈνΈλ₯Ό ν¨μ¨μ μΌλ‘ λ λλ§νκΈ° μν΄ κ°μν λ° νμ΄μ§λ€μ΄μ
κ³Ό κ°μ κΈ°μ μ μ¬μ©νμΈμ.
5. κ³Όλν λ€νΈμν¬ μμ²
κ° λ€νΈμν¬ μμ²μ μ ν리μΌμ΄μ μ μ§μ° μκ°μ μΆκ°ν©λλ€. κ³Όλν λ€νΈμν¬ μμ²μ νΌ μ μΆκ³Ό μν μ λ°μ΄νΈλ₯Ό μλΉν λλ¦¬κ² λ§λ€ μ μμ΅λλ€.
μμΈ: νΌ μ ν¨μ± κ²μ¬ λλ λ°μ΄ν° κ°μ Έμ€κΈ°λ₯Ό μν μ¬λ¬ λ€νΈμν¬ μμ² μμ±. μλ²μ λλμ λ°μ΄ν° μ μ‘.
ν΄κ²°μ± : λ€νΈμν¬ μμ² μλ₯Ό μ΅μννμΈμ. κ°λ₯νλ©΄ μ¬λ¬ μμ²μ λ¨μΌ μμ²μΌλ‘ κ²°ν©νμΈμ. νμν 리μμ€λ§ λ‘λνκΈ° μν΄ μ½λ λΆν λ° μ§μ° λ‘λ©κ³Ό κ°μ κΈ°μ μ μ¬μ©νμΈμ. μλ²λ‘ 보λ΄κΈ° μ μ λ°μ΄ν°λ₯Ό μμΆνμΈμ.
κ³ κΈ μ΅μ ν κΈ°λ²
μ΄μ μΌλ°μ μΈ ν¨μ λ€μ λ€λ£¨μμΌλ, experimental_useFormState μ±λ₯μ μ΅μ ννκΈ° μν λͺ κ°μ§ κ³ κΈ κΈ°λ²μ μ΄ν΄λ³΄κ² μ΅λλ€:
1. μλ² μΈ‘ μ ν¨μ± κ²μ¬
μλ² μΈ‘μμ νΌ μ ν¨μ± κ²μ¬λ₯Ό μννλ κ²μ΄ μΌλ°μ μΌλ‘ ν΄λΌμ΄μΈνΈ μΈ‘ μ ν¨μ± κ²μ¬λ³΄λ€ λ μμ νκ³ μ λ’°ν μ μμ΅λλ€. νμ§λ§ μλ²λ‘μ λ€νΈμν¬ μμ²μ΄ νμνκΈ° λλ¬Έμ λ λ릴 μ μμ΅λλ€.
μ΅μ ν: ν΄λΌμ΄μΈνΈ μΈ‘κ³Ό μλ² μΈ‘ μ ν¨μ± κ²μ¬λ₯Ό μ‘°ν©νμ¬ κ΅¬ννμΈμ. νμ νλ λ° λ°μ΄ν° νμκ³Ό κ°μ κΈ°λ³Έ κ²μ¬μλ ν΄λΌμ΄μΈνΈ μΈ‘ μ ν¨μ± κ²μ¬λ₯Ό μ¬μ©νμΈμ. λ 볡μ‘ν μ ν¨μ± κ²μ¬λ μλ² μΈ‘μμ μννμΈμ. μ΄λ κ² νλ©΄ λΆνμν λ€νΈμν¬ μμ² μλ₯Ό μ€μ΄κ³ μ¬μ©μμκ² λ λΉ λ₯Έ νΌλλ°± 루νλ₯Ό μ 곡ν©λλ€.
μμ:
// ν΄λΌμ΄μΈνΈ μΈ‘ μ ν¨μ± κ²μ¬
function validateForm(data) {
if (!data.name) {
return 'Name is required';
}
return null;
}
// μλ² μΈ‘ μ‘μ
async function myServerAction(prevState, formData) {
const data = Object.fromEntries(formData);
//ν΄λΌμ΄μΈνΈ μΈ‘ μ ν¨μ± κ²μ¬
const clientError = validateForm(data);
if(clientError){
return {message: clientError}
}
// μλ² μΈ‘ μ ν¨μ± κ²μ¬
if (data.name.length < 3) {
return { message: 'Name must be at least 3 characters' };
}
// νΌ λ°μ΄ν° μ²λ¦¬
return { message: 'Form submitted successfully!' };
}
2. λκ΄μ μ λ°μ΄νΈ (Optimistic Updates)
λκ΄μ μ λ°μ΄νΈλ μ ν리μΌμ΄μ μ μΈμ§ μ±λ₯μ ν₯μμν€λ λ°©λ²μ μ 곡ν©λλ€. λκ΄μ μ λ°μ΄νΈλ₯Ό μ¬μ©νλ©΄ μ¬μ©μκ° νΌμ μ μΆν μ§ν μλ²μ μλ΅μ κΈ°λ€λ¦¬μ§ μκ³ μ¦μ UIλ₯Ό μ λ°μ΄νΈν©λλ€. μλ² μ‘μ μ΄ μ€ν¨νλ©΄ UIλ₯Ό μ΄μ μνλ‘ λλ릴 μ μμ΅λλ€.
μ΅μ ν: λκ΄μ μ λ°μ΄νΈλ₯Ό ꡬννμ¬ λ λ°μμ±μ΄ λ°μ΄λ μ¬μ©μ κ²½νμ μ 곡νμΈμ. μ΄λ κ² νλ©΄ μλ² μ‘μ μ΄ μλ£λλ λ° μκ°μ΄ 걸리λλΌλ μ ν리μΌμ΄μ μ΄ λ λΉ λ₯΄κ² λκ»΄μ§κ² ν μ μμ΅λλ€.
μμ:
import { useFormState, useState } from 'react';
import { myServerAction } from './actions';
function MyForm() {
const [optimisticMessage, setOptimisticMessage] = useState('');
const [state, action] = useFormState(async (prevState, formData) => {
setOptimisticMessage('Submitting...'); // λκ΄μ μ
λ°μ΄νΈ
const result = await myServerAction(prevState, formData);
if (!result.success) {
setOptimisticMessage(''); // μ€λ₯ λ°μ μ λλ리기
}
return result;
}, { message: '' });
return (
);
}
3. λλ°μ΄μ±(Debouncing) λ° μ€λ‘νλ§(Throttling)
λλ°μ΄μ±κ³Ό μ€λ‘νλ§μ ν¨μκ° μ€νλλ λΉλλ₯Ό μ ννλ κΈ°μ μ λλ€. μ΄λ μ¬μ©μ μ λ ₯μ μν΄ νΈλ¦¬κ±°λλ νΌ μ ν¨μ± κ²μ¬λ λ€λ₯Έ μμ μ μ΅μ ννλ λ° μ μ©ν μ μμ΅λλ€.
μ΅μ ν: λλ°μ΄μ±μ΄λ μ€λ‘νλ§μ μ¬μ©νμ¬ μλ² μ‘μ μ΄ νΈμΆλλ νμλ₯Ό μ€μ΄μΈμ. μ΄λ μ±λ₯μ κ°μ νκ³ λΆνμν λ€νΈμν¬ μμ²μ λ°©μ§ν μ μμ΅λλ€.
μμ:
import { useFormState } from 'react';
import { debounce } from 'lodash'; // lodash νμ
import { myServerAction } from './actions';
function MyForm() {
const [state, action] = useFormState(myServerAction, { message: '' });
const debouncedAction = debounce(action, 300); // 300msλ‘ λλ°μ΄μ€
return (
);
}
4. μ½λ λΆν λ° μ§μ° λ‘λ©
μ½λ λΆν μ μ ν리μΌμ΄μ μ νμμ λ°λΌ λ‘λν μ μλ λ μμ λ²λ€λ‘ λλλ κ³Όμ μ λλ€. μ§μ° λ‘λ©μ 리μμ€κ° νμν λλ§ λ‘λνλ κΈ°μ μ λλ€.
μ΅μ ν: μ½λ λΆν κ³Ό μ§μ° λ‘λ©μ μ¬μ©νμ¬ μ ν리μΌμ΄μ μ μ΄κΈ° λ‘λ© μκ°μ μ€μ΄μΈμ. μ΄λ μ λ°μ μΈ μ±λ₯κ³Ό μ¬μ©μ κ²½νμ κ°μ ν μ μμ΅λλ€.
5. λ©λͺ¨μ΄μ μ΄μ (Memoization) κΈ°λ²
μμ μ μ μΈκΈνμ§λ§, λ€μ μ€λͺ ν κ°μΉκ° μμ΅λλ€. λ©λͺ¨μ΄μ μ΄μ μ λΉμ©μ΄ λ§μ΄ λλ ν¨μ νΈμΆ κ²°κ³Όλ₯Ό μΊμνκ³ λμΌν μ λ ₯μ΄ λ€μ λ°μν λ μΊμλ κ²°κ³Όλ₯Ό λ°ννλ κ°λ ₯ν μ΅μ ν κΈ°λ²μ λλ€.
μ΅μ ν: useMemoμ useCallbackμ μ¬μ©νμ¬ μ»΄ν¬λνΈ λ΄μμ μ¬μ©λλ κ°κ³Ό ν¨μλ₯Ό λ©λͺ¨μ΄μ¦νμΈμ. μ΄λ λΆνμν 리λ λλ§μ λ°©μ§νκ³ μ±λ₯μ κ°μ ν μ μμ΅λλ€.
μμ:
import { useFormState, useMemo, useCallback } from 'react';
import { myServerAction } from './actions';
function MyForm() {
const [state, action] = useFormState(myServerAction, { message: '' });
// μ‘μ
ν¨μ λ©λͺ¨μ΄μ¦
const memoizedAction = useCallback(action, [action]);
// μν κ° λ©λͺ¨μ΄μ¦
const memoizedState = useMemo(() => state, [state]);
return (
);
}
λ€μν μ§μμ κ±ΈμΉ μ€μ μμ
μ΄λ¬ν κ°λ μ κΈλ‘λ² λ§₯λ½μμ μ€λͺ νκΈ° μν΄ λͺ κ°μ§ μμλ₯Ό μ΄ν΄λ³΄κ² μ΅λλ€:
- μΌλ³Έμ μ μμκ±°λ νΌ: μΌλ³Έμ ν μ μμκ±°λ μ¬μ΄νΈλ κ²°μ νΌμ
experimental_useFormStateλ₯Ό μ¬μ©ν©λλ€. μ±λ₯μ μ΅μ ννκΈ° μν΄, κ΅κ° μ°νΈλ²νΈ λ°μ΄ν°λ² μ΄μ€μ λν μ£Όμ νμΈμ μν΄ μλ² μΈ‘ μ ν¨μ± κ²μ¬λ₯Ό μ¬μ©ν©λλ€. λν μ¬μ©μκ° μ£Όλ¬Έμ μ μΆν ν, κ²°μ κ° μ²λ¦¬λκΈ° μ μλ μ¦μ μ£Όλ¬Έ νμΈ νμ΄μ§λ₯Ό 보μ¬μ£ΌκΈ° μν΄ λκ΄μ μ λ°μ΄νΈλ₯Ό ꡬνν©λλ€. - λ
μΌμ μν μ ν리μΌμ΄μ
: λ
μΌμ ν μν μ ν리μΌμ΄μ
μ μκΈ μ΄μ²΄ νΌμ
experimental_useFormStateλ₯Ό μ¬μ©ν©λλ€. 보μκ³Ό μ±λ₯μ 보μ₯νκΈ° μν΄, ν΄λΌμ΄μΈνΈ μΈ‘κ³Ό μλ² μΈ‘ μ ν¨μ± κ²μ¬λ₯Ό μ‘°ν©νμ¬ μ¬μ©ν©λλ€. ν΄λΌμ΄μΈνΈ μΈ‘ μ ν¨μ± κ²μ¬λ κΈ°λ³Έμ μΈ μ λ ₯ μ€λ₯λ₯Ό νμΈνκ³ , μλ² μΈ‘ μ ν¨μ± κ²μ¬λ κ³μ’ μμ‘ λ° κ±°λ νλμ κ°μ λ 볡μ‘ν κ²μ¬λ₯Ό μνν©λλ€. λν μ¬μ©μκ° μ΄μ²΄ κΈμ‘μ μ λ ₯ν λ κ³Όλν API νΈμΆμ λ°©μ§νκΈ° μν΄ λλ°μ΄μ±μ μ¬μ©ν©λλ€. - λΈλΌμ§μ μμ
λ―Έλμ΄ νλ«νΌ: λΈλΌμ§μ ν μμ
λ―Έλμ΄ νλ«νΌμ κ²μλ¬Ό μμ± νΌμ
experimental_useFormStateλ₯Ό μ¬μ©ν©λλ€. λμ©λ λ―Έλμ΄ μ λ‘λλ₯Ό μ²λ¦¬νκΈ° μν΄, μ΄λ―Έμ§μ λΉλμ€λ₯Ό λΉλκΈ°μ μΌλ‘ μ²λ¦¬νλ λ°±κ·ΈλΌμ΄λ μμ μ μ¬μ©ν©λλ€. λν μ½λ λΆν μ μ¬μ©νμ¬ κ²μλ¬Ό μμ± νΌμ νμν JavaScript μ½λλ§ λ‘λνμ¬ μ ν리μΌμ΄μ μ μ΄κΈ° λ‘λ© μκ°μ μ€μ λλ€. - μΈλμ μ λΆ μλΉμ€ ν¬νΈ: μΈλμ ν μ λΆ μλΉμ€ ν¬νΈμ μ μ²μ νΌμ
experimental_useFormStateλ₯Ό μ¬μ©ν©λλ€. λμνμ΄ μ νλ μ§μμμ μ±λ₯μ μ΅μ ννκΈ° μν΄, μλ²λ‘ λ°μ΄ν°λ₯Ό 보λ΄κΈ° μ μ μμΆν©λλ€. λν μ¬μ©μμ μ νμ λ°λΌ νμν νΌ νλλ§ λ‘λνκΈ° μν΄ μ§μ° λ‘λ©μ μ¬μ©ν©λλ€.
μ±λ₯ λͺ¨λν°λ§ λ° λλ²κΉ
μ±λ₯ μ΅μ νλ λ°λ³΅μ μΈ κ³Όμ μ λλ€. μ ν리μΌμ΄μ μ μ±λ₯μ λͺ¨λν°λ§νκ³ κ°μ ν μμμ μλ³νλ κ²μ΄ μ€μν©λλ€. λ λλ§ μκ°, λ€νΈμν¬ μ§μ° μκ°, λ©λͺ¨λ¦¬ μ¬μ©λκ³Ό κ°μ μ£Όμ μ§νλ₯Ό μΆμ νκΈ° μν΄ λΈλΌμ°μ κ°λ°μ λꡬμ μ±λ₯ λͺ¨λν°λ§ λꡬλ₯Ό μ¬μ©νμΈμ.
λ€μμ μ μ©ν λꡬλ€μ λλ€:
- React Profiler: React κ°λ°μ λꡬμ λ΄μ₯λ λꡬλ‘, React μ»΄ν¬λνΈμ μ±λ₯μ νλ‘νμΌλ§ν μ μμ΅λλ€.
- Chrome DevTools Performance ν: CPU μ¬μ©λ, λ©λͺ¨λ¦¬ ν λΉ, λ€νΈμν¬ νλμ ν¬ν¨ν μΉ μ ν리μΌμ΄μ μ μ±λ₯μ λΆμνκΈ° μν κ°λ ₯ν λꡬμ λλ€.
- Lighthouse: μΉ μ ν리μΌμ΄μ μ μ±λ₯, μ κ·Όμ±, SEOλ₯Ό κ°μ¬νκΈ° μν μλνλ λꡬμ λλ€.
- WebPageTest: μ μΈκ³ μ¬λ¬ μμΉμμ μΉ μ ν리μΌμ΄μ μ μ±λ₯μ ν μ€νΈν μ μλ λ¬΄λ£ λꡬμ λλ€.
λͺ¨λ² μ¬λ‘ μμ½
μμ½νμλ©΄, λ€μμ experimental_useFormState μ±λ₯μ μ΅μ ννκΈ° μν λͺ¨λ² μ¬λ‘μ
λλ€:
- 리λ λλ§ μ΅μν:
useMemoμuseCallbackμ μ¬μ©νμ¬ λΆνμν 리λ λλ§μ λ°©μ§νμΈμ. - μν μ λ°μ΄νΈ λ¨μν: μν κ°μ²΄λ₯Ό κ°λ₯ν ν λ¨μνκ² μ μ§νμΈμ.
- μλ² μ‘μ μ΅μ ν: ν¨μ¨μ μΈ μκ³ λ¦¬μ¦μ μ¬μ©νκ³ , λ°μ΄ν°λ² μ΄μ€ 쿼리λ₯Ό μ΅μ ννλ©°, μμ£Ό μ‘μΈμ€νλ λ°μ΄ν°λ₯Ό μΊμνμΈμ.
- λ©μΈ μ€λ λ μ°¨λ¨ λ°©μ§: λΉλκΈ° μμ κ³Ό μΉ μ컀λ₯Ό μ¬μ©νμ¬ λ©μΈ μ€λ λ μ°¨λ¨μ νΌνμΈμ.
- λ€νΈμν¬ μμ² μ€μ΄κΈ°: λ€νΈμν¬ μμ² μλ₯Ό μ΅μννκ³ μλ²λ‘ λ°μ΄ν°λ₯Ό 보λ΄κΈ° μ μ μμΆνμΈμ.
- μλ² μΈ‘ μ ν¨μ± κ²μ¬ μ¬μ©: ν΄λΌμ΄μΈνΈ μΈ‘κ³Ό μλ² μΈ‘ μ ν¨μ± κ²μ¬λ₯Ό μ‘°ν©νμ¬ κ΅¬ννμΈμ.
- λκ΄μ μ λ°μ΄νΈ ꡬν: λκ΄μ μ λ°μ΄νΈλ‘ λ λ°μμ±μ΄ λ°μ΄λ μ¬μ©μ κ²½νμ μ 곡νμΈμ.
- λλ°μ΄μ± λ° μ€λ‘νλ§ μ¬μ©: μλ² μ‘μ μ΄ νΈμΆλλ νμλ₯Ό μ€μ΄μΈμ.
- μ½λ λΆν λ° μ§μ° λ‘λ© μ¬μ©: μ ν리μΌμ΄μ μ μ΄κΈ° λ‘λ© μκ°μ μ€μ΄μΈμ.
- μ±λ₯ λͺ¨λν°λ§: λΈλΌμ°μ κ°λ°μ λꡬμ μ±λ₯ λͺ¨λν°λ§ λꡬλ₯Ό μ¬μ©νμ¬ μ£Όμ μ§νλ₯Ό μΆμ νμΈμ.
κ²°λ‘
experimental_useFormStateλ‘ μ±λ₯μ μ΅μ ννλ €λ©΄ Reactμ λ λλ§ λμκ³Ό νΌ μν λ° μλ² μ‘μ
μ μ²λ¦¬ν λ λ°μν μ μλ μ μ¬μ λ³λͺ© νμμ λν κΉμ μ΄ν΄κ° νμν©λλ€. μ΄ κ°μ΄λμ μ€λͺ
λ κΈ°μ μ λ°λ₯΄λ©΄, μ¬μ©μμ μμΉλ μ₯μΉμ κ΄κ³μμ΄ React μ ν리μΌμ΄μ
μ΄ λΆλλ½κ³ λ°μμ±μ΄ λ°μ΄λ μ¬μ©μ κ²½νμ μ 곡νλλ‘ ν μ μμ΅λλ€. μ ν리μΌμ΄μ
μ μ±λ₯μ μ§μμ μΌλ‘ λͺ¨λν°λ§νκ³ νμμ λ°λΌ μ΅μ ν μ λ΅μ μ‘°μ νλ κ²μ μμ§ λ§μΈμ. μ μ€ν κ³νκ³Ό ꡬνμ ν΅ν΄ experimental_useFormStateμ νμ νμ©νμ¬ κ³ μ±λ₯μ μ μΈκ³μ μΌλ‘ μ κ·Ό κ°λ₯ν μΉ μ ν리μΌμ΄μ
μ ꡬμΆν μ μμ΅λλ€. κ°λ° μ£ΌκΈ° μ΄κΈ°λΆν° μ±λ₯μ κ³ λ €νλ©΄ λμ€μ μ€μ€λ‘μκ² κ°μ¬νκ² λ κ²μ
λλ€.