React Portalsμ μ¬μ© μ¬λ‘, ꡬν λ°©λ², μ΄μ λ° νμ€ μ»΄ν¬λνΈ κ³μΈ΅ μΈλΆμμ μ½ν μΈ λ₯Ό λ λλ§νκΈ° μν λͺ¨λ² μ¬λ‘λ₯Ό λ€λ£¨λ μ’ ν© κ°μ΄λ.
React Portals: μ»΄ν¬λνΈ νΈλ¦¬ μΈλΆμ μ½ν μΈ λ λλ§νκΈ°
React ν¬νΈμ μμ μ»΄ν¬λνΈλ₯Ό λΆλͺ¨ μ»΄ν¬λνΈμ DOM κ³μΈ΅ μΈλΆμ μ‘΄μ¬νλ DOM λ Έλλ‘ λ λλ§νλ κ°λ ₯ν λ©μ»€λμ¦μ μ 곡ν©λλ€. μ΄ κΈ°μ μ λͺ¨λ¬, ν΄ν, κ·Έλ¦¬κ³ νμ΄μ§ μμμ μμΉ λ° μ€ννΉ μμλ₯Ό μ λ°νκ² μ μ΄ν΄μΌ νλ λ€μν μλ리μ€μμ λ§€μ° μ μ©ν©λλ€.
React ν¬νΈμ΄λ 무μμΈκ°μ?
μΌλ°μ μΈ React μ ν리μΌμ΄μ μμ μ»΄ν¬λνΈλ μ격ν κ³μΈ΅ ꡬ쑰 λ΄μμ λ λλ§λ©λλ€. λΆλͺ¨ μ»΄ν¬λνΈλ μμ μ»΄ν¬λνΈλ₯Ό ν¬ν¨νλ©°, μ΄λ λ― κ³μλ©λλ€. κ·Έλ¬λ λλ‘λ μ΄ κ΅¬μ‘°μμ λ²μ΄λμΌ ν λκ° μμ΅λλ€. λ°λ‘ μ΄ μ§μ μμ React ν¬νΈμ΄ λ±μ₯ν©λλ€. ν¬νΈμ μ¬μ©νλ©΄ μ»΄ν¬λνΈμ μ½ν μΈ λ₯Ό DOMμ λ€λ₯Έ λΆλΆμΌλ‘ λ λλ§ν μ μμΌλ©°, μ΄ λΆλΆμ΄ React νΈλ¦¬ λ΄ μ»΄ν¬λνΈμ μ§μ μ μΈ μμμ΄ μλλλΌλ κ°λ₯ν©λλ€.
μ»΄ν¬λνΈ νΈλ¦¬ λ΄ μ΄λμ λ λλ§λλ μ ν리μΌμ΄μ μ μ΅μμ λ 벨μ νμλμ΄μΌ νλ λͺ¨λ¬ μ»΄ν¬λνΈκ° μλ€κ³ μμν΄ λ³΄μΈμ. ν¬νΈμ΄ μλ€λ©΄, μ λ μμΉ μ§μ κ³Ό z-indexλ₯Ό μ¬μ©νμ¬ μ΄λ₯Ό λ¬μ±νλ €κ³ μλν μ μλλ°, μ΄λ 볡μ‘ν μ€νμΌλ§ λ¬Έμ μ μ μ¬μ μΈ μΆ©λμ μΌκΈ°ν μ μμ΅λλ€. ν¬νΈμ μ¬μ©νλ©΄ λͺ¨λ¬μ μ½ν μΈ λ₯Ό "modal-root"μ κ°μ μ μ© DOM λ Έλμ μ§μ λ λλ§νμ¬ νμ μ¬λ°λ₯Έ λ 벨μ λ λλ§λλλ‘ ν μ μμ΅λλ€.
React ν¬νΈμ μ¬μ©νλ μ΄μ λ 무μμΈκ°μ?
React ν¬νΈμ μΉ κ°λ°μ μ¬λ¬ μΌλ°μ μΈ λ¬Έμ λ₯Ό ν΄κ²°ν©λλ€:
- λͺ¨λ¬ λ° λ€μ΄μΌλ‘κ·Έ: ν¬νΈμ λͺ¨λ¬ λ° λ€μ΄μΌλ‘κ·Έλ₯Ό λ λλ§νλ λ° μ΄μμ μΈ μ루μ μ΄λ©°, λΆλͺ¨ μ»΄ν¬λνΈμ μ€νμΌλ§ λ° λ μ΄μμμ μ μ½μ λ°μ§ μκ³ λ€λ₯Έ λͺ¨λ μ½ν μΈ μμ λνλλλ‘ λ³΄μ₯ν©λλ€.
- ν΄ν λ° νμ€λ²: λͺ¨λ¬κ³Ό μ μ¬νκ², ν΄ν λ° νμ€λ²λ μ»΄ν¬λνΈ νΈλ¦¬ λ΄μμμ μμΉμ κ΄κ³μμ΄ νΉμ μμμ λν΄ μ λμ μΌλ‘ λ°°μΉλμ΄μΌ νλ κ²½μ°κ° λ§μ΅λλ€. ν¬νΈμ μ΄ νλ‘μΈμ€λ₯Ό λ¨μνν©λλ€.
- CSS μΆ©λ λ°©μ§: 볡μ‘ν λ μ΄μμ λ° μ€μ²©λ μ»΄ν¬λνΈλ₯Ό λ€λ£° λ, μμλ μ€νμΌλ‘ μΈν΄ CSS μΆ©λμ΄ λ°μν μ μμ΅λλ€. ν¬νΈμ μ¬μ©νλ©΄ νΉμ μ»΄ν¬λνΈλ₯Ό λΆλͺ¨μ DOM κ³μΈ΅ μΈλΆλ‘ λ λλ§νμ¬ μ€νμΌμ 격리ν μ μμ΅λλ€.
- ν₯μλ μ κ·Όμ±: ν¬νΈμ μκ°μ μΌλ‘ νμ΄μ§μ λ€λ₯Έ μμΉμ λ°°μΉλ μμμ ν¬μ»€μ€ μμμ DOM ꡬ쑰λ₯Ό μ μ΄ν μ μκ² νμ¬ μ κ·Όμ±μ ν₯μμν¬ μ μμ΅λλ€. μλ₯Ό λ€μ΄, λͺ¨λ¬μ΄ μ΄λ¦΄ λ ν¬μ»€μ€κ° μ¦μ λͺ¨λ¬ λ΄λΆμ λ°°μΉλλλ‘ νμ¬ ν€λ³΄λ λ° μ€ν¬λ¦° 리λ μ¬μ©μμκ² μ¬μ©μ κ²½νμ κ°μ ν μ μμ΅λλ€.
- μλνν° ν΅ν©: νΉμ DOM μꡬ μ¬νμ΄ μλ μλνν° λΌμ΄λΈλ¬λ¦¬ λλ μ»΄ν¬λνΈμ ν΅ν©ν λ, ν¬νΈμ κΈ°λ³Έ λΌμ΄λΈλ¬λ¦¬ μ½λλ₯Ό μμ νμ§ μκ³ λ νμν DOM κ΅¬μ‘°λ‘ μ½ν μΈ λ₯Ό λ λλ§νλ λ° μ μ©ν μ μμ΅λλ€. νΉμ DOM κ΅¬μ‘°κ° νμν Leaflet λλ Google Mapsμ κ°μ λ§€ν λΌμ΄λΈλ¬λ¦¬μμ ν΅ν©μ κ³ λ €ν΄λ³΄μΈμ.
React ν¬νΈ ꡬν λ°©λ²
React ν¬νΈμ μ¬μ©νλ κ²μ κ°λ¨ν©λλ€. λ€μμ λ¨κ³λ³ κ°μ΄λμ λλ€:
- DOM λ
Έλ μμ±: λ¨Όμ , ν¬νΈ μ½ν
μΈ λ₯Ό λ λλ§ν DOM λ
Έλλ₯Ό μμ±ν©λλ€. μ΄ μμ
μ μΌλ°μ μΌλ‘ `index.html` νμΌμμ μνλ©λλ€. μμ:
<div id=\"modal-root\"></div> - `ReactDOM.createPortal()` μ¬μ©:
React μ»΄ν¬λνΈμμ `ReactDOM.createPortal()` λ©μλλ₯Ό μ¬μ©νμ¬ μμ±λ DOM λ
Έλμ μ½ν
μΈ λ₯Ό λ λλ§ν©λλ€. μ΄ λ©μλλ λ κ°μ§ μΈμλ₯Ό μ·¨ν©λλ€: React λ
Έλ(λ λλ§νλ €λ μ½ν
μΈ )μ λ λλ§ν DOM λ
Έλ.
import ReactDOM from 'react-dom'; function MyComponent() { return ReactDOM.createPortal( <div>This content is rendered in the modal-root!</div>, document.getElementById('modal-root') ); } export default MyComponent; - μ»΄ν¬λνΈ λ λλ§: ν¬νΈμ ν¬ν¨νλ μ»΄ν¬λνΈλ₯Ό λ€λ₯Έ React μ»΄ν¬λνΈμ λμΌνκ² λ λλ§ν©λλ€.
function App() { return ( <div> <h1>My App</h1> <MyComponent /> </div> ); } export default App;
μ΄ μμμμ, `MyComponent`λ `App` μ»΄ν¬λνΈ λ΄λΆμ λ λλ§λμ§λ§, `MyComponent` λ΄λΆμ μ½ν μΈ λ `modal-root` μμ λ΄λΆμ λ λλ§λ©λλ€.
μμ: React ν¬νΈλ‘ λͺ¨λ¬ μ»΄ν¬λνΈ μμ±νκΈ°
React ν¬νΈμ μ¬μ©νμ¬ μμ ν λͺ¨λ¬ μ»΄ν¬λνΈλ₯Ό λ§λ€μ΄ λ΄ μλ€. μ΄ μμμλ λͺ¨λ¬μ μ΄κ³ λ«λ κΈ°λ³Έμ μΈ μ€νμΌλ§ λ° κΈ°λ₯μ΄ ν¬ν¨λμ΄ μμ΅λλ€.
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
const modalRoot = document.getElementById('modal-root');
function Modal({ children, onClose }) {
const [isOpen, setIsOpen] = useState(true);
const handleClose = () => {
setIsOpen(false);
onClose();
};
if (!isOpen) return null;
return ReactDOM.createPortal(
<div className=\"modal-overlay\">\\n <div className=\"modal\">\\n <div className=\"modal-content\">\\n {children}\\n </div>\\n <button onClick={handleClose}>Close</button>\\n </div>\\n </div>,
modalRoot
);
}
function App() {
const [showModal, setShowModal] = useState(false);
const handleOpenModal = () => {
setShowModal(true);
};
const handleCloseModal = () => {
setShowModal(false);
};
return (
<div>
<h1>My App</h1>
<button onClick={handleOpenModal}>Open Modal</button>
{showModal && (
<Modal onClose={handleCloseModal}>
<h2>Modal Content</h2>
<p>This is the content of the modal.</p>
</Modal>
)}
</div>
);
}
export default App;
μ΄ μμμμ:
- μ°λ¦¬λ `ReactDOM.createPortal()`λ₯Ό μ¬μ©νμ¬ μ½ν μΈ λ₯Ό `modal-root` μμμ λ λλ§νλ `Modal` μ»΄ν¬λνΈλ₯Ό μμ±ν©λλ€.
- `Modal` μ»΄ν¬λνΈλ `children`μ propμΌλ‘ λ°μΌλ©°, μ΄λ₯Ό ν΅ν΄ λͺ¨λ¬μ νμνλ €λ λͺ¨λ μ½ν μΈ λ₯Ό μ λ¬ν μ μμ΅λλ€.
- `onClose` propμ λͺ¨λ¬μ΄ λ«ν λ νΈμΆλλ ν¨μμ λλ€.
- `App` μ»΄ν¬λνΈλ λͺ¨λ¬μ μν(μ΄λ € μλμ§ λ«ν μλμ§)λ₯Ό κ΄λ¦¬νκ³ `Modal` μ»΄ν¬λνΈλ₯Ό 쑰건λΆλ‘ λ λλ§ν©λλ€.
λͺ¨λ¬μ νλ©΄μ μ¬λ°λ₯΄κ² λ°°μΉνλ €λ©΄ `modal-overlay` λ° `modal` ν΄λμ€μ CSS μ€νμΌλ§μ μΆκ°ν΄μΌ ν©λλ€. μμ:
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal {
background-color: white;
padding: 20px;
border-radius: 5px;
}
.modal-content {
margin-bottom: 10px;
}
ν¬νΈλ‘ μ΄λ²€νΈ μ²λ¦¬νκΈ°
ν¬νΈμ μ¬μ©ν λ ν κ°μ§ μ€μν κ³ λ € μ¬νμ μ΄λ²€νΈκ° μ²λ¦¬λλ λ°©μμ λλ€. μ΄λ²€νΈ λ²λΈλ§μ νμ€ React μ»΄ν¬λνΈμ ν¬νΈμμ λ€λ₯΄κ² μλν©λλ€.
ν¬νΈ λ΄μμ μ΄λ²€νΈκ° λ°μνλ©΄, νμμ²λΌ DOM νΈλ¦¬λ₯Ό ν΅ν΄ λ²λΈλ§λ©λλ€. κ·Έλ¬λ React μ΄λ²€νΈ μμ€ν μ ν¬νΈμ μΌλ° React λ Έλλ‘ μ·¨κΈνλ―λ‘, μ΄λ²€νΈλ ν¬νΈμ ν¬ν¨νλ React μ»΄ν¬λνΈ νΈλ¦¬λ ν΅ν΄ λ²λΈλ§λ©λλ€.
μ΄λ μ£Όμνμ§ μμΌλ©΄ μμμΉ λͺ»ν λμμΌλ‘ μ΄μ΄μ§ μ μμ΅λλ€. μλ₯Ό λ€μ΄, λΆλͺ¨ μ»΄ν¬λνΈμ ν΄λΉ μ»΄ν¬λνΈ λ΄μ μ΄λ²€νΈμ μν΄μλ§ νΈλ¦¬κ±°λμ΄μΌ νλ μ΄λ²€νΈ νΈλ€λ¬κ° μλ κ²½μ°, ν¬νΈ λ΄μ μ΄λ²€νΈμ μν΄μλ νΈλ¦¬κ±°λ μ μμ΅λλ€.
μ΄λ¬ν λ¬Έμ λ₯Ό νΌνλ €λ©΄, μ΄λ²€νΈ κ°μ²΄μμ `stopPropagation()` λ©μλλ₯Ό μ¬μ©νμ¬ μ΄λ²€νΈκ° λ μ΄μ λ²λΈλ§λμ§ μλλ‘ ν μ μμ΅λλ€. λλ Reactμ ν©μ± μ΄λ²€νΈμ μ‘°κ±΄λΆ λ λλ§μ μ¬μ©νμ¬ μ΄λ²€νΈ νΈλ€λ¬κ° νΈλ¦¬κ±°λλ μμ μ μ μ΄ν μ μμ΅λλ€.
λ€μμ μ΄λ²€νΈκ° λΆλͺ¨ μ»΄ν¬λνΈλ‘ λ²λΈλ§λμ§ μλλ‘ `stopPropagation()`μ μ¬μ©νλ μμμ λλ€:
function MyComponent() {
const handleClick = (event) => {
event.stopPropagation();
console.log('Clicked inside the portal!');
};
return ReactDOM.createPortal(
<div onClick={handleClick}>This content is rendered in the portal.</div>,
document.getElementById('portal-root')
);
}
μ΄ μμμμ, ν¬νΈ λ΄μ μ½ν μΈ λ₯Ό ν΄λ¦νλ©΄ `handleClick` ν¨μκ° νΈλ¦¬κ±°λμ§λ§, μ΄λ²€νΈλ μ΄λ€ λΆλͺ¨ μ»΄ν¬λνΈλ‘λ λ²λΈλ§λμ§ μμ κ²μ λλ€.
React ν¬νΈ μ¬μ©μ μν λͺ¨λ² μ¬λ‘
React ν¬νΈ μμ μ ν λ λͺ μ¬ν΄μΌ ν λͺ κ°μ§ λͺ¨λ² μ¬λ‘λ λ€μκ³Ό κ°μ΅λλ€:
- μ μ© DOM λ Έλ μ¬μ©: `modal-root` λλ `tooltip-root`μ κ°μ΄ ν¬νΈμ μν μ μ© DOM λ Έλλ₯Ό μμ±νμΈμ. μ΄λ ν¬νΈ μ½ν μΈ μ μμΉ μ§μ λ° μ€νμΌλ§μ κ΄λ¦¬νκΈ° μ½κ² λ§λλλ€.
- μ΄λ²€νΈ μ μ€νκ² μ²λ¦¬: ν¬νΈμ μ¬μ©ν λ μ΄λ²€νΈκ° DOM νΈλ¦¬μ React μ»΄ν¬λνΈ νΈλ¦¬λ₯Ό ν΅ν΄ μ΄λ»κ² λ²λΈλ§λλμ§ μΈμ§νμΈμ. μμμΉ λͺ»ν λμμ λ°©μ§νλ €λ©΄ `stopPropagation()` λλ μ‘°κ±΄λΆ λ λλ§μ μ¬μ©νμΈμ.
- ν¬μ»€μ€ κ΄λ¦¬: λͺ¨λ¬ λλ λ€μ΄μΌλ‘κ·Έλ₯Ό λ λλ§ν λ ν¬μ»€μ€κ° μ λλ‘ κ΄λ¦¬λλμ§ νμΈνμΈμ. λͺ¨λ¬μ΄ μ΄λ¦΄ λ ν¬μ»€μ€λ₯Ό μ¦μ λͺ¨λ¬ λ΄λΆλ‘ λ°°μΉνκ³ , λͺ¨λ¬μ΄ λ«ν λ μ΄μ ν¬μ»€μ€ μμλ‘ ν¬μ»€μ€λ₯Ό λλ리μΈμ. μ΄λ ν€λ³΄λ λ° μ€ν¬λ¦° 리λ μ¬μ©μμκ² μ κ·Όμ±μ ν₯μμν΅λλ€.
- DOM μ 리: ν¬νΈμ μ¬μ©νλ μ»΄ν¬λνΈκ° μΈλ§μ΄νΈλ λ, ν¬νΈμ μν΄ νΉλ³ν μμ±λ λͺ¨λ DOM λ Έλλ₯Ό μ 리νλμ§ νμΈνμΈμ. μ΄λ λ©λͺ¨λ¦¬ λμλ₯Ό λ°©μ§νκ³ DOMμ΄ κΉ¨λνκ² μ μ§λλλ‘ ν©λλ€.
- μ±λ₯ κ³ λ €: ν¬νΈμ μΌλ°μ μΌλ‘ μ±λ₯μ΄ μ’μ§λ§, λ§μ μμ μ½ν μΈ λ₯Ό ν¬νΈμ λ λλ§νλ©΄ μ±λ₯μ μ μ¬μ μΌλ‘ μν₯μ λ―ΈμΉ μ μμ΅λλ€. ν¬νΈμ λ λλ§νλ μ½ν μΈ μ ν¬κΈ°μ 볡μ‘μ±μ μΌλμ λμΈμ.
React ν¬νΈμ λμ
React ν¬νΈμ κ°λ ₯ν λꡬμ΄μ§λ§, μ μ¬ν κ²°κ³Όλ₯Ό λ¬μ±νκΈ° μν΄ μ¬μ©ν μ μλ λ€λ₯Έ μ κ·Ό λ°©μλ μμ΅λλ€. λͺ κ°μ§ μΌλ°μ μΈ λμμ λ€μκ³Ό κ°μ΅λλ€:
- μ λ μμΉ μ§μ λ° Z-μΈλ±μ€: CSS μ λ μμΉ μ§μ κ³Ό z-μΈλ±μ€λ₯Ό μ¬μ©νμ¬ λ€λ₯Έ μ½ν μΈ μμ μμλ₯Ό λ°°μΉν μ μμ΅λλ€. κ·Έλ¬λ μ΄ μ κ·Ό λ°©μμ λ 볡μ‘νκ³ CSS μΆ©λμ μ·¨μ½ν μ μμ΅λλ€.
- Context API: Reactμ Context APIλ μ»΄ν¬λνΈ κ°μ λ°μ΄ν°μ μνλ₯Ό 곡μ νλ λ° μ¬μ©λ μ μμΌλ©°, μ ν리μΌμ΄μ μ μνμ λ°λΌ νΉμ μμμ λ λλ§μ μ μ΄ν μ μκ² ν©λλ€.
- μλνν° λΌμ΄λΈλ¬λ¦¬: λͺ¨λ¬, ν΄ν λ° κΈ°ν μΌλ°μ μΈ UI ν¨ν΄μ μν 미리 λΉλλ μ»΄ν¬λνΈλ₯Ό μ 곡νλ μλ§μ μλνν° λΌμ΄λΈλ¬λ¦¬κ° μμ΅λλ€. μ΄λ¬ν λΌμ΄λΈλ¬λ¦¬λ μ’ μ’ λ΄λΆμ μΌλ‘ ν¬νΈμ μ¬μ©νκ±°λ μ»΄ν¬λνΈ νΈλ¦¬ μΈλΆμμ μ½ν μΈ λ₯Ό λ λλ§νλ λ체 λ©μ»€λμ¦μ μ 곡ν©λλ€.
κΈλ‘λ² κ³ λ € μ¬ν
κΈλ‘λ² μ¬μ©μλ₯Ό μν μ ν리μΌμ΄μ μ κ°λ°ν λλ νμ§ν, μ κ·Όμ±, λ¬Ένμ μ°¨μ΄μ κ°μ μμλ₯Ό κ³ λ €νλ κ²μ΄ μ€μν©λλ€. React ν¬νΈμ μ΄λ¬ν κ³ λ € μ¬νμ ν΄κ²°νλ λ° κΈ°μ¬ν μ μμ΅λλ€:
- νμ§ν (i18n): λ€λ₯Έ μΈμ΄λ‘ ν μ€νΈλ₯Ό νμν λ μμμ λ μ΄μμκ³Ό μμΉλ₯Ό μ‘°μ ν΄μΌ ν μ μμ΅λλ€. ν¬νΈμ μΈμ΄λ³ UI μμλ₯Ό λ©μΈ μ»΄ν¬λνΈ νΈλ¦¬ μΈλΆμ λ λλ§νλ λ° μ¬μ©λ μ μμ΄, λ μ΄μμμ λ€λ₯Έ μΈμ΄μ λ§κ² μ‘°μ νλ λ° λ λ§μ μ μ°μ±μ μ 곡ν©λλ€. μλ₯Ό λ€μ΄, μλμ΄ λλ νλΈλ¦¬μ΄μ κ°μ μ€λ₯Έμͺ½μμ μΌμͺ½μΌλ‘ μ°λ (RTL) μΈμ΄λ ν΄νμ΄λ λͺ¨λ¬ λ«κΈ° λ²νΌμ μμΉλ₯Ό λ€λ₯΄κ² μꡬν μ μμ΅λλ€.
- μ κ·Όμ± (a11y): μμμ μΈκΈνλ―μ΄, ν¬νΈμ μμμ ν¬μ»€μ€ μμμ DOM ꡬ쑰λ₯Ό μ μ΄ν μ μκ² νμ¬ μ κ·Όμ±μ ν₯μμν¬ μ μμ΅λλ€. μ΄λ μ€ν¬λ¦° 리λμ κ°μ 보쑰 κΈ°μ μ μμ‘΄νλ μ₯μ κ° μλ μ¬μ©μμκ² νΉν μ€μν©λλ€. ν¬νΈ κΈ°λ° UI μμκ° μ μ νκ² λ μ΄λΈλ§λκ³ ν€λ³΄λ νμμ΄ μ§κ΄μ μΈμ§ νμΈνμμμ€.
- λ¬Ένμ μ°¨μ΄: UI λμμΈ λ° μ¬μ©μ κΈ°λμΉμ λν λ¬Ένμ μ°¨μ΄λ₯Ό κ³ λ €νμμμ€. μλ₯Ό λ€μ΄, λͺ¨λ¬ λλ ν΄νμ λ°°μΉ λ° λͺ¨μμ λ¬Ένμ κ·λ²μ λ°λΌ μ‘°μ ν΄μΌ ν μ μμ΅λλ€. μΌλΆ λ¬ΈνκΆμμλ λͺ¨λ¬μ μ 체 νλ©΄ μ€λ²λ μ΄λ‘ νμνλ κ²μ΄ λ μ μ ν μ μμ§λ§, λ€λ₯Έ λ¬ΈνκΆμμλ λ μκ³ λ λ°©ν΄μ μΈ λͺ¨λ¬μ΄ μ νΈλ μ μμ΅λλ€.
- μκ°λ λ° λ μ§ νμ: λͺ¨λ¬ λλ ν΄νμ λ μ§μ μκ°μ νμν λ μ¬μ©μμ μμΉμ λ§λ μ μ ν μκ°λμ λ μ§ νμμ μ¬μ©ν΄μΌ ν©λλ€. Moment.js λλ date-fnsμ κ°μ λΌμ΄λΈλ¬λ¦¬λ μκ°λ λ³ν λ° λ μ§ νμ μ§μ μ μ μ©ν μ μμ΅λλ€.
- ν΅ν νμ: μ ν리μΌμ΄μ μ΄ κ°κ²© λλ κΈ°ν ν΅ν κ°μ νμνλ κ²½μ°, μ¬μ©μμ μ§μμ λ§λ μ¬λ°λ₯Έ ν΅ν κΈ°νΈμ νμμ μ¬μ©νμμμ€. `Intl.NumberFormat` APIλ μ¬μ©μμ λ‘μΌμΌμ λ°λΌ μ«μλ₯Ό νμννλ λ° μ¬μ©λ μ μμ΅λλ€.
μ΄λ¬ν κΈλ‘λ² κ³ λ € μ¬νμ κ³ λ €ν¨μΌλ‘μ¨, λ€μν μ¬μ©μλ₯Ό μν΄ λ ν¬κ΄μ μ΄κ³ μ¬μ©μ μΉνμ μΈ μ ν리μΌμ΄μ μ λ§λ€ μ μμ΅λλ€.
κ²°λ‘
React ν¬νΈμ νμ€ μ»΄ν¬λνΈ νΈλ¦¬ μΈλΆμ μ½ν μΈ λ₯Ό λ λλ§νκΈ° μν κ°λ ₯νκ³ λ€μ¬λ€λ₯ν λꡬμ λλ€. λͺ¨λ¬, ν΄ν, νμ€λ²μ κ°μ μΌλ°μ μΈ UI ν¨ν΄μ λν΄ κΉλνκ³ μ°μν μ루μ μ μ 곡ν©λλ€. ν¬νΈμ΄ μ΄λ»κ² μλνλμ§ μ΄ν΄νκ³ λͺ¨λ² μ¬λ‘λ₯Ό λ°λ₯΄λ©΄, λ μ μ°νκ³ μ μ§λ³΄μνκΈ° μ¬μ°λ©° μ κ·Όμ± λμ React μ ν리μΌμ΄μ μ λ§λ€ μ μμ΅λλ€.
μμ λ§μ νλ‘μ νΈμμ ν¬νΈμ μ€ννκ³ UI κ°λ° μν¬νλ‘μ°λ₯Ό λ¨μνν μ μλ λ€μν λ°©λ²μ λ°κ²¬ν΄ 보μΈμ. νλ‘λμ μ ν리μΌμ΄μ μμ ν¬νΈμ μ¬μ©ν λλ μ΄λ²€νΈ μ²λ¦¬, μ κ·Όμ± λ° κΈλ‘λ² κ³ λ € μ¬νμ λ°λμ κ³ λ €νμμμ€.
React ν¬νΈμ λ§μ€ν°ν¨μΌλ‘μ¨, React κΈ°μ μ ν λ¨κ³ λ°μ μν€κ³ κΈλ‘λ² μ¬μ©μλ₯Ό μν λμ± μ κ΅νκ³ μ¬μ©μ μΉνμ μΈ μΉ μ ν리μΌμ΄μ μ ꡬμΆν μ μμ΅λλ€.