π/γ΄ React (2) μΈλ€μΌν 리μ€νΈν 리λμ€(Redux)μ λν΄ μμ보μ 리λμ€(Redux) μ»΄ν¬λνΈλ€μ μν κ΄λ ¨ λ‘μ§λ€μ λ€λ₯Έ νμΌλ€λ‘ λΆλ¦¬μμΌ λμ± ν¨μ¨μ μΌλ‘ κ΄λ¦¬ κΈλ‘λ² μν κ΄λ¦¬ => Context API, useReducerμ μ μ¬ λ¦¬λμ€λ₯Ό μ¬μ©νλ κ²κ³Ό Context APIλ₯Ό μ¬μ©νλ κ²μ μ°¨μ΄ λ¦¬λμ€λ,,, λ―Έλ€μ¨μ΄ μ μ©ν ν¨μ(connect)μ Hooks(useSelector, useDispatch, useStore) νλμ 컀λ€λ μν (λͺ¨λ κΈλ‘λ² μνλ₯Ό νλμ 컀λ€λ μν κ°μ²΄μ λ£μ΄ μ¬μ©) concat: 리λμ€μ μν λλ μ‘μ μμ± ν¨μλ₯Ό μ»΄ν¬λνΈμ propsλ‘ λ°μμ¬ μ μλ€. useSelector, useDispatch, useStore: μμ½κ² μνλ₯Ό μ‘°ννκ±°λ μ‘μ μ λμ€ν¨μΉ ν μ μλ€. 리λμ€λ μΈμ μ¨μΌ ν κΉ? νλ‘μ νΈμ κ·λͺ¨κ° ν°κ°? Y.. [React] DOM(λ)μ΄λ? Virtual DOM(κ°μ λ)μ΄λ? π DOM(λ)μ΄λ? 'Document Object Model'. HTML, XML λ¬Έμμ νλ‘κ·Έλλ° μΈν°νμ΄μ€μ΄λ€. λ¬Έμμ ꡬ쑰νλ ννμ μ 곡νλ©° νλ‘κ·Έλλ° μΈμ΄κ° DOM ꡬ쑰μ μ κ·Όν μ μλ λ°©λ²(API)μ μ 곡νμ¬ λ¬Έμ ꡬ쑰, μ€νμΌ, λ΄μ© λ±μ λ³κ²½ν μ μκ² λλλ€. π DOMμ μ§μ μ κ·Όν λμ λ¬Έμ μ DOMμ μ§μ μ κ·Όν κ²½μ° λ·°μ λ³νκ° μμΌλ©΄ λ€μ DOMμ λ³κ²½ν΄μΌ νκΈ° λλ¬Έμ λΈλΌμ°μ μ μ¦μ λ λλ§μ μ λ°νμ¬ ν¨μ¨μ±μ΄ λ¨μ΄μ§κ² λλ€. π Virtual DOM(κ°μ λ)μ΄λ? κ°μ DOMμ μ€μ DOMμ λ³νλ₯Ό μ΅μν μμΌμ£Όλ μν μ νλ€. λ·°μ λ³νκ° μμΌλ©΄, κ·Έ λ³νκ° μ€μ DOMμ μ μ©λκΈ° μ μ κ°μ DOMμ μ μ©μμΌ μ΅μ’ κ²°κ³Όλ§ μ€μ DOMμ μ λ¬νλ€. μλ₯Ό λ€μ΄ λ·°μ 20κ°μ.. μ΄μ 1 λ€μ