React μ€λ₯ κ²½κ³ λ΄μμ μλ μ»΄ν¬λνΈ μ¬μμμ ꡬννμ¬ μ ν리μΌμ΄μ 볡μλ ₯μ λμ΄κ³ μνν μ¬μ©μ κ²½νμ μ 곡νλ λ°©λ²μ μμ보μΈμ. λͺ¨λ² μ¬λ‘, μ½λ μμ , κ³ κΈ κΈ°μ μ νμν©λλ€.
React μ€λ₯ κ²½κ³ λ³΅κ΅¬: ν₯μλ μ¬μ©μ κ²½νμ μν μλ μ»΄ν¬λνΈ μ¬μμ
νλ μΉ κ°λ°μμ κ²¬κ³ νκ³ λ³΅μλ ₯ μλ μ ν리μΌμ΄μ μ λ§λλ κ²μ κ°μ₯ μ€μν©λλ€. μ¬μ©μλ μκΈ°μΉ μμ μ€λ₯κ° λ°μνλλΌλ μνν κ²½νμ κΈ°λν©λλ€. μ¬μ©μ μΈν°νμ΄μ€ ꡬμΆμ μν μΈκΈ° μλ μλ°μ€ν¬λ¦½νΈ λΌμ΄λΈλ¬λ¦¬μΈ Reactλ μ€λ₯λ₯Ό μ μμ μΌλ‘ μ²λ¦¬ν μ μλ κ°λ ₯ν λ©μ»€λμ¦μΈ μ€λ₯ κ²½κ³(Error Boundaries)λ₯Ό μ 곡ν©λλ€. μ΄ κΈμμλ λ¨μν λ체 UIλ₯Ό νμνλ κ²μ λμ΄, μ¬μ©μ κ²½νκ³Ό μ ν리μΌμ΄μ μμ μ±μ ν₯μμν€κΈ° μν μλ μ»΄ν¬λνΈ μ¬μμμ μ΄μ μ λ§μΆ° μ€λ₯ κ²½κ³λ₯Ό νμ₯νλ λ°©λ²μ μμΈν μμλ΄ λλ€.
React μ€λ₯ κ²½κ³ μ΄ν΄νκΈ°
React μ€λ₯ κ²½κ³λ μμ μ»΄ν¬λνΈ νΈλ¦¬ μ΄λμμλ μλ°μ€ν¬λ¦½νΈ μ€λ₯λ₯Ό ν¬μ°©νκ³ , ν΄λΉ μ€λ₯λ₯Ό κΈ°λ‘νλ©°, μ 체 μ ν리μΌμ΄μ μ μ€λ¨μν€λ λμ λ체 UIλ₯Ό νμνλ React μ»΄ν¬λνΈμ λλ€. React 16μ λμ λ μ€λ₯ κ²½κ³λ λ λλ§ μ€, μλͺ μ£ΌκΈ° λ©μλ, κ·Έλ¦¬κ³ νμ νΈλ¦¬ μ 체μ μμ±μμμ λ°μνλ μ€λ₯λ₯Ό μ μΈμ μΌλ‘ μ²λ¦¬νλ λ°©λ²μ μ 곡ν©λλ€.
μ€λ₯ κ²½κ³λ₯Ό μ¬μ©νλ μ΄μ
- ν₯μλ μ¬μ©μ κ²½ν: μ ν리μΌμ΄μ μΆ©λμ λ°©μ§νκ³ μ μ©ν μ 보λ₯Ό μ 곡νλ λ체 UIλ₯Ό νμνμ¬ μ¬μ©μμ λΆλ§μ μ΅μνν©λλ€.
- ν₯μλ μ ν리μΌμ΄μ μμ μ±: νΉμ μ»΄ν¬λνΈ λ΄μμ μ€λ₯λ₯Ό 격리νμ¬ μ€λ₯κ° μ νλμ΄ μ 체 μ ν리μΌμ΄μ μ μν₯μ λ―ΈμΉλ κ²μ λ°©μ§ν©λλ€.
- λ¨μνλ λλ²κΉ : μ€λ₯ λ‘κΉ λ° λ³΄κ³ λ₯Ό μ€μ μ§μ€ννμ¬ λ¬Έμ λ₯Ό λ μ½κ² μλ³νκ³ μμ ν μ μμ΅λλ€.
- μ μΈμ μ€λ₯ μ²λ¦¬: React μ»΄ν¬λνΈλ‘ μ€λ₯λ₯Ό κ΄λ¦¬νμ¬ μ€λ₯ μ²λ¦¬λ₯Ό μ»΄ν¬λνΈ μν€ν μ²μ μννκ² ν΅ν©ν©λλ€.
κΈ°λ³Έ μ€λ₯ κ²½κ³ κ΅¬ν
λ€μμ μ€λ₯ κ²½κ³ μ»΄ν¬λνΈμ κΈ°λ³Έ μμ μ λλ€:
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// λ€μ λ λλ§μμ λ체 UIλ₯Ό νμνλλ‘ stateλ₯Ό μ
λ°μ΄νΈν©λλ€.
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
// μ€λ₯ λ³΄κ³ μλΉμ€μ μ€λ₯λ₯Ό κΈ°λ‘ν μλ μμ΅λλ€.
console.error(error, errorInfo);
}
render() {
if (this.state.hasError) {
// μνλ λ체 UIλ₯Ό λ λλ§ν μ μμ΅λλ€.
return λ¬Έμ κ° λ°μνμ΅λλ€.
;
}
return this.props.children;
}
}
μ€λ₯ κ²½κ³λ₯Ό μ¬μ©νλ €λ©΄ μ€λ₯λ₯Ό λ°μμν¬ μ μλ μ»΄ν¬λνΈλ₯Ό κ°μΈκΈ°λ§ νλ©΄ λ©λλ€:
μλ μ»΄ν¬λνΈ μ¬μμ: λ체 UIλ₯Ό λμ΄μ
λ체 UIλ₯Ό νμνλ κ²μ μ 체 μ ν리μΌμ΄μ μΆ©λμ λΉν΄ μλΉν κ°μ μ΄μ§λ§, μ€λ₯λ‘λΆν° μλμΌλ‘ 볡ꡬλ₯Ό μλνλ κ²μ΄ λ°λμ§ν λκ° λ§μ΅λλ€. μ΄λ μ€λ₯ κ²½κ³ λ΄μμ μ»΄ν¬λνΈλ₯Ό μ¬μμνλ λ©μ»€λμ¦μ ꡬννμ¬ λ¬μ±ν μ μμ΅λλ€.
μ»΄ν¬λνΈ μ¬μμμ κ³Όμ
μ€λ₯ ν μ»΄ν¬λνΈλ₯Ό μ¬μμνλ €λ©΄ μ μ€ν κ³ λ €κ° νμν©λλ€. λ¨μν μ»΄ν¬λνΈλ₯Ό λ€μ λ λλ§νλ©΄ λμΌν μ€λ₯κ° λ€μ λ°μν μ μμ΅λλ€. μ»΄ν¬λνΈμ μνλ₯Ό μ¬μ€μ νκ³ , μ§μ°μ΄λ μμ λ μ κ·Ό λ°©μμΌλ‘ μ€λ₯λ₯Ό μΌμΌν¨ μμ μ μ¬μλνλ κ²μ΄ μ€μν©λλ€.
μν λ° μ¬μλ λ©μ»€λμ¦μ ν΅ν μλ μ¬μμ ꡬν
λ€μμ μλ μ¬μμ κΈ°λ₯μ΄ ν¬ν¨λ κ°μ λ μ€λ₯ κ²½κ³ μ»΄ν¬λνΈμ λλ€:
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = {
hasError: false,
error: null,
errorInfo: null,
attempt: 0,
restarting: false
};
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
console.error(error, errorInfo);
this.setState({ error, errorInfo });
// μ§μ° ν μ»΄ν¬λνΈ μ¬μμμ μλν©λλ€.
this.restartComponent();
}
restartComponent = () => {
this.setState({ restarting: true, attempt: this.state.attempt + 1 });
const delay = this.props.retryDelay || 2000; // κΈ°λ³Έ μ¬μλ μ§μ° μκ° 2μ΄
setTimeout(() => {
this.setState({
hasError: false,
error: null,
errorInfo: null,
restarting: false
});
}, delay);
};
render() {
if (this.state.hasError) {
return (
λ¬Έμ κ° λ°μνμ΅λλ€.
μ€λ₯: {this.state.error && this.state.error.toString()}
μ»΄ν¬λνΈ μ€ν μ€λ₯ μ 보: {this.state.errorInfo && this.state.errorInfo.componentStack}
{this.state.restarting ? (
μ»΄ν¬λνΈ μ¬μμ μλ μ€ ({this.state.attempt})...
) : (
)}
);
}
return this.props.children;
}
}
μ΄ λ²μ μ μ£Όμ κ°μ μ¬ν:
- μ€λ₯ μΈλΆ μ 보λ₯Ό μν μν: μ΄μ μ€λ₯ κ²½κ³λ `error`μ `errorInfo`λ₯Ό μνμ μ μ₯νμ¬ μ¬μ©μμκ² λ μμΈν μ 보λ₯Ό νμνκ±°λ μ격 μλΉμ€μ κΈ°λ‘ν μ μμ΅λλ€.
- `restartComponent` λ©μλ: μ΄ λ©μλλ μνμ `restarting` νλκ·Έλ₯Ό μ€μ νκ³ `setTimeout`μ μ¬μ©νμ¬ μ¬μμμ μ§μ°μν΅λλ€. μ΄ μ§μ°μ `ErrorBoundary`μ `retryDelay` propμ ν΅ν΄ μ μ°νκ² κ΅¬μ±ν μ μμ΅λλ€.
- μ¬μμ νμκΈ°: μ»΄ν¬λνΈκ° μ¬μμμ μλνκ³ μμμ λνλ΄λ λ©μμ§κ° νμλ©λλ€.
- μλ μ¬μλ λ²νΌ: μλ μ¬μμμ΄ μ€ν¨ν κ²½μ° μ¬μ©μκ° μλμΌλ‘ μ¬μμμ νΈλ¦¬κ±°ν μ μλ μ΅μ μ μ 곡ν©λλ€.
μ¬μ© μμ:
κ³ κΈ κΈ°μ λ° κ³ λ € μ¬ν
1. μ§μμ λ°±μ€ν(Exponential Backoff)
μ€λ₯κ° μ§μλ κ°λ₯μ±μ΄ μλ μν©μμλ μ§μμ λ°±μ€ν μ λ΅μ ꡬννλ κ²μ κ³ λ €νμμμ€. μ΄λ μ¬μμ μλ μ¬μ΄μ μ§μ° μκ°μ λ리λ κ²μ ν¬ν¨ν©λλ€. μ΄λ₯Ό ν΅ν΄ λ°λ³΅μ μΈ μ€ν¨ μλλ‘ μμ€ν μ κ³ΌλΆνκ° κ±Έλ¦¬λ κ²μ λ°©μ§ν μ μμ΅λλ€.
restartComponent = () => {
this.setState({ restarting: true, attempt: this.state.attempt + 1 });
const baseDelay = this.props.retryDelay || 2000;
const delay = baseDelay * Math.pow(2, this.state.attempt); // μ§μμ λ°±μ€ν
const maxDelay = this.props.maxRetryDelay || 30000; // μ΅λ μ§μ° μκ° 30μ΄
const actualDelay = Math.min(delay, maxDelay);
setTimeout(() => {
this.setState({
hasError: false,
error: null,
errorInfo: null,
restarting: false
});
}, actualDelay);
};
2. μν· λΈλ μ΄μ»€ ν¨ν΄(Circuit Breaker Pattern)
μν· λΈλ μ΄μ»€ ν¨ν΄μ μ ν리μΌμ΄μ μ΄ μ€ν¨ν κ°λ₯μ±μ΄ λμ μμ μ λ°λ³΅μ μΌλ‘ μ€ννλ κ²μ λ°©μ§ν μ μμ΅λλ€. μ€λ₯ κ²½κ³λ κ°λ¨ν μν· λΈλ μ΄μ»€ μν μ νμ¬ μ΅κ·Ό μ€ν¨ νμλ₯Ό μΆμ νκ³ μ€ν¨μ¨μ΄ νΉμ μκ³κ°μ μ΄κ³Όνλ©΄ μΆκ° μ¬μμ μλλ₯Ό λ§μ μ μμ΅λλ€.
class ErrorBoundary extends React.Component {
// ... (μ΄μ μ½λ)
constructor(props) {
super(props);
this.state = {
hasError: false,
error: null,
errorInfo: null,
attempt: 0,
restarting: false,
failureCount: 0,
};
this.maxFailures = props.maxFailures || 3; // ν¬κΈ°νκΈ° μ μ΅λ μ€ν¨ νμ
}
componentDidCatch(error, errorInfo) {
console.error(error, errorInfo);
this.setState({
error,
errorInfo,
failureCount: this.state.failureCount + 1,
});
if (this.state.failureCount < this.maxFailures) {
this.restartComponent();
} else {
console.warn("μ»΄ν¬λνΈκ° λ무 λ§μ΄ μ€ν¨νμ΅λλ€. ν¬κΈ°ν©λλ€.");
// μ νμ μΌλ‘, λ μꡬμ μΈ μ€λ₯ λ©μμ§λ₯Ό νμν©λλ€.
}
}
restartComponent = () => {
// ... (μ΄μ μ½λ)
};
render() {
if (this.state.hasError) {
if (this.state.failureCount >= this.maxFailures) {
return (
μ»΄ν¬λνΈκ° μꡬμ μΌλ‘ μ€ν¨νμ΅λλ€.
κ³ κ° μ§μμ λ¬Έμνμμμ€.
);
}
return (
λ¬Έμ κ° λ°μνμ΅λλ€.
μ€λ₯: {this.state.error && this.state.error.toString()}
μ»΄ν¬λνΈ μ€ν μ€λ₯ μ 보: {this.state.errorInfo && this.state.errorInfo.componentStack}
{this.state.restarting ? (
μ»΄ν¬λνΈ μ¬μμ μλ μ€ ({this.state.attempt})...
) : (
)}
);
}
return this.props.children;
}
}
μ¬μ© μμ:
3. μ»΄ν¬λνΈ μν μ¬μ€μ
μ»΄ν¬λνΈλ₯Ό μ¬μμνκΈ° μ μ, κ·Έ μνλ₯Ό μλ €μ§ μνΈν μνλ‘ μ¬μ€μ νλ κ²μ΄ μ€μν©λλ€. μ΄λ μΊμλ λ°μ΄ν°λ₯Ό μ§μ°κ±°λ, μΉ΄μ΄ν°λ₯Ό μ¬μ€μ νκ±°λ, APIμμ λ°μ΄ν°λ₯Ό λ€μ κ°μ Έμ€λ κ²μ ν¬ν¨ν μ μμ΅λλ€. μ΄λ₯Ό μννλ λ°©λ²μ μ»΄ν¬λνΈμ λ°λΌ λ€λ¦ λλ€.
μΌλ°μ μΈ μ κ·Ό λ°©μ μ€ νλλ κ°μΈμ§ μ»΄ν¬λνΈμ key propμ μ¬μ©νλ κ²μ λλ€. keyλ₯Ό λ³κ²½νλ©΄ Reactκ° μ»΄ν¬λνΈλ₯Ό λ€μ λ§μ΄νΈνλλ‘ κ°μ νμ¬ ν¨κ³Όμ μΌλ‘ μνλ₯Ό μ¬μ€μ ν©λλ€.
class ErrorBoundary extends React.Component {
// ... (μ΄μ μ½λ)
constructor(props) {
super(props);
this.state = {
hasError: false,
error: null,
errorInfo: null,
attempt: 0,
restarting: false,
key: 0, // κ°μ 리λ§μ΄νΈλ₯Ό μν key
};
}
restartComponent = () => {
this.setState({
restarting: true,
attempt: this.state.attempt + 1,
key: this.state.key + 1, // κ°μ 리λ§μ΄νΈλ₯Ό μν΄ keyλ₯Ό μ¦κ°μν΅λλ€.
});
const delay = this.props.retryDelay || 2000;
setTimeout(() => {
this.setState({
hasError: false,
error: null,
errorInfo: null,
restarting: false,
});
}, delay);
};
render() {
if (this.state.hasError) {
return (
λ¬Έμ κ° λ°μνμ΅λλ€.
μ€λ₯: {this.state.error && this.state.error.toString()}
μ»΄ν¬λνΈ μ€ν μ€λ₯ μ 보: {this.state.errorInfo && this.state.errorInfo.componentStack}
{this.state.restarting ? (
μ»΄ν¬λνΈ μ¬μμ μλ μ€ ({this.state.attempt})...
) : (
)}
);
}
return React.cloneElement(this.props.children, { key: this.state.key }); // μμμκ² key μ λ¬
}
}
μ¬μ©λ²:
4. λμ μ§μ μ€λ₯ κ²½κ³
μ ν리μΌμ΄μ μ λμ λΆλΆμ λ¨μΌ μ€λ₯ κ²½κ³λ‘ κ°μΈλ κ²μ νΌνμμμ€. λμ , μ€λ₯κ° λ°μνκΈ° μ¬μ΄ νΉμ μ»΄ν¬λνΈλ μ ν리μΌμ΄μ μΉμ μ£Όμμ μ λ΅μ μΌλ‘ μ€λ₯ κ²½κ³λ₯Ό λ°°μΉνμμμ€. μ΄λ κ² νλ©΄ μ€λ₯μ μν₯μ μ ννκ³ μ ν리μΌμ΄μ μ λ€λ₯Έ λΆλΆμ΄ μ μμ μΌλ‘ κ³μ μλνλλ‘ ν μ μμ΅λλ€.
볡μ‘ν μ μ μκ±°λ μ ν리μΌμ΄μ μ μκ°ν΄ 보μμμ€. μ 체 μ ν λͺ©λ‘μ κ°μΈλ λ¨μΌ ErrorBoundary λμ κ° μ ν μΉ΄λ μ£Όμμ κ°λ³ ErrorBoundaryλ₯Ό λ μ μμ΅λλ€. μ΄λ κ² νλ©΄ ν μ ν μΉ΄λκ° λ°μ΄ν° λ¬Έμ λ‘ λ λλ§μ μ€ν¨νλλΌλ λ€λ₯Έ μ ν μΉ΄λμ λ λλ§μ μν₯μ λ―ΈμΉμ§ μμ΅λλ€.
5. λ‘κΉ λ° λͺ¨λν°λ§
μ€λ₯ κ²½κ³μ μν΄ ν¬μ°©λ μ€λ₯λ₯Ό Sentry, Rollbar λλ Bugsnagκ³Ό κ°μ μ격 μ€λ₯ μΆμ μλΉμ€μ κΈ°λ‘νλ κ²μ΄ νμμ μ λλ€. μ΄λ₯Ό ν΅ν΄ μ ν리μΌμ΄μ μ μνλ₯Ό λͺ¨λν°λ§νκ³ , λ°λ³΅λλ λ¬Έμ λ₯Ό μλ³νλ©°, μ€λ₯ μ²λ¦¬ μ λ΅μ ν¨κ³Όλ₯Ό μΆμ ν μ μμ΅λλ€.
`componentDidCatch` λ©μλμμ μ€λ₯ λ° μ€λ₯ μ 보λ₯Ό μ νν μ€λ₯ μΆμ μλΉμ€λ‘ 보λ΄μμμ€:
componentDidCatch(error, errorInfo) {
console.error(error, errorInfo);
Sentry.captureException(error, { extra: errorInfo }); // Sentry μ¬μ© μμ
this.setState({ error, errorInfo });
this.restartComponent();
}
6. λ€μν μ€λ₯ μ ν μ²λ¦¬
λͺ¨λ μ€λ₯κ° λμΌνκ² μμ±λμ§λ μμ΅λλ€. μΌλΆ μ€λ₯λ μΌμμ μ΄κ³ 볡ꡬ κ°λ₯ν μ μμ§λ§(μ: μΌμμ μΈ λ€νΈμν¬ μ€λ¨), λ€λ₯Έ μ€λ₯λ λ μ¬κ°ν κ·Όλ³Έμ μΈ λ¬Έμ (μ: μ½λμ λ²κ·Έ)λ₯Ό λνλΌ μ μμ΅λλ€. μ€λ₯ μ 보λ₯Ό μ¬μ©νμ¬ μ€λ₯ μ²λ¦¬ λ°©λ²μ κ²°μ ν μ μμ΅λλ€.
μλ₯Ό λ€μ΄, μ§μμ μΈ μ€λ₯λ³΄λ€ μΌμμ μΈ μ€λ₯λ₯Ό λ μ κ·Ήμ μΌλ‘ μ¬μλν μ μμ΅λλ€. λν μ€λ₯ μ νμ λ°λΌ λ€λ₯Έ λ체 UIλ μ€λ₯ λ©μμ§λ₯Ό μ 곡ν μλ μμ΅λλ€.
7. μλ² μ¬μ΄λ λ λλ§(SSR) κ³ λ € μ¬ν
μ€λ₯ κ²½κ³λ μλ² μ¬μ΄λ λ λλ§(SSR) νκ²½μμλ μ¬μ©ν μ μμ΅λλ€. κ·Έλ¬λ SSRμμ μ€λ₯ κ²½κ³μ νκ³λ₯Ό μΈμ§νλ κ²μ΄ μ€μν©λλ€. μ€λ₯ κ²½κ³λ μλ²μμμ μ΄κΈ° λ λλ§ μ€μ λ°μνλ μ€λ₯λ§ ν¬μ°©ν©λλ€. μ΄λ²€νΈ μ²λ¦¬ λλ ν΄λΌμ΄μΈνΈμμμ νμ μ λ°μ΄νΈ μ€μ λ°μνλ μ€λ₯λ μλ²μ μ€λ₯ κ²½κ³μ μν΄ ν¬μ°©λμ§ μμ΅λλ€.
SSRμμλ μΌλ°μ μΌλ‘ μ μ μ€λ₯ νμ΄μ§λ₯Ό λ λλ§νκ±°λ μ¬μ©μλ₯Ό μ€λ₯ κ²½λ‘λ‘ λ¦¬λλ μ νμ¬ μ€λ₯λ₯Ό μ²λ¦¬ν©λλ€. λ λλ§ μ½λ μ£Όμμ try-catch λΈλ‘μ μ¬μ©νμ¬ μ€λ₯λ₯Ό ν¬μ°©νκ³ μ μ νκ² μ²λ¦¬ν μ μμ΅λλ€.
μ μΈκ³μ κ΄μ κ³Ό μμ
μ€λ₯ μ²λ¦¬μ 볡μλ ₯μ κ°λ μ λ€λ₯Έ λ¬Ένμ κ΅κ°μ κ±Έμ³ λ³΄νΈμ μ λλ€. κ·Έλ¬λ μ¬μ©λλ νΉμ μ λ΅κ³Ό λꡬλ λ€λ₯Έ μ§μμμ λ리 νΌμ§ κ°λ° κ΄ν λ° κΈ°μ μ€νμ λ°λΌ λ€λ₯Ό μ μμ΅λλ€.
- μμμ: μ¬μ©μ κ²½νμ΄ λ§€μ° μ€μνκ² μ¬κ²¨μ§λ μΌλ³Έμ΄λ νκ΅κ³Ό κ°μ κ΅κ°μμλ κ²¬κ³ ν μ€λ₯ μ²λ¦¬μ μ μμ μΈ κΈ°λ₯ μ νκ° κΈμ μ μΈ λΈλλ μ΄λ―Έμ§λ₯Ό μ μ§νλ λ° νμμ μΈ κ²μΌλ‘ κ°μ£Όλ©λλ€.
- μ λ½: GDPRκ³Ό κ°μ μ λ½ μ°ν© κ·μ μ λ°μ΄ν° νλΌμ΄λ²μμ 보μμ κ°μ‘°νλ©°, μ΄λ λ°μ΄ν° μ μΆμ΄λ 보μ μΉ¨ν΄λ₯Ό λ°©μ§νκΈ° μν΄ μ μ€ν μ€λ₯ μ²λ¦¬λ₯Ό νμλ‘ ν©λλ€.
- λΆλ―Έ: μ€λ¦¬μ½ 밸리μ νμ¬λ€μ μ’ μ’ μ μν κ°λ°κ³Ό λ°°ν¬λ₯Ό μ°μ μνλ©°, μ΄λ λλλ‘ μ² μ ν μ€λ₯ μ²λ¦¬μ λν κ°μ‘°κ° λν΄μ§ μ μμ΅λλ€. κ·Έλ¬λ μ ν리μΌμ΄μ μμ μ±κ³Ό μ¬μ©μ λ§μ‘±λμ λν κ΄μ¬μ΄ μ¦κ°νλ©΄μ μ€λ₯ κ²½κ³ λ° κΈ°ν μ€λ₯ μ²λ¦¬ κΈ°μ μ μ±νμ΄ λμ΄λκ³ μμ΅λλ€.
- λ¨λ―Έ: μΈν°λ· μΈνλΌκ° λ μμ μ μΈ μ§μμμλ λ€νΈμν¬ μ€λ¨ λ° κ°νμ μΈ μ°κ²°μ κ³ λ €ν μ€λ₯ μ²λ¦¬ μ λ΅μ΄ νΉν μ€μν©λλ€.
μ§λ¦¬μ μμΉμ κ΄κ³μμ΄ μ€λ₯ μ²λ¦¬μ κΈ°λ³Έ μμΉμ λμΌν©λλ€: μ ν리μΌμ΄μ μΆ©λμ λ°©μ§νκ³ , μ¬μ©μμκ² μ μ©ν νΌλλ°±μ μ 곡νλ©°, λλ²κΉ λ° λͺ¨λν°λ§μ μν΄ μ€λ₯λ₯Ό κΈ°λ‘νλ κ²μ λλ€.
μλ μ»΄ν¬λνΈ μ¬μμμ μ΄μ
- μ¬μ©μ λΆλ§ κ°μ: μ¬μ©μκ° μμ ν κ³ μ₯ λ μ ν리μΌμ΄μ μ λ§μ£Όν κ°λ₯μ±μ΄ μ€μ΄λ€μ΄ λ κΈμ μ μΈ κ²½νμΌλ‘ μ΄μ΄μ§λλ€.
- μ ν리μΌμ΄μ κ°μ©μ± ν₯μ: μλ 볡ꡬλ λ€μ΄νμμ μ΅μννκ³ μ€λ₯κ° λ°μνλλΌλ μ ν리μΌμ΄μ μ΄ κ³μ μλνλλ‘ λ³΄μ₯ν©λλ€.
- λ λΉ λ₯Έ 볡ꡬ μκ°: μ»΄ν¬λνΈλ μ¬μ©μ κ°μ μμ΄ μ€λ₯λ‘λΆν° μλμΌλ‘ 볡ꡬλ μ μμ΄ λ λΉ λ₯Έ 볡ꡬ μκ°μΌλ‘ μ΄μ΄μ§λλ€.
- μ μ§ λ³΄μ κ°μν: μλ μ¬μμμ μΌμμ μΈ μ€λ₯λ₯Ό κ°λ¦΄ μ μμ΄ μ¦κ°μ μΈ κ°μ μ νμμ±μ μ€μ΄κ³ κ°λ°μκ° λ μ€μν λ¬Έμ μ μ§μ€ν μ μλλ‘ ν©λλ€.
μ μ¬μ μΈ λ¨μ λ° κ³ λ € μ¬ν
- 무ν 루ν κ°λ₯μ±: μ€λ₯κ° μΌμμ μ΄μ§ μμ κ²½μ° μ»΄ν¬λνΈκ° λ°λ³΅μ μΌλ‘ μ€ν¨νκ³ μ¬μμνμ¬ λ¬΄ν 루νμ λΉ μ§ μ μμ΅λλ€. μν· λΈλ μ΄μ»€ ν¨ν΄μ ꡬννλ©΄ μ΄ λ¬Έμ λ₯Ό μννλ λ° λμμ΄ λ μ μμ΅λλ€.
- 볡μ‘μ± μ¦κ°: μλ μ¬μμ κΈ°λ₯μ μΆκ°νλ©΄ μ€λ₯ κ²½κ³ μ»΄ν¬λνΈμ 볡μ‘μ±μ΄ μ¦κ°ν©λλ€.
- μ±λ₯ μ€λ²ν€λ: μ»΄ν¬λνΈλ₯Ό μ¬μμνλ©΄ μ½κ°μ μ±λ₯ μ€λ²ν€λκ° λ°μν μ μμ΅λλ€. κ·Έλ¬λ μ΄ μ€λ²ν€λλ μΌλ°μ μΌλ‘ μ 체 μ ν리μΌμ΄μ μΆ©λ λΉμ©μ λΉνλ©΄ 무μν μ μλ μμ€μ λλ€.
- μκΈ°μΉ μμ λΆμμ©: μ»΄ν¬λνΈκ° μ΄κΈ°ν λλ λ λλ§ μ€μ λΆμμ©(μ: API νΈμΆ)μ μννλ κ²½μ° μ»΄ν¬λνΈλ₯Ό μ¬μμνλ©΄ μκΈ°μΉ μμ λΆμμ©μ΄ λ°μν μ μμ΅λλ€. μ»΄ν¬λνΈκ° μ¬μμμ μ μμ μΌλ‘ μ²λ¦¬νλλ‘ μ€κ³λμλμ§ νμΈνμμμ€.
κ²°λ‘
React μ€λ₯ κ²½κ³λ React μ ν리μΌμ΄μ μμ μ€λ₯λ₯Ό μ²λ¦¬νλ κ°λ ₯νκ³ μ μΈμ μΈ λ°©λ²μ μ 곡ν©λλ€. μ€λ₯ κ²½κ³λ₯Ό μλ μ»΄ν¬λνΈ μ¬μμ κΈ°λ₯μΌλ‘ νμ₯νλ©΄ μ¬μ©μ κ²½νμ ν¬κ² ν₯μμν€κ³ μ ν리μΌμ΄μ μμ μ±μ λμ΄λ©° μ μ§ λ³΄μλ₯Ό κ°μνν μ μμ΅λλ€. μ μ¬μ μΈ λ¨μ μ μ μ€νκ² κ³ λ €νκ³ μ μ ν μμ μ₯μΉλ₯Ό ꡬνν¨μΌλ‘μ¨ μλ μ»΄ν¬λνΈ μ¬μμμ νμ©νμ¬ λ 볡μλ ₯ μκ³ μ¬μ©μ μΉνμ μΈ μΉ μ ν리μΌμ΄μ μ λ§λ€ μ μμ΅λλ€.
μ΄λ¬ν κΈ°μ μ ν΅ν©ν¨μΌλ‘μ¨ μ ν리μΌμ΄μ μ μκΈ°μΉ μμ μ€λ₯λ₯Ό λ μ μ²λ¦¬ν μ μκ² λμ΄ μ μΈκ³ μ¬μ©μμκ² λ λΆλλ½κ³ μ λ’°ν μ μλ κ²½νμ μ 곡ν κ²μ λλ€. νΉμ μ ν리μΌμ΄μ μꡬ μ¬νμ λ§κ² μ΄λ¬ν μ λ΅μ μ‘°μ νκ³ μ€λ₯ μ²λ¦¬ λ©μ»€λμ¦μ ν¨κ³Όλ₯Ό 보μ₯νκΈ° μν΄ νμ μ² μ ν ν μ€νΈλ₯Ό μ°μ μνλ κ²μ μμ§ λ§μμμ€.