1. ν΄λ‘μ λ?
ν΄λ‘μ λ μ€μ²© ν¨μμμ λ΄λΆ ν¨μκ° μΈλΆ ν¨μμ λ΄λΆ λ³μλ₯Ό μ°Έμ‘°ν μ μλ νμμ΄λ€!
nayeon1μ νΈμΆνκ² λλ©΄ nayeon1 μ€ν 컨ν μ€νΈκ° μμ±λμ΄μ μ½ μ€νμ λ΄κΈ°κ³ , nayeon1
μ€ν 컨ν μ€νΈμμ μ κ±°λλ©΄, yμ λν μ 보λ μλ κ²μ΄ μλκΉ? (μ μ μ€ν컨ν μ€νΈλ μ κ±° X)
κ·Έλ°λ°, μ΄λ° νμμ μ μΌμ΄λ κΉ ?
μ€μ½ν, κ·Έμ€μμλ μ€μ½ν 체μΈ, λ μ컬 μ€μ½ν, μ€ν 컨ν μ€νΈμ λ μ컬 νκ²½μ νλμ© μ΄ν΄νκ³ λλ,
ν΄λ‘μ μ λν΄ μ‘°κΈμ μ΄ν΄νκ³ μꡬλ..λ₯Ό λλ μ μμλ€. νλμ© μ 리ν΄λ³΄μ.
1-1. μ€μ½ν
μ€μ½νλ μ΄λ€ λ³μλ€μ μ κ·Όν μ μλ μ ν¨ λ²μλ€.
κ°λ¨ν μμ μ½λλ₯Ό μμ±ν΄λ³΄μλ€.
λ³μ xλ μ μ λ³μμ΄κΈ° λλ¬Έμ nayeon1 ν¨μμ λ΄λΆ ν¨μμΈ nayeon2 μμμ μ°Έμ‘°λ₯Ό ν μ μμ§λ§,
λ³μ yλ nayeon1μ λ΄λΆ ν¨μμΈ nayeon2 μμλ μ°Έμ‘°κ° κ°λ₯νμ§λ§,
nayeon1 ν¨μ λ΄μμ μ μΈν λ³μμ΄κΈ° λλ¬Έμ μΈλΆμμ μ°Έμ‘°λμ§ μλλ€.
μ μ λ³μλ μ μμμ μ°Έμ‘° κ°λ₯, ν¨μ μμ μ μΈλ λ³μλ ν¨μ λ΄λΆμμ μ°Έμ‘° κ°λ₯μ΄λΌλ λ²μκ° μμμ νμΈν μ μλ€.
κ·Όλ°, κ·ΈλΌ nayeon2 ν¨μμμλ nayeon1μμ μ μΈν yλ₯Ό μ μ°Έμ‘°ν μ μμκΉ?
1-2. μ€μ½ν 체μΈ
μ΄μ λ μ€μ½νλ κ³μΈ΅μ κ΅¬μ‘°λ‘ μ°κ²°μ΄ λκΈ° λλ¬Έμ (= μ€μ½ν 체μΈ), μμ μ΄ μν μ€μ½νκ° μλ λ€λ₯Έ μ€μ½νλ₯Ό κ²μν μ μλ€.
νμ§λ§, μλ°©ν₯μΌλ‘ κ²μμ΄ κ°λ₯ν κ²μ΄ μλλΌ μμ μ€μ½νλ§ κ²μμ΄ κ°λ₯νλ€!
κ·Έλ κΈ° λλ¬Έμ nayeon2 μ€μ½νμ μμ μ€μ½νμΈ nayeon1μ μ€μ½νλ₯Ό κ²μν μ μμλ κ²!
κ·ΈλΌ μ€μ²© ν¨μκ° μλ κ²½μ°μλ μ΄λ»κ² λ κΉ?
nayeon1μμ nayeon2λ₯Ό νΈμΆνκΈ° λλ¬Έμ, nayeon1 μ΄ μμ μ€μ½νμ΄λ€. κ·Έλμ nayeon2μμ yλ₯Ό μ°Έμ‘°ν μ μλ€!λΌκ³ μκ°νμ§λ§
νλ Έλ€.
μ΄μ λ₯Ό μκΈ° μν΄μλ μλ°μ€ν¬λ¦½νΈλ λμ μ€μ½νμΈμ§, λ μ컬(μ μ ) μ€μ½νμΈ μ§λΆν° μμ보μ.
1-3. λ μ컬 μ€μ½ν
λμ μ€μ½νμ λ μ컬 μ€μ½νλ₯Ό ꡬλΆνλ κΈ°μ€μ μμ μ€μ½νλ₯Ό κ²°μ νλ κΈ°μ€μ μλ€.
λμ μ€μ½νλ ν¨μλ₯Ό μ΄λμ νΈμΆνλμ§μ λ°λΌ ν¨μμ μμ μ€μ½νλ₯Ό κ²°μ νλ€.
λ μ컬 μ€μ½νλ ν¨μλ₯Ό μ΄λμ μ μνλμ§μ λ°λΌ ν¨μμ μμ μ€μ½νλ₯Ό κ²°μ νλ€.
μλ°μ€ν¬λ¦½νΈλ λ μ컬 μ€μ½νλ₯Ό λ°λ₯΄κΈ° λλ¬Έμ ν¨μλ₯Ό μ΄λμ μ μνλμ§μ λ°λΌ μμ μ€μ½νλ₯Ό κ²°μ νκ² λλ€.
κ·Έλ κΈ° λλ¬Έμ nayeon2μ μμ μ€μ½νλ nayeon1 μ€μ½ν , μ μ μ€μ½νκ° μλλΌ μ μ μ€μ½νλ§ ν΄λΉλλ€.
1-4. λ μ컬 νκ²½
μ€ν 컨ν μ€νΈμμ μλ³μμ μ€μ½νλ₯Ό κ΄λ¦¬νλ κ³³μ΄ λ μ컬 νκ²½μ΄λ€. μ¦, μμμ μ€λͺ ν μ€μ½ν 체μΈμ λ μ컬 νκ²½μ μ°κ²°ν κ²μ΄λ€.
λ, λ μ컬 νκ²½μ νκ²½ λ μ½λμ μΈλΆ λ μ컬 νκ²½μ λν μ°Έμ‘°λ‘ λλ μ μλ€.
νκ²½ λ μ½λ : μ€μ½νμ ν¬ν¨λ μλ³μλ₯Ό λ±λ‘νκ³ λ±λ‘λ μλ³μμ λ°μΈλ©λ κ°μ μ μ₯νλ μ μ₯μ.
μΈλΆ λ μ컬 νκ²½μ λν μ°Έμ‘° : μμ μ€μ½νλ₯Ό κ°λ¦¬ν¨λ€!
2. κ²°λ‘ : ν΄λ‘μ κ° μΌμ΄λλ μ΄μ
μ€μ½ν, μ€μ½ν 체μΈ, λ μ컬 μ€μ½ν, λ μ컬 νκ²½μ λν΄ μ΄ν΄νλ©΄μ ν΄λ‘μ κ° μΌμ΄λλ μ΄μ μ λν΄ μ΄λ ΄νμ΄ μ κ² κ°λ€.
μ€μ½ν 체μΈμ΄ λ μ컬 νκ²½μ μ°κ²°νκΈ° λλ¬Έμ μμ μ μ μΈν μμ μ€μ½νλ₯Ό μ°Έμ‘°ν μ μꡬλ! κΉμ§ μ΄ν΄νλ€.
νμ§λ§ λ§μ§λ§μΌλ‘ μ΄ν΄κ° λμ§ μλ λΆλΆμ΄ λ¨μμλ€.
μ€ν 컨ν μ€νΈλ μ’ λ£λλλ°, μ΄λ»κ² μΈλΆ ν¨μλ₯Ό μ°Έμ‘°ν μ μλ κ²μΌκΉ?μΈλ°, μ€ν 컨ν μ€νΈλ μμ λμ§λ§ λ μ컬 νκ²½μ λ¨μμκΈ° λλ¬Έμ΄λ€.
console.dirμ μ¬μ©νλ©΄ νμΈν μ μλ€!
ν¨μ κ°μ²΄ λ΄λΆ μ¬λ‘―μ [[Scopes]] νλ‘νΌν°κ° ν΄λΉ ν¨μμ μ°κ΄λ λͺ¨λ λ²μμ λν μ 보λ€μ κ°κ³ μλ κ²μ νμΈν μ μλ€!
κ°λΉμ§ 컬λ ν°λ λκ΅°κ°κ° μ°Έμ‘°νκ³ μλ λ©λͺ¨λ¦¬ 곡κ°μ ν¨λΆλ‘ ν΄μ νμ§ μλλ€κ³ νλ€!
3. useStateμ ν΄λ‘μ μ°κ΄μ±
node_modules/react/cjs/react.development.js
useStateλ dispatcher μΈμ€ν΄μ€λ₯Ό μμ±ν΄μ, initialState μ΄κΈ°κ°μ λ°μ dispatcher.useStateμ μ λ¬νμ¬ κ²°κ΄κ°μ λ°ννλꡬλ κΉμ§ μ μ μλ€!
κ·ΈλΌ resolceDispatcher ν¨μκ° μ΄λ€ λμμ νλμ§ μ°Ύμ보μ!
dispatcherμ λν μλ¬ μ²λ¦¬λ₯Ό νλ ν¨μμΈ κ² κ°λ€.
κ·ΈλΌ λ€μ ReactCurrentDispatcherμ λν΄ μ°Ύμ보μ.
μ μμ μ μΈλ κ°μ²΄μμ νμΈν μ μλ€.
useStateλ λμν λλ§λ€ μμμ μλ ReactCurrentDispatcherμμ current κ° (= state)μ κ°μ Έμμ μ€νμ νκ² λλλ°,
"μμμ μ μΈλ λ³μμ κ°μ μ°Έμ‘° " => ν΄λ‘μ λ₯Ό μ΄μ©ν κ²μμ μ μ μλ€.
'π WIL > π React' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
μΆμνλ.. (0) | 2023.12.05 |
---|---|
React Query (μ΄μ TanStack Query λΌκ³ λΆλ¦¬λ ..) μ μ© (2) (0) | 2022.09.21 |
Private Routes μ μ©ν΄λ³΄μ. (0) | 2022.09.11 |
Axios Interceptors ? (0) | 2022.09.05 |
TDD λμ ν΄λ³΄μ.(2) - TypeScript μ μ μ© (0) | 2022.08.27 |