React μ¬μ‘°μ μ λν ν¬κ΄μ μΈ κ°μ΄λ. κ°μ DOMμ μλ λ°©μ, λΉκ΅ μκ³ λ¦¬μ¦, 볡μ‘ν React μ ν리μΌμ΄μ μ μ±λ₯μ μ΅μ ννκΈ° μν ν΅μ¬ μ λ΅μ μ€λͺ ν©λλ€.
React μ¬μ‘°μ (Reconciliation): κ°μ DOM λΉκ΅(Diffing)μ μ±λ₯ μ΅μ νλ₯Ό μν ν΅μ¬ μ λ΅ λ§μ€ν°νκΈ°
Reactλ μ¬μ©μ μΈν°νμ΄μ€λ₯Ό ꡬμΆνκΈ° μν κ°λ ₯ν JavaScript λΌμ΄λΈλ¬λ¦¬μ λλ€. κ·Έ ν΅μ¬μλ μ¬μ‘°μ (reconciliation)μ΄λΌλ λ©μ»€λμ¦μ΄ μμΌλ©°, μ΄λ μ»΄ν¬λνΈμ μνκ° λ³κ²½λ λ μ€μ DOM(λ¬Έμ κ°μ²΄ λͺ¨λΈ)μ ν¨μ¨μ μΌλ‘ μ λ°μ΄νΈνλ μν μ ν©λλ€. μ¬μ‘°μ μ μ΄ν΄νλ κ²μ μ±λ₯μ΄ λ°μ΄λκ³ νμ₯ κ°λ₯ν React μ ν리μΌμ΄μ μ ꡬμΆνλ λ° λ§€μ° μ€μν©λλ€. μ΄ κΈμμλ κ°μ DOM, λΉκ΅ μκ³ λ¦¬μ¦, μ±λ₯ μ΅μ ν μ λ΅μ μ΄μ μ λ§μΆ° Reactμ μ¬μ‘°μ κ³Όμ μ λ΄λΆ μλ λ°©μμ κΉμ΄ νκ³ λλλ€.
React μ¬μ‘°μ μ΄λ 무μμΈκ°?
μ¬μ‘°μ μ Reactκ° DOMμ μ λ°μ΄νΈνλ λ° μ¬μ©νλ νλ‘μΈμ€μ λλ€. Reactλ DOMμ μ§μ μ‘°μνλ λμ (λ릴 μ μμ) κ°μ DOM(virtual DOM)μ μ¬μ©ν©λλ€. κ°μ DOMμ μ€μ DOMμ λ©λͺ¨λ¦¬μ κ°λ³κ² ννν κ²μ λλ€. μ»΄ν¬λνΈμ μνκ° λ³κ²½λλ©΄ Reactλ κ°μ DOMμ μ λ°μ΄νΈνκ³ , μ€μ DOMμ μ λ°μ΄νΈνλ λ° νμν μ΅μνμ λ³κ²½ μ¬νμ κ³μ°ν λ€μ, ν΄λΉ λ³κ²½ μ¬νμ μ μ©ν©λλ€. μ΄ κ³Όμ μ λͺ¨λ μν λ³κ²½ μ μ€μ DOMμ μ§μ μ‘°μνλ κ²λ³΄λ€ ν¨μ¬ ν¨μ¨μ μ λλ€.
건물(μ€μ DOM)μ μμΈν μ²μ¬μ§(κ°μ DOM)μ μ€λΉνλ κ²μΌλ‘ μκ°ν μ μμ΅λλ€. μμ λ³κ²½μ΄ νμν λλ§λ€ 건물 μ 체λ₯Ό νλ¬Όκ³ λ€μ μ§λ λμ , μ²μ¬μ§μ κΈ°μ‘΄ ꡬ쑰μ λΉκ΅νμ¬ νμν μμ λ§ ν©λλ€. μ΄λ μ€λ¨μ μ΅μννκ³ νλ‘μΈμ€λ₯Ό ν¨μ¬ λΉ λ₯΄κ² λ§λλλ€.
κ°μ DOM: Reactμ λΉλ° λ³κΈ°
κ°μ DOMμ UIμ ꡬ쑰μ λ΄μ©μ λνλ΄λ JavaScript κ°μ²΄μ λλ€. λ³Έμ§μ μΌλ‘ μ€μ DOMμ κ°λ²Όμ΄ 볡μ¬λ³Έμ λλ€. Reactλ κ°μ DOMμ μ¬μ©νμ¬ λ€μμ μνν©λλ€:
- λ³κ²½ μ¬ν μΆμ : Reactλ μ»΄ν¬λνΈμ μνκ° μ λ°μ΄νΈλ λ κ°μ DOMμ λ³κ²½ μ¬νμ μΆμ ν©λλ€.
- λΉκ΅(Diffing): κ·Έλ° λ€μ μ΄μ κ°μ DOMκ³Ό μ κ°μ DOMμ λΉκ΅νμ¬ μ€μ DOMμ μ λ°μ΄νΈνλ λ° νμν μ΅μνμ λ³κ²½ μ¬ν μλ₯Ό κ²°μ ν©λλ€. μ΄ λΉκ΅λ₯Ό λΉκ΅(diffing)λΌκ³ ν©λλ€.
- μΌκ΄ μ λ°μ΄νΈ: Reactλ μ΄λ¬ν λ³κ²½ μ¬νμ μΌκ΄ μ²λ¦¬νμ¬ λ¨μΌ μμ μΌλ‘ μ€μ DOMμ μ μ©ν¨μΌλ‘μ¨ DOM μ‘°μ νμλ₯Ό μ΅μννκ³ μ±λ₯μ ν₯μμν΅λλ€.
κ°μ DOMμ ν΅ν΄ Reactλ λͺ¨λ μμ λ³κ²½μ λν΄ μ€μ DOMμ μ§μ 건λλ¦¬μ§ μκ³ λ 볡μ‘ν UI μ λ°μ΄νΈλ₯Ό ν¨μ¨μ μΌλ‘ μνν μ μμ΅λλ€. μ΄κ²μ΄ React μ ν리μΌμ΄μ μ΄ μ§μ μ μΈ DOM μ‘°μμ μμ‘΄νλ μ ν리μΌμ΄μ λ³΄λ€ μ’ μ’ λ λΉ λ₯΄κ³ λ°μμ±μ΄ μ’μ ν΅μ¬ μ΄μ μ λλ€.
λΉκ΅ μκ³ λ¦¬μ¦(Diffing Algorithm): μ΅μνμ λ³κ²½ μ¬ν μ°ΎκΈ°
λΉκ΅ μκ³ λ¦¬μ¦μ React μ¬μ‘°μ νλ‘μΈμ€μ ν΅μ¬μ λλ€. μ΄ μκ³ λ¦¬μ¦μ μ΄μ κ°μ DOMμ μ κ°μ DOMμΌλ‘ λ³ννλ λ° νμν μ΅μνμ μμ μλ₯Ό κ²°μ ν©λλ€. Reactμ λΉκ΅ μκ³ λ¦¬μ¦μ λ κ°μ§ μ£Όμ κ°μ μ κΈ°λ°μΌλ‘ ν©λλ€:
- μλ‘ λ€λ₯Έ νμ
μ λ μ리먼νΈλ μλ‘ λ€λ₯Έ νΈλ¦¬λ₯Ό μμ±ν©λλ€. Reactκ° λ€λ₯Έ νμ
μ λ μ리먼νΈ(μ:
<div>μ<span>)λ₯Ό λ§λλ©΄ μ΄μ νΈλ¦¬λ₯Ό μμ ν λ§μ΄νΈ ν΄μ νκ³ μ νΈλ¦¬λ₯Ό λ§μ΄νΈν©λλ€. - κ°λ°μλ
keypropμ μ¬μ©νμ¬ μ¬λ¬ λ λλ§ κ°μ μμ μ μΌλ‘ μ μ§λ μ μλ μμ μ리먼νΈμ λν ννΈλ₯Ό μ€ μ μμ΅λλ€.keypropμ μ¬μ©νλ©΄ Reactκ° μ΄λ€ μ리먼νΈκ° λ³κ²½, μΆκ° λλ μ κ±°λμλμ§ ν¨μ¨μ μΌλ‘ μλ³νλ λ° λμμ΄ λ©λλ€.
λΉκ΅ μκ³ λ¦¬μ¦μ μλ λ°©μ:
- μλ¦¬λ¨ΌνΈ νμ λΉκ΅: Reactλ λ¨Όμ λ£¨νΈ μ리먼νΈλ₯Ό λΉκ΅ν©λλ€. νμ μ΄ λ€λ₯΄λ©΄ Reactλ μ΄μ νΈλ¦¬λ₯Ό ν΄μ²΄νκ³ μ²μλΆν° μ νΈλ¦¬λ₯Ό ꡬμΆν©λλ€. μλ¦¬λ¨ΌνΈ νμ μ΄ κ°μ§λ§ μμ±μ΄ λ³κ²½λ κ²½μ°, Reactλ λ³κ²½λ μμ±λ§ μ λ°μ΄νΈν©λλ€.
- μ»΄ν¬λνΈ μ
λ°μ΄νΈ: λ£¨νΈ μ리먼νΈκ° λμΌν μ»΄ν¬λνΈμΈ κ²½μ°, Reactλ μ»΄ν¬λνΈμ propsλ₯Ό μ
λ°μ΄νΈνκ³
render()λ©μλλ₯Ό νΈμΆν©λλ€. κ·Έλ° λ€μ λΉκ΅ νλ‘μΈμ€λ μ»΄ν¬λνΈμ μμμ λν΄ μ¬κ·μ μΌλ‘ κ³μλ©λλ€. - 리μ€νΈ μ¬μ‘°μ : μμ 리μ€νΈλ₯Ό λ°λ³΅ν λ Reactλ
keypropμ μ¬μ©νμ¬ μ΄λ€ μ리먼νΈκ° μΆκ°, μ κ±° λλ μ΄λλμλμ§ ν¨μ¨μ μΌλ‘ κ²°μ ν©λλ€. keyκ° μμΌλ©΄ Reactλ λͺ¨λ μμμ λ€μ λ λλ§ν΄μΌ νλ―λ‘ νΉν ν° λ¦¬μ€νΈμ κ²½μ° λΉν¨μ¨μ μΌ μ μμ΅λλ€.
μμ (keyκ° μλ κ²½μ°):
key μμ΄ λ λλ§λ μμ΄ν 리μ€νΈλ₯Ό μμν΄ λ³΄μΈμ:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
리μ€νΈμ 맨 μμ μ μμ΄ν μ μ½μ νλ©΄ Reactλ μ΄λ€ μμ΄ν μ΄ λμΌνκ³ μ΄λ€ κ²μ΄ μλ‘μ΄μ§ μ μ μκΈ° λλ¬Έμ κΈ°μ‘΄μ μΈ μμ΄ν μ λͺ¨λ λ€μ λ λλ§ν΄μΌ ν©λλ€. Reactλ 첫 λ²μ§Έ 리μ€νΈ μμ΄ν μ΄ λ³κ²½λμλ€κ³ λ³΄κ³ κ·Έ μ΄νμ *λͺ¨λ * 리μ€νΈ μμ΄ν λ λ³κ²½λμλ€κ³ κ°μ ν©λλ€. μ΄λ keyκ° μμΌλ©΄ Reactκ° μΈλ±μ€ κΈ°λ° μ¬μ‘°μ μ μ¬μ©νκΈ° λλ¬Έμ λλ€. κ°μ DOMμ 'Item 1'μ΄ 'New Item'μΌλ‘ λ³κ²½λμ΄ μ λ°μ΄νΈλμ΄μΌ νλ€κ³ "μκ°"νμ§λ§, μ€μ λ‘λ 리μ€νΈ 맨 μμ 'New Item'μ μΆκ°νμ λΏμ λλ€. κ·Έλ¬λ©΄ DOMμ 'Item 1', 'Item 2', 'Item 3'μ λν΄ λͺ¨λ μ λ°μ΄νΈλμ΄μΌ ν©λλ€.
μμ (keyκ° μλ κ²½μ°):
μ΄μ keyκ° μλ λμΌν 리μ€νΈλ₯Ό μκ°ν΄ 보μΈμ:
<ul>
<li key="item1">Item 1</li>
<li key="item2">Item 2</li>
<li key="item3">Item 3</li>
</ul>
리μ€νΈμ 맨 μμ μ μμ΄ν
μ μ½μ
νλ©΄ Reactλ μλ‘μ΄ μμ΄ν
νλλ§ μΆκ°λμκ³ κΈ°μ‘΄ μμ΄ν
λ€μ λ¨μν μλλ‘ μ΄λνλ€λ κ²μ ν¨μ¨μ μΌλ‘ νλ¨ν μ μμ΅λλ€. key propμ μ¬μ©νμ¬ κΈ°μ‘΄ μμ΄ν
μ μλ³νκ³ λΆνμν 리λ λλ§μ νΌν©λλ€. μ΄λ° λ°©μμΌλ‘ keyλ₯Ό μ¬μ©νλ©΄ κ°μ DOMμ΄ 'Item 1', 'Item 2', 'Item 3'μ λν μ΄μ DOM μ리먼νΈκ° μ€μ λ‘ λ³κ²½λμ§ μμμμ μ΄ν΄ν μ μμΌλ―λ‘ μ€μ DOMμμ μ
λ°μ΄νΈν νμκ° μμ΅λλ€. μ μ리먼νΈλ λ¨μν μ€μ DOMμ μ½μ
λ μ μμ΅λλ€.
key propμ νμ μλ¦¬λ¨ΌνΈ μ¬μ΄μμ κ³ μ ν΄μΌ ν©λλ€. μΌλ°μ μΈ ν¨ν΄μ λ°μ΄ν°μ κ³ μ IDλ₯Ό μ¬μ©νλ κ²μ
λλ€:
<ul>
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
React μ±λ₯ μ΅μ νλ₯Ό μν ν΅μ¬ μ λ΅
React μ¬μ‘°μ μ μ΄ν΄νλ κ²μ 첫 λ¨κ³μΌ λΏμ λλ€. μ§μ μΌλ‘ μ±λ₯μ΄ λ°μ΄λ React μ ν리μΌμ΄μ μ ꡬμΆνλ €λ©΄ Reactκ° λΉκ΅ νλ‘μΈμ€λ₯Ό μ΅μ ννλ λ° λμμ΄ λλ μ λ΅μ ꡬνν΄μΌ ν©λλ€. λ€μμ λͺ κ°μ§ ν΅μ¬ μ λ΅μ λλ€:
1. keyλ₯Ό ν¨κ³Όμ μΌλ‘ μ¬μ©νκΈ°
μμμ μ€λͺ
νλ―μ΄ key propμ μ¬μ©νλ κ²μ 리μ€νΈ λ λλ§μ μ΅μ ννλ λ° λ§€μ° μ€μν©λλ€. 리μ€νΈμ κ° μμ΄ν
μ μ 체μ±μ μ ννκ² λ°μνλ κ³ μ νκ³ μμ μ μΈ keyλ₯Ό μ¬μ©ν΄μΌ ν©λλ€. μμ΄ν
μ μμκ° λ³κ²½λ μ μλ κ²½μ° λ°°μ΄ μΈλ±μ€λ₯Ό keyλ‘ μ¬μ©νλ κ²μ νΌνμΈμ. μ΄λ λΆνμν 리λ λλ§κ³Ό μκΈ°μΉ μμ λμμ μ λ°ν μ μμ΅λλ€. μ’μ μ λ΅μ λ°μ΄ν°μ
μ κ³ μ μλ³μλ₯Ό keyλ‘ μ¬μ©νλ κ²μ
λλ€.
μμ: μλͺ»λ key μ¬μ©λ² (μΈλ±μ€λ₯Ό keyλ‘ μ¬μ©)
<ul>
{items.map((item, index) => (
<li key={index}>{item.name}</li>
))}
</ul>
λμ μ΄μ : itemsμ μμκ° λ³κ²½λλ©΄ κ° μμ΄ν
μ indexκ° λ³κ²½λμ΄ λ΄μ©μ΄ λ³κ²½λμ§ μμμμλ λΆκ΅¬νκ³ Reactκ° λͺ¨λ 리μ€νΈ μμ΄ν
μ 리λ λλ§νκ² λ©λλ€.
μμ: μ¬λ°λ₯Έ key μ¬μ©λ² (κ³ μ ID)
<ul>
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
μ’μ μ΄μ : item.idλ κ° μμ΄ν
μ λν μμ μ μ΄κ³ κ³ μ ν μλ³μμ
λλ€. itemsμ μμκ° λ³κ²½λλλΌλ Reactλ κ° μμ΄ν
μ ν¨μ¨μ μΌλ‘ μλ³νκ³ μ€μ λ‘ λ³κ²½λ μμ΄ν
λ§ λ¦¬λ λλ§ν μ μμ΅λλ€.
2. λΆνμν 리λ λλ§ νΌνκΈ°
μ»΄ν¬λνΈλ propsλ stateκ° λ³κ²½λ λλ§λ€ 리λ λλ§λ©λλ€. κ·Έλ¬λ λλ‘λ propsμ stateκ° μ€μ λ‘ λ³κ²½λμ§ μμμμλ μ»΄ν¬λνΈκ° 리λ λλ§λ μ μμ΅λλ€. μ΄λ νΉν 볡μ‘ν μ ν리μΌμ΄μ μμ μ±λ₯ λ¬Έμ λ₯Ό μ λ°ν μ μμ΅λλ€. λΆνμν 리λ λλ§μ λ°©μ§νκΈ° μν λͺ κ°μ§ κΈ°μ μ λ€μκ³Ό κ°μ΅λλ€:
- Pure Components: Reactλ
React.PureComponentν΄λμ€λ₯Ό μ 곡νλ©°, μ΄λshouldComponentUpdate()μμ μμ(shallow) prop λ° state λΉκ΅λ₯Ό ꡬνν©λλ€. propsμ stateκ° μκ² λ³κ²½λμ§ μμλ€λ©΄ μ»΄ν¬λνΈλ 리λ λλ§λμ§ μμ΅λλ€. μμ λΉκ΅λ propsμ state κ°μ²΄μ μ°Έμ‘°κ° λ³κ²½λμλμ§ νμΈν©λλ€. React.memo: ν¨μν μ»΄ν¬λνΈμ κ²½μ°React.memoλ₯Ό μ¬μ©νμ¬ μ»΄ν¬λνΈλ₯Ό λ©λͺ¨μ΄μ μ΄μ ν μ μμ΅λλ€.React.memoλ ν¨μν μ»΄ν¬λνΈμ κ²°κ³Όλ₯Ό λ©λͺ¨μ΄μ μ΄μ νλ κ³ μ°¨ μ»΄ν¬λνΈμ λλ€. κΈ°λ³Έμ μΌλ‘ propsλ₯Ό μκ² λΉκ΅ν©λλ€.shouldComponentUpdate(): ν΄λμ€ μ»΄ν¬λνΈμ κ²½μ°shouldComponentUpdate()μλͺ μ£ΌκΈ° λ©μλλ₯Ό ꡬννμ¬ μ»΄ν¬λνΈκ° μΈμ 리λ λλ§λμ΄μΌ νλμ§λ₯Ό μ μ΄ν μ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ 리λ λλ§μ΄ νμνμ§ μ¬λΆλ₯Ό κ²°μ νλ μ¬μ©μ μ μ λ‘μ§μ ꡬνν μ μμ΅λλ€. κ·Έλ¬λ μ΄ λ©μλλ₯Ό μ¬μ©ν λλ μ¬λ°λ₯΄κ² ꡬννμ§ μμΌλ©΄ λ²κ·Έλ₯Ό μ λ°νκΈ° μ¬μ°λ―λ‘ μ£Όμν΄μΌ ν©λλ€.
μμ: React.memo μ¬μ©νκΈ°
const MyComponent = React.memo(function MyComponent(props) {
// μ¬κΈ°μ λ λλ§ λ‘μ§
return <div>{props.data}</div>;
});
μ΄ μμμ MyComponentλ μ λ¬λ propsκ° μκ² λ³κ²½λ κ²½μ°μλ§ λ¦¬λ λλ§λ©λλ€.
3. λΆλ³μ±(Immutability)
λΆλ³μ±μ React κ°λ°μ ν΅μ¬ μμΉμ λλ€. 볡μ‘ν λ°μ΄ν° ꡬ쑰λ₯Ό λ€λ£° λλ λ°μ΄ν°λ₯Ό μ§μ λ³κ²½νλ κ²μ νΌνλ κ²μ΄ μ€μν©λλ€. λμ μνλ λ³κ²½ μ¬νμ΄ μ μ©λ λ°μ΄ν°μ μ 볡μ¬λ³Έμ λ§λμΈμ. μ΄λ κ² νλ©΄ Reactκ° λ³κ²½ μ¬νμ λ μ½κ² κ°μ§νκ³ λ¦¬λ λλ§μ μ΅μ νν μ μμ΅λλ€. λν μκΈ°μΉ μμ λΆμμ©μ λ°©μ§νκ³ μ½λλ₯Ό λ μμΈ‘ κ°λ₯νκ² λ§λλλ€.
μμ: λ°μ΄ν° λ³ν (μλͺ»λ λ°©λ²)
const items = this.state.items;
items.push({ id: 'new-item', name: 'New Item' }); // μλ³Έ λ°°μ΄μ λ³νν¨
this.setState({ items });
μμ: λΆλ³μ±μ μ μ§ν μ λ°μ΄νΈ (μ¬λ°λ₯Έ λ°©λ²)
this.setState(prevState => ({
items: [...prevState.items, { id: 'new-item', name: 'New Item' }]
}));
μ¬λ°λ₯Έ μμμλ μ κ° μ°μ°μ(...)λ₯Ό μ¬μ©νμ¬ κΈ°μ‘΄ μμ΄ν
κ³Ό μ μμ΄ν
μ ν¬ν¨νλ μ λ°°μ΄μ λ§λλλ€. μ΄λ κ² νλ©΄ μλ³Έ items λ°°μ΄μ λ³κ²½νμ§ μμΌλ―λ‘ Reactκ° λ³κ²½ μ¬νμ λ μ½κ² κ°μ§ν μ μμ΅λλ€.
4. Context μ¬μ© μ΅μ ννκΈ°
React Contextλ λͺ¨λ λ 벨μμ μλμΌλ‘ propsλ₯Ό μ λ¬ν νμ μμ΄ μ»΄ν¬λνΈ νΈλ¦¬λ₯Ό ν΅ν΄ λ°μ΄ν°λ₯Ό μ λ¬νλ λ°©λ²μ μ 곡ν©λλ€. Contextλ κ°λ ₯νμ§λ§ μλͺ» μ¬μ©νλ©΄ μ±λ₯ λ¬Έμ λ₯Ό μ λ°ν μλ μμ΅λλ€. Contextλ₯Ό μλΉνλ λͺ¨λ μ»΄ν¬λνΈλ Context κ°μ΄ λ³κ²½λ λλ§λ€ 리λ λλ§λ©λλ€. Context κ°μ΄ μμ£Ό λ³κ²½λλ©΄ λ§μ μ»΄ν¬λνΈμμ λΆνμν 리λ λλ§μ μ λ°ν μ μμ΅λλ€.
Context μ¬μ© μ΅μ ν μ λ΅:
- μ¬λ¬ Context μ¬μ©νκΈ°: ν° Contextλ₯Ό λ μκ³ κ΅¬μ²΄μ μΈ Contextλ‘ λλμΈμ. μ΄λ κ² νλ©΄ νΉμ Context κ°μ΄ λ³κ²½λ λ 리λ λλ§ν΄μΌ νλ μ»΄ν¬λνΈμ μκ° μ€μ΄λλλ€.
- Context Provider λ©λͺ¨μ΄μ μ΄μ
νκΈ°:
React.memoλ₯Ό μ¬μ©νμ¬ Context providerλ₯Ό λ©λͺ¨μ΄μ μ΄μ νμΈμ. μ΄λ κ² νλ©΄ Context κ°μ΄ λΆνμνκ² λ³κ²½λλ κ²μ λ°©μ§νμ¬ λ¦¬λ λλ§ νμλ₯Ό μ€μΌ μ μμ΅λλ€. - μ λ ν°(Selector) μ¬μ©νκΈ°: μ»΄ν¬λνΈκ° Contextμμ νμν λ°μ΄ν°λ§ μΆμΆνλ μ λ ν° ν¨μλ₯Ό λ§λμΈμ. μ΄λ₯Ό ν΅ν΄ μ»΄ν¬λνΈλ λͺ¨λ Context λ³κ²½ μ 리λ λλ§νλ λμ νμν νΉμ λ°μ΄ν°κ° λ³κ²½λ λλ§ λ¦¬λ λλ§ν μ μμ΅λλ€.
5. μ½λ λΆν (Code Splitting)
μ½λ λΆν μ μ ν리μΌμ΄μ μ νμμ λ°λΌ λ‘λν μ μλ λ μμ λ²λ€λ‘ λλλ κΈ°μ μ λλ€. μ΄λ μ ν리μΌμ΄μ μ μ΄κΈ° λ‘λ μκ°μ ν¬κ² κ°μ νκ³ λΈλΌμ°μ κ° νμ±νκ³ μ€νν΄μΌ νλ JavaScriptμ μμ μ€μΌ μ μμ΅λλ€. Reactλ μ½λ λΆν μ ꡬννλ μ¬λ¬ λ°©λ²μ μ 곡ν©λλ€:
React.lazyμSuspense: μ΄ κΈ°λ₯λ€μ μ¬μ©νλ©΄ μ»΄ν¬λνΈλ₯Ό λμ μΌλ‘ κ°μ Έμ νμν λλ§ λ λλ§ν μ μμ΅λλ€.React.lazyλ μ»΄ν¬λνΈλ₯Ό μ§μ° λ‘λ©νκ³ ,Suspenseλ μ»΄ν¬λνΈκ° λ‘λ©λλ λμ λ체 UIλ₯Ό μ 곡ν©λλ€.- λμ μν¬νΈ(Dynamic Imports): λμ μν¬νΈ(
import())λ₯Ό μ¬μ©νμ¬ λͺ¨λμ νμμ λ°λΌ λ‘λν μ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ νμν λλ§ μ½λλ₯Ό λ‘λνμ¬ μ΄κΈ° λ‘λ μκ°μ μ€μΌ μ μμ΅λλ€.
μμ: React.lazyμ Suspense μ¬μ©νκΈ°
const MyComponent = React.lazy(() => import('./MyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<MyComponent />
</Suspense>
);
}
6. λλ°μ΄μ±(Debouncing)κ³Ό μ€λ‘νλ§(Throttling)
λλ°μ΄μ±κ³Ό μ€λ‘νλ§μ ν¨μκ° μ€νλλ λΉλλ₯Ό μ ννλ κΈ°μ μ
λλ€. μ΄λ scroll, resize, input μ΄λ²€νΈμ κ°μ΄ μμ£Ό λ°μνλ μ΄λ²€νΈλ₯Ό μ²λ¦¬νλ λ° μ μ©ν μ μμ΅λλ€. μ΄λ¬ν μ΄λ²€νΈλ₯Ό λλ°μ΄μ±νκ±°λ μ€λ‘νλ§ν¨μΌλ‘μ¨ μ ν리μΌμ΄μ
μ΄ μλ΅νμ§ μκ² λλ κ²μ λ°©μ§ν μ μμ΅λλ€.
- λλ°μ΄μ±: λλ°μ΄μ±μ ν¨μκ° λ§μ§λ§μΌλ‘ νΈμΆλ ν μΌμ μκ°μ΄ μ§λ λκΉμ§ ν¨μμ μ€νμ μ§μ°μν΅λλ€. μ΄λ μ¬μ©μκ° νμ΄ννκ±°λ μ€ν¬λ‘€ν λ ν¨μκ° λ무 μμ£Ό νΈμΆλλ κ²μ λ°©μ§νλ λ° μ μ©ν©λλ€.
- μ€λ‘νλ§: μ€λ‘νλ§μ ν¨μκ° νΈμΆλ μ μλ λΉλλ₯Ό μ νν©λλ€. μ΄λ ν¨μκ° μ£Όμ΄μ§ μκ° κ°κ²© λ΄μ μ΅λ ν λ²λ§ νΈμΆλλλ‘ λ³΄μ₯ν©λλ€. μ΄λ μ¬μ©μκ° μ°½ ν¬κΈ°λ₯Ό μ‘°μ νκ±°λ μ€ν¬λ‘€ν λ ν¨μκ° λ무 μμ£Ό νΈμΆλλ κ²μ λ°©μ§νλ λ° μ μ©ν©λλ€.
7. νλ‘νμΌλ¬(Profiler) μ¬μ©νκΈ°
Reactλ μ ν리μΌμ΄μ μ μ±λ₯ λ³λͺ© νμμ μλ³νλ λ° λμμ΄ λλ κ°λ ₯ν νλ‘νμΌλ¬ λꡬλ₯Ό μ 곡ν©λλ€. νλ‘νμΌλ¬λ₯Ό μ¬μ©νλ©΄ μ»΄ν¬λνΈμ μ±λ₯μ κΈ°λ‘νκ³ λ λλ§ λ°©μμ μκ°νν μ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ λΆνμνκ² λ¦¬λ λλ§λκ±°λ λ λλ§νλ λ° μ€λ μκ°μ΄ 걸리λ μ»΄ν¬λνΈλ₯Ό μλ³νλ λ° λμμ΄ λ μ μμ΅λλ€. νλ‘νμΌλ¬λ Chrome λλ Firefox νμ₯ νλ‘κ·Έλ¨μΌλ‘ μ¬μ©ν μ μμ΅λλ€.
κ΅μ ν κ³ λ €μ¬ν
μ μΈκ³ μ¬μ©μλ₯Ό λμμΌλ‘ React μ ν리μΌμ΄μ μ κ°λ°ν λλ κ΅μ ν(i18n) λ° νμ§ν(l10n)λ₯Ό κ³ λ €νλ κ²μ΄ νμμ μ λλ€. μ΄λ₯Ό ν΅ν΄ λ€μν κ΅κ°μ λ¬ΈνκΆμ μ¬μ©μμκ² μ ν리μΌμ΄μ μ΄ μ κ·Ό κ°λ₯νκ³ μ¬μ©μ μΉνμ μ΄ λλλ‘ λ³΄μ₯ν©λλ€.
- ν μ€νΈ λ°©ν₯ (RTL): μλμ΄ λ° νλΈλ¦¬μ΄μ κ°μ μΌλΆ μΈμ΄λ μ€λ₯Έμͺ½μμ μΌμͺ½μΌλ‘(RTL) μμ±λ©λλ€. μ ν리μΌμ΄μ μ΄ RTL λ μ΄μμμ μ§μνλμ§ νμΈνμΈμ.
- λ μ§ λ° μ«μ μμ: λ€λ₯Έ λ‘μΌμΌμ λ§λ μ μ ν λ μ§ λ° μ«μ νμμ μ¬μ©νμΈμ.
- ν΅ν μμ: μ¬μ©μμ λ‘μΌμΌμ λ§λ μ¬λ°λ₯Έ νμμΌλ‘ ν΅ν κ°μ νμνμΈμ.
- λ²μ: μ ν리μΌμ΄μ μ λͺ¨λ ν μ€νΈμ λν λ²μμ μ 곡νμΈμ. λ²μ κ΄λ¦¬ μμ€ν μ μ¬μ©νμ¬ λ²μμ ν¨μ¨μ μΌλ‘ κ΄λ¦¬νμΈμ. i18next λλ react-intlκ³Ό κ°μ΄ λμμ΄ λ μ μλ λ§μ λΌμ΄λΈλ¬λ¦¬κ° μμ΅λλ€.
μλ₯Ό λ€μ΄, κ°λ¨ν λ μ§ νμ:
- λ―Έκ΅: MM/DD/YYYY
- μ λ½: DD/MM/YYYY
- μΌλ³Έ: YYYY/MM/DD
μ΄λ¬ν μ°¨μ΄μ μ κ³ λ €νμ§ μμΌλ©΄ μ μΈκ³ μ¬μ©μμκ² μ’μ§ μμ μ¬μ©μ κ²½νμ μ 곡νκ² λ©λλ€.
κ²°λ‘
React μ¬μ‘°μ μ ν¨μ¨μ μΈ UI μ λ°μ΄νΈλ₯Ό κ°λ₯νκ² νλ κ°λ ₯ν λ©μ»€λμ¦μ λλ€. κ°μ DOM, λΉκ΅ μκ³ λ¦¬μ¦ λ° μ΅μ νλ₯Ό μν ν΅μ¬ μ λ΅μ μ΄ν΄ν¨μΌλ‘μ¨ μ±λ₯μ΄ λ°μ΄λκ³ νμ₯ κ°λ₯ν React μ ν리μΌμ΄μ μ ꡬμΆν μ μμ΅λλ€. keyλ₯Ό ν¨κ³Όμ μΌλ‘ μ¬μ©νκ³ , λΆνμν 리λ λλ§μ νΌνλ©°, λΆλ³μ±μ μ¬μ©νκ³ , Context μ¬μ©μ μ΅μ ννκ³ , μ½λ λΆν μ ꡬννκ³ , React νλ‘νμΌλ¬λ₯Ό νμ©νμ¬ μ±λ₯ λ³λͺ© νμμ μλ³νκ³ ν΄κ²°νλ κ²μ κΈ°μ΅νμΈμ. λν κ΅μ νμ νμ§νλ₯Ό κ³ λ €νμ¬ μ§μ μΌλ‘ κΈλ‘λ²ν React μ ν리μΌμ΄μ μ λ§λμΈμ. μ΄λ¬ν λͺ¨λ² μ¬λ‘λ₯Ό μ€μν¨μΌλ‘μ¨ λ€μν κ΅μ μ¬μ©μλ₯Ό μ§μνλ©΄μ κ΄λ²μν μ₯μΉ λ° νλ«νΌμμ λ°μ΄λ μ¬μ©μ κ²½νμ μ 곡ν μ μμ΅λλ€.