νΌ μ²λ¦¬μ λν μλ΅ μΊμ±μ λ§μ€ν°νμ¬ React μλ² μ‘μ μΌλ‘ μ΅κ³ μ μ±λ₯μ ꡬννμΈμ. νΌ κ²°κ³Ό μΊμ, μ¬μ©μ κ²½ν κ°μ , μ€μ μμ λ₯Ό ν΅ν μλ² λΆν μ΅μ ν λ°©λ²μ μμ보μΈμ.
React μλ² μ‘μ μλ΅ μΊμ±: νΌ μ²λ¦¬ κ²°κ³Ό μΊμ± μ€λͺ
React μλ² μ‘μ μ React μ»΄ν¬λνΈ λ΄μμ μ§μ νΌ μ μΆ λ° λ°μ΄ν° λ³κ²½μ μ²λ¦¬ν μ μλ κ°λ ₯ν λ°©λ²μ μ 곡ν©λλ€. κ·Έλ¬λ μ μ ν μ΅μ νκ° μμΌλ©΄ μ΄λ¬ν μ‘μ μ λΆνμν μλ² λΆν λ° λλ¦° μ¬μ©μ κ²½νμΌλ‘ μ΄μ΄μ§ μ μμ΅λλ€. μ΅μ νλ₯Ό μν ν΅μ¬ μμ μ€ νλλ νΉν νΌ μ²λ¦¬λ₯Ό λ€λ£° λ μλ² μ‘μ μ μλ΅μ μΊμ±νλ κ²μ λλ€. μ΄ λΈλ‘κ·Έ κ²μλ¬Όμμλ React μλ² μ‘μ μλ΅ μΊμ±μ 볡μ‘μ±μ μμΈν μ΄ν΄λ³΄κ³ νΌ μ²λ¦¬ κ²°κ³Όλ₯Ό ν¨κ³Όμ μΌλ‘ μΊμ±νκΈ° μν μ€μ μμ λ° λͺ¨λ² μ¬λ‘λ₯Ό μ 곡ν©λλ€.
μλ² μ‘μ μλ΅ μΊμ±μ νμμ± μ΄ν΄
μ¬μ©μκ° νΌμ μ μΆνλ©΄ μλ²μμ μλ² μ‘μ μ΄ νΈμΆλ©λλ€. μλ²λ λ°μ΄ν°λ₯Ό μ²λ¦¬νκ³ νμν μμ μ μν(μ: λ°μ΄ν°λ² μ΄μ€ μ λ°μ΄νΈ, μ΄λ©μΌ 보λ΄κΈ°)ν λ€μ μλ΅μ λ°νν©λλ€. μΊμ±μ΄ μμΌλ©΄ λμΌν μ λ ₯ λ°μ΄ν°λ‘λ λͺ¨λ νΌ μ μΆμ΄ μλ‘μ΄ μλ² μΈ‘ μ€νμ νΈλ¦¬κ±°ν©λλ€. μ΄λ νΉν 볡μ‘ν λ Όλ¦¬ λλ λμ νΈλν½μ΄ μλ νΌμ κ²½μ° λΉ λ₯΄κ² λ³λͺ© νμμ΄ λ μ μμ΅λλ€.
μλ² μ‘μ μλ΅μ μΊμ±νλ©΄ μ±κ³΅μ μΈ νΌ μ μΆ κ²°κ³Όλ₯Ό μ μ₯νκ³ νμ λμΌν μ μΆμ μ¬μ¬μ©ν μ μμ΅λλ€. μ΄λ μλ² λΆνλ₯Ό ν¬κ² μ€μ΄κ³ μλ΅ μκ°μ κ°μ νλ©° μ λ°μ μΈ μ¬μ©μ κ²½νμ ν₯μμν΅λλ€. λ€μκ³Ό κ°μ μλ리μ€μμ νΉν μ μ©ν©λλ€.
- νΌ λ°μ΄ν°κ° μμ£Ό λ°λ³΅λλ κ²½μ°(μ: λμΌν μ¬μ©μκ° μ¬λ¬ λ² μ μΆνλ λ¬Έμ μμ).
- μλ² μΈ‘ μ²λ¦¬κ° κ³μ° λΉμ©μ΄ λ§μ΄ λλ κ²½μ°.
- λ³κ²½λλ λ°μ΄ν°κ° μ ν리μΌμ΄μ μ λ€λ₯Έ λΆλΆμμ μμ£Ό μ‘μΈμ€λλ κ²½μ°.
κΈλ‘λ² μ μ μκ±°λ νλ«νΌμ μκ°ν΄ 보μΈμ. μ¬λ¬ κ΅κ°μ μ¬μ©μκ° μ ν 리뷰λ₯Ό μ μΆν μ μμ΅λλ€. μ¬μ©μκ° λμΌν 리뷰λ₯Ό μ¬λ¬ λ² μ μΆνλ κ²½μ°(μλ§λ μ€μλ‘ μ μΆ λ²νΌμ λ λ² ν΄λ¦νλ κ²½μ°) μλ΅μ μΊμ±νλ©΄ μλ²μμ λμΌν 리뷰λ₯Ό λ°λ³΅ν΄μ λΆνμνκ² μ²λ¦¬νλ κ²μ λ°©μ§ν μ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ μλ² λ¦¬μμ€λ₯Ό μ μ½νκ³ λΈλ νλΌμ΄λ°μ΄ λλ λμ리μ κ°μ νΌν¬ μΌν μμ¦μλ 리뷰λ₯Ό ν¨μ¨μ μΌλ‘ μ²λ¦¬ν μ μμ΅λλ€.
React μλ² μ‘μ μΊμ± μλ λ°©μ
React μλ² μ‘μ μΊμ±μ React Cacheλ₯Ό νμ©ν©λλ€. ν¨μ μΈμμ ν¨μ λ³Έλ¬Έμ κΈ°λ°μΌλ‘ μλ² μ‘μ κ²°κ³Όλ₯Ό μλμΌλ‘ μΊμ±ν©λλ€. μ¦, λμΌν μλ² μ‘μ μ΄ λμΌν μΈμλ‘ νΈμΆλλ©΄ ν¨μλ₯Ό λ€μ μ€ννλ λμ μΊμλ κ²°κ³Όκ° λ°νλ©λλ€.
κ·Έλ¬λ μλ² μ‘μ μ κΈ°λ³Έ μ½λκ° λ³κ²½λλ©΄ μΊμκ° λ¬΄ν¨νλλ€λ μ μ μ΄ν΄νλ κ²μ΄ μ€μν©λλ€. μ΄λ κ² νλ©΄ μ½λ λ°°ν¬ νμλ μ¬μ©μκ° νμ μ΅μ μ 보λ₯Ό λ°μ μ μμ΅λλ€.
κ΄λ ¨λ μ£Όμ κ΅¬μ± μμμ λν λΆμμ λ€μκ³Ό κ°μ΅λλ€.
- μλ² μ‘μ : ν΄λΌμ΄μΈνΈ μΈ‘ μνΈ μμ©μ μν΄ νΈλ¦¬κ±°λμ΄ μλ²μμ μ€νλλ ν¨μμ λλ€.
- React Cache: Reactμμ μ¬μ©νλ κΈ°λ³Έ μΊμ± λ©μ»€λμ¦μ λλ€.
- μΊμ ν€: μλ² μ‘μ μ ν¨μ μλͺ λ° μΈμλ₯Ό κΈ°λ°μΌλ‘ μμ±λ κ³ μ μλ³μμ λλ€.
- μΊμ 무ν¨ν: μΊμμμ μ€λλ λ°μ΄ν°λ₯Ό μ κ±°νλ νλ‘μΈμ€μ λλ€.
νΌ μ²λ¦¬λ₯Ό μν μλ΅ μΊμ± ꡬν
μ€μ μμ λ₯Ό μ¬μ©νμ¬ νΌ μ²λ¦¬λ₯Ό μν μλ΅ μΊμ±μ ꡬννλ λ°©λ²μ μ€λͺ ν΄ λ³΄κ² μ΅λλ€. μ νμ λν νΌλλ°±μ μ μΆνλ νΌμ΄ μλ€κ³ κ°μ ν©λλ€. νΌ μ μΆμ μ²λ¦¬ν μλ² μ‘μ μ μ μν λ€μ μλ΅μ μΊμ±νλ λ°©λ²μ μ΄ν΄λ³΄κ² μ΅λλ€.
μμ : μλ² μ‘μ μ΄ μλ νΌλλ°± νΌ
λ¨Όμ μλ² μ‘μ μ μ μν©λλ€.
// app/actions.js
'use server'
import { revalidatePath } from 'next/cache'
export async function submitFeedback(prevState, formData) {
// Simulate a database call (replace with your actual logic)
await new Promise(resolve => setTimeout(resolve, 1000));
const feedbackText = formData.get('feedback');
console.log('Submitting feedback:', feedbackText);
// In a real application, you would save the feedback to a database here.
revalidatePath('/'); // Revalidate the home route to show the updated feedback (if applicable)
return { message: 'Feedback submitted successfully!' };
}
μ΄μ μ΄ μλ² μ‘μ μ μ¬μ©νλ React μ»΄ν¬λνΈλ₯Ό λ§λλλ€.
// app/page.js
'use client'
import { useState, useTransition } from 'react';
import { submitFeedback } from './actions';
export default function Home() {
const [isPending, startTransition] = useTransition();
const [message, setMessage] = useState(null);
async function handleSubmit(formData) {
startTransition(async () => {
const result = await submitFeedback(null, formData);
setMessage(result.message);
});
}
return (
<div>
<h1>Product Feedback</h1>
<form action={handleSubmit}>
<textarea name="feedback" placeholder="Enter your feedback" />
<button type="submit" disabled={isPending}>
{isPending ? 'Submitting...' : 'Submit Feedback'}
</button>
</form>
{message && <p>{message}</p>}
</div>
);
}
μ΄ μμ μμ νΌμ μ μΆνλ©΄ submitFeedback μλ² μ‘μ
μ΄ νΈμΆλ©λλ€. handleSubmit ν¨μλ useTransitionμ μ¬μ©νμ¬ μλ² μ‘μ
μ΄ μ€νλλ λμ μνν μ¬μ©μ κ²½νμ μ 곡ν©λλ€. revalidatePath('/') νΈμΆμ νΌλλ°±μ΄ μ μΆλ ν ν κ²½λ‘κ° λ€μ κ²μ¦λλλ‘ λ³΄μ₯νμ¬ λ°μ΄ν°μ λ³κ²½ μ¬ν(μ: νΌλλ°±μ΄ ννμ΄μ§μ νμλλ κ²½μ°)μ λ°μν©λλ€.
μλ μΊμ± νμ©
κΈ°λ³Έμ μΌλ‘ Reactλ μΈμλ₯Ό κΈ°λ°μΌλ‘ μλ² μ‘μ κ²°κ³Όλ₯Ό μλμΌλ‘ μΊμ±ν©λλ€. μ¦, μ¬μ©μκ° λμΌν νΌλλ°±μ μ¬λ¬ λ² μ μΆνλ©΄ μλ² μ‘μ μ ν λ²λ§ μ€νλ©λλ€. νμ μ μΆμ μΊμλ κ²°κ³Όλ₯Ό λ°νν©λλ€.
μ΄ λμμ κ΄μ°°νλ €λ©΄ submitFeedback μλ² μ‘μ
λ΄λΆμ console.log λ¬Έμ μΆκ°ν©λλ€. νΉμ νΌλλ°± ν
μ€νΈμ 첫 λ²μ§Έ μ μΆ μμλ§ λ‘κ·Έ λ©μμ§κ° μΈμλ©λλ€. λμΌν ν
μ€νΈλ‘ νμ μ μΆμ μΊμλ κ²°κ³Όκ° μ¬μ©λκ³ μμμ λνλ΄λ λ‘κ·Έ λ©μμ§λ₯Ό νΈλ¦¬κ±°νμ§ μμ΅λλ€.
μΊμ 무ν¨ν μ΄ν΄
μΊμ 무ν¨νλ μ¬μ©μκ° μ΅μ μ 보λ₯Ό λ³Ό μ μλλ‘ νλ λ° μ€μν©λλ€. Reactλ μλ² μ‘μ μ κΈ°λ³Έ μ½λκ° λ³κ²½λλ©΄ μΊμλ₯Ό μλμΌλ‘ 무ν¨νν©λλ€.
μλ₯Ό λ€μ΄ μλ‘μ΄ μ ν¨μ± κ²μ¬ κ·μΉμ μΆκ°νμ¬ submitFeedback μλ² μ‘μ
μ μμ νλ©΄ μΊμκ° μλμΌλ‘ 무ν¨νλ©λλ€. λ€μμ νΌμ μ μΆνλ©΄ μ
λ°μ΄νΈλ μ½λλ‘ μλ² μ‘μ
μ΄ λ€μ μ€νλ©λλ€.
next/cacheμμ revalidatePath λλ revalidateTagλ₯Ό μ¬μ©νμ¬ μΊμλ₯Ό μλμΌλ‘ 무ν¨νν μλ μμ΅λλ€. revalidatePathλ νΉμ κ²½λ‘μ λν μΊμλ₯Ό 무ν¨ννλ λ°λ©΄ revalidateTagλ νΉμ νκ·Έλ‘ νκ·Έκ° μ§μ λ 리μμ€μ λν μΊμλ₯Ό 무ν¨νν©λλ€.
μμ μμ revalidatePath('/')λ νΌλλ°±μ΄ μ μΆλ ν ν κ²½λ‘λ₯Ό λ€μ κ²μ¦νλ λ° μ¬μ©λ©λλ€. μ΄λ κ² νλ©΄ λ°μ΄ν° λ³κ²½ μ¬ν(μ: ννμ΄μ§μ μ μΆλ νΌλλ°± νμ)μ΄ μ¦μ λ°μλ©λλ€.
κ³ κΈ μΊμ± μ λ΅
Reactμ μλ μΊμ±μ΄ μ’ μ’ μΆ©λΆνμ§λ§ μΊμ± λμμ λ μμΈν μ μ΄ν΄μΌ νλ μν©μ΄ μμ μ μμ΅λλ€. λ€μμ λͺ κ°μ§ κ³ κΈ μΊμ± μ λ΅μ λλ€.
1. μΈλΆνλ 무ν¨νλ₯Ό μν΄ revalidateTag μ¬μ©
νΉμ 리μμ€μ λν μΊμλ₯Ό 무ν¨ννλ €λ©΄ revalidateTagλ₯Ό μ¬μ©ν μ μμ΅λλ€. μ΄λ 볡μ‘ν λ°μ΄ν° κ΄κ³λ₯Ό λ€λ£° λ νΉν μ μ©ν©λλ€.
μλ₯Ό λ€μ΄ μ ν λͺ©λ‘μ κ°μ Έμ€λ μλ² μ‘μ
μ΄ μλ€κ³ κ°μ ν©λλ€. μλ΅μ νΉμ νκ·Έ(μ: products)λ‘ νκ·Έλ₯Ό μ§μ ν λ€μ μ νμ΄ μ
λ°μ΄νΈλ λλ§λ€ ν΄λΉ νκ·Έμ λν μΊμλ₯Ό 무ν¨νν μ μμ΅λλ€.
// app/actions.js
'use server'
import { revalidateTag } from 'next/cache'
export async function updateProduct(productId, data) {
// Update the product in the database
// ...
revalidateTag('products'); // Invalidate the cache for the 'products' tag
}
export async function getProducts() {
// Fetch the list of products from the database
// ...
return data; // The data will be cached and associated with tag 'products'
}
2. μ‘°κ±΄λΆ μΊμ± ꡬν
κ²½μ°μ λ°λΌ νΉμ 쑰건μμλ§ μλ΅μ μΊμ±ν μ μμ΅λλ€. μλ₯Ό λ€μ΄ νΌ μ μΆμ΄ μ±κ³΅ν κ²½μ°μλ§ μλ΅μ μΊμ±ν μ μμ΅λλ€.
μλ² μ‘μ κ²°κ³Όμ λ°λΌ 쑰건λΆλ‘ μΊμλ κ²°κ³Όλ₯Ό λ°ννμ¬ μ΄λ₯Ό λ¬μ±ν μ μμ΅λλ€. μλ² μ‘μ μ΄ μ€ν¨νλ©΄ κ²°κ³Όλ₯Ό μΊμ±νμ§ μκ³ μ€λ₯ λ©μμ§λ₯Ό λ°νν μ μμ΅λλ€.
3. μΊμ λ§λ£ μκ° μ€μ (μ£Όμ)
React μλ² μ‘μ μ μΊμ λ§λ£ μκ°μ μ€μ νκΈ° μν μ§μ μ μΈ λ©μ»€λμ¦μ μ 곡νμ§ μμ§λ§ μλ² μ‘μ μ λ§λ£λ₯Ό μ§μνλ μΊμ± κ³μΈ΅(μ: Redis λλ Memcached)κ³Ό κ²°ν©νμ¬ μ μ¬ν κ²°κ³Όλ₯Ό μ»μ μ μμ΅λλ€. μλ² μ‘μ μ μ¬μ©νμ¬ κΈ°λ³Έ λ Όλ¦¬λ₯Ό μ€ννκΈ° μ μ μΊμλ₯Ό νμΈνκ³ λ°μ΄ν°λ₯Ό μ°Ύμ μ μκ±°λ λ§λ£λ κ²½μ° νΉμ λ§λ£ μκ°μΌλ‘ μΊμλ₯Ό μ λ°μ΄νΈν μ μμ΅λλ€.
κ²½κ³ : μΊμ λ§λ£ μκ°μ μ€μ ν λλ λ§€μ° μ£Όμνμμμ€. λ§λ£ μκ°μ΄ λ무 μ§§μΌλ©΄ μΊμ±μ μ΄μ μ μκ² λ©λλ€. λ§λ£ μκ°μ΄ λ무 κΈΈλ©΄ μ¬μ©μκ° μ€λλ μ 보λ₯Ό λ³Ό μ μμ΅λλ€. λ§λ£ μκ°μλ§ μμ‘΄νλ λμ λ μ κ΅ν μΊμ 무ν¨ν μ λ΅(μ: κΈ°λ³Έ λ°μ΄ν°κ° λ³κ²½λ λ μΊμλ₯Ό 무ν¨ννλ μΉνν¬ μ¬μ©)μ μ¬μ©νλ κ²μ΄ μ’μ΅λλ€.
μλ² μ‘μ μλ΅ μΊμ±μ λν λͺ¨λ² μ¬λ‘
μλ² μ‘μ μλ΅ μΊμ±μ ν¨κ³Όμ μΌλ‘ νμ©νλ €λ©΄ λ€μ λͺ¨λ² μ¬λ‘λ₯Ό λ°λ₯΄μμμ€.
- μΊμ± λμ μ΄ν΄: Reactκ° μλ² μ‘μ μλ΅μ μλμΌλ‘ μΊμ±νλ λ°©λ²κ³Ό μΊμ 무ν¨νκ° μλνλ λ°©μμ μμ§νμμμ€.
revalidatePathλ°revalidateTagλ₯Ό μ μ€νκ² μ¬μ©: λΆνμν μΊμ 무ν¨νλ₯Ό λ°©μ§νκΈ° μν΄ νμν κ²½μ°μλ§ μΊμλ₯Ό 무ν¨ννμμμ€.- μΊμ μ±λ₯ λͺ¨λν°λ§: λΈλΌμ°μ κ°λ°μ λꡬ λλ μλ² μΈ‘ λͺ¨λν°λ§ λꡬλ₯Ό μ¬μ©νμ¬ μΊμ μ μ€λ₯ μ μΆμ νκ³ μ μ¬μ μΈ μΊμ± λ¬Έμ λ₯Ό μλ³νμμμ€.
- λ°μ΄ν° λ―Όκ°λ κ³ λ €: μΊμ±λλ λ°μ΄ν°λ₯Ό μΌλμ λκ³ λ―Όκ°ν μ λ³΄κ° μ€μλ‘ λ ΈμΆλμ§ μλλ‘ νμμμ€. κ°μΈ λλ κΈμ΅ λ°μ΄ν°λ₯Ό μ²λ¦¬νλ κ²½μ° μΊμ±νκΈ° μ μ ν΄λΌμ΄μΈνΈ μΈ‘ μνΈν λλ μλ² μΈ‘ λ°μ΄ν° λ§μ€νΉκ³Ό κ°μ λ체 λ°©λ²μ κ³ λ €νμμμ€.
- μ² μ ν ν μ€νΈ: μΊμ± ꡬνμ΄ μμλλ‘ μλνκ³ μ¬μ©μκ° μ΅μ μ 보λ₯Ό λ³Ό μ μλμ§ νμΈνκΈ° μν΄ μΊμ± ꡬνμ μ² μ ν ν μ€νΈνμμμ€. μμ§ μΌμ΄μ€ λ° μ€λ₯ 쑰건μ νΉν μ£Όμνμμμ€.
- μΊμ± μ λ΅ λ¬Έμν: λ€λ₯Έ κ°λ°μκ° μΊμ±μ΄ ꡬνλ λ°©μκ³Ό μ μ§ κ΄λ¦¬ λ°©λ²μ μ΄ν΄ν μ μλλ‘ μΊμ± μ λ΅μ λͺ ννκ² λ¬Έμννμμμ€.
μμ : κ΅μ μ¬μ©μ νλ‘ν μ λ°μ΄νΈ
μ¬μ©μκ° μ νΈνλ μΈμ΄, μκ°λ λ° μ°λ½μ² μΈλΆ μ 보λ₯Ό ν¬ν¨νμ¬ νλ‘ν μ 보λ₯Ό μ λ°μ΄νΈν μ μλ κΈλ‘λ² μμ λ―Έλμ΄ νλ«νΌμ μμν΄ λ³΄μμμ€. κ° μ λ°μ΄νΈλ λ³κ²½ μ¬νμ λ°μ΄ν°λ² μ΄μ€μ μ μ₯νλ μλ² μ‘μ μ νΈλ¦¬κ±°ν©λλ€. μ¬μ©μκ° μμ£Ό νλ‘νμ μ λ°μ΄νΈνκ³ μ’ μ’ λμΌνκ±°λ μ μ¬ν μ λ³΄λ‘ μ λ°μ΄νΈνκΈ° λλ¬Έμ μ΄λ¬ν μ λ°μ΄νΈμμ μλ΅μ μΊμ±νλ©΄ μ±λ₯μ ν¬κ² ν₯μμν¬ μ μμ΅λλ€.
revalidateTagλ₯Ό μ¬μ©νμ¬ μ¬μ©μ νλ‘ν λ°μ΄ν°λ₯Ό κ³ μ ν νκ·Έ(μ: user-profile-{userId})λ‘ νκ·Έν μ μμ΅λλ€. μ¬μ©μκ° νλ‘νμ μ
λ°μ΄νΈν λλ§λ€ μλ² μ‘μ
μ ν΄λΉ νκ·Έμ λν μΊμλ₯Ό 무ν¨ννμ¬ μ¬μ©μκ° λͺ¨λ μ₯μΉμ μμΉμμ μ΅μ λ²μ μ νλ‘ν μ 보λ₯Ό λ³Ό μ μλλ‘ ν©λλ€.
λν μ¬μ©μκ° μ νΈνλ μΈμ΄λ₯Ό λ³κ²½νλ κ²½μ°λ₯Ό κ³ λ €νμμμ€. μ΄ λ³κ²½ μ¬νμ μ ν리μΌμ΄μ μ μ¬λ¬ λΆλΆμμ UI λ λλ§μ μν₯μ λ―ΈμΉ μ μμ΅λλ€. μ¬μ©μ νλ‘νμ λν μΊμλ₯Ό 무ν¨ννλ©΄ UIκ° μ¬λ°λ₯Έ μΈμ΄ μ€μ μΌλ‘ μ¦μ μ λ°μ΄νΈλ©λλ€.
μΌλ°μ μΈ ν¨μ λ° νΌνλ λ°©λ²
μλ² μ‘μ μλ΅ μΊμ±μ μ±λ₯μ ν¬κ² ν₯μμν¬ μ μμ§λ§ μ£Όμν΄μΌ ν λͺ κ°μ§ μΌλ°μ μΈ ν¨μ μ΄ μμ΅λλ€.
- κ³Όλν μΊμ±: μμ£Ό λ³κ²½λλ λ°μ΄ν°λ₯Ό μΊμ±νλ©΄ μ¬μ©μκ° μ€λλ μ 보λ₯Ό λ³Ό μ μμ΅λλ€. μΊμκ° μ κΈ°μ μΌλ‘ μ λ°μ΄νΈλλλ‘ μΊμ 무ν¨ν μ λ΅μ μ¬μ©νμμμ€.
- κ³Όμ μΊμ±: μΊμ±ν μ μλ λ°μ΄ν°λ₯Ό μΊμ±νμ§ μμΌλ©΄ λΆνμν μλ² λΆνκ° λ°μν μ μμ΅λλ€. μμ£Ό μ‘μΈμ€νλ λ°μ΄ν°λ₯Ό μΊμ±ν μ μλ κΈ°νλ₯Ό μλ³νμμμ€.
- μλͺ»λ μΊμ 무ν¨ν: μΊμλ₯Ό λ무 μμ£Ό λλ μΆ©λΆν μμ£Ό 무ν¨ννμ§ μμΌλ©΄ μ±λ₯ λ¬Έμ λλ λ°μ΄ν° λΆμΌμΉκ° λ°μν μ μμ΅λλ€. μΊμ 무ν¨ν μ λ΅μ μ μ€νκ² κ³ννμμμ€.
- μ€λ₯ 쑰건 무μ: μ€λ₯ 쑰건μ μ μ νκ² μ²λ¦¬νμ§ λͺ»νλ©΄ μκΈ°μΉ μμ μΊμ± λμμ΄ λ°μν μ μμ΅λλ€. μΊμ± ꡬνμ΄ μ€λ₯λ₯Ό μ μμ μΌλ‘ μ²λ¦¬νλμ§ νμΈνμμμ€.
- 보μ μ·¨μ½μ : λ―Όκ°ν λ°μ΄ν°λ₯Ό μμ νμ§ μκ² μΊμ±νλ©΄ μ ν리μΌμ΄μ μ΄ λ³΄μ μ·¨μ½μ μ λ ΈμΆλ μ μμ΅λλ€. λ―Όκ°ν μ 보λ₯Ό 보νΈνκΈ° μν μ‘°μΉλ₯Ό μ·¨νμμμ€.
κ²°λ‘
React μλ² μ‘μ μλ΅ μΊμ±μ νΌ μ²λ¦¬λ₯Ό μ΅μ ννκ³ React μ ν리μΌμ΄μ μ μ±λ₯μ ν₯μμν€λ κ°λ ₯ν κΈ°μ μ λλ€. μΊμ±μ΄ μλνλ λ°©μμ μ΄ν΄νκ³ λͺ¨λ² μ¬λ‘λ₯Ό λ°λ₯΄λ©΄ μλ² λΆνλ₯Ό ν¬κ² μ€μ΄κ³ μλ΅ μκ°μ κ°μ νλ©° μ λ°μ μΈ μ¬μ©μ κ²½νμ ν₯μμν¬ μ μμ΅λλ€. μΊμ± μ λ΅μ μ μ€νκ² κ³ λ €νκ³ μΊμ μ±λ₯μ λͺ¨λν°λ§νλ©° μΊμ± ꡬνμ΄ μμλλ‘ μλνλμ§ μ² μ ν ν μ€νΈνμμμ€. μ΄ κΈ°μ μ λ§μ€ν°νλ©΄ μ μΈκ³ μ¬μ©μμκ² μ°μν μ¬μ©μ κ²½νμ μ 곡νλ λ λΉ λ₯΄κ³ ν¨μ¨μ μ΄λ©° νμ₯ κ°λ₯ν React μ ν리μΌμ΄μ μ ꡬμΆν μ μμ΅λλ€.