useState
νμ΅ ν€μλ
useState
initialState
state
setState
λΉλκΈ°μ μΌκ΄μ²λ¦¬(batch)
ν΄λ‘μ μ ν
π useState
state(μν)λ₯Ό μμ±νκ³ μ λ°μ΄νΈ(setState)λ₯Ό ν΅ν΄ νλ©΄(UI)μ (리)λ λλ§νλ κΈ°λ₯μ μ 곡νλ€.
π€ useState μ¬μ©λ²
state μμ±κ³Ό λμμ κ°μ ΈμΌ ν μ΄κΈ°κ°μ useState ν¨μμ μΈμλ‘ λ£μ΄μ£Όλ©΄ state, setState λκ°μ§μ μμλ₯Ό λ°°μ΄ ννλ‘ λ¦¬ν΄ν΄μ€λ€.
μ΅μ΄ λ λλ§μ stateλ μΈμλ‘ λ°μ μ΄κΈ°κ°μ κ°μ§κ³ μκ³ , setStateλ stateλ₯Ό λ³κ²½νλ ν¨μλ₯Ό κ°μ§κ³ μλ€.
useState(initialState)
맀κ°λ³μ initialState μ μνμ μ΄κΈ°κ°μ μ§μ νλ€.
맀κ°λ³μλ‘ μ½λ°±ν¨μλ μ μΈμ΄ κ°λ₯νλ€.
λκ·λͺ¨ λ°°μ΄μ μμ±νκ±°λ λΉμ©μ΄ λ§μ΄ λλ κ³μ°μ μννλ κ²½μ°
state
stateλ₯Ό λ³κ²½νκ³ μΆλ€λ©΄ setState ν¨μλ₯Ό νΈμΆνκ³ μΈμλ‘ λ³κ²½νκ³ μΆμ κ°μ λ£μ΄μ£Όλ©΄ stateκ°μ΄ λ³κ²½λκ³ stateλ₯Ό κ°μ§κ³ μλ μ»΄ν¬λνΈκ° λ λλ§(μ λ°μ΄νΈ)νκ² λλ€.
setState(nextState)
λΉλκΈ°λ‘ λμνμ¬ stateλ₯Ό λ³κ²½ν΄μ£Όλ ν¨μμ΄λ€.
μ΄μ μ μνκ°μ μ»κ³ μΆλ€λ©΄ μ½λ°±ν¨μλ₯Ό 맀κ°λ³μλ‘ λ£μ΄μ£Όμ΄μΌ νλ€.
μμ μ½λλ₯Ό μ€ν 보면 console.log(state)
κ°μ μ΄μ μ μνκ°μΈ 0μ΄ μΆλ ₯λκ³ , state κ°μ 1μ΄λ€.
β μ΄λ κ² λμνλ μ΄μ λ setState ν¨μκ° λΉλκΈ°μ μΌλ‘ λμνκ³ Reactκ° νλμ μ΄λ²€νΈ νΈλ€λ¬ ν¨μ λ΄μ λ‘μ§μ λͺ¨λ μ½μ λκΉμ§ κΈ°λ€λ¦° λ€μμ μΌκ΄ μ²λ¦¬(Batch)ν΄ νλ²μ λ λλ§νκΈ° λλ¬Έμ΄λ€.
π€ μ Reactλ μνκ°μ λ³κ²½νλ ν¨μλ₯Ό λΉλκΈ°μ μΌλ‘ μ²λ¦¬νκ² λ§λ€μμκΉ?
React μ ν리μΌμ΄μ μ μ λ§μ μ»΄ν¬λνΈμ μνκ°μΌλ‘ μ΄λ£¨μ΄μ Έμλ€. μ΄λ° μν©μμ λ¨ νλμ μνκ° λ³νν λλ§λ€ κ΄λ ¨λ λ·°λ₯Ό λ§€λ² λ¦¬λ λλ§νλ κ²μ λΉν¨μ¨κ³Ό ν¨κ» μ±λ₯μμ λ¬Έμ λ₯Ό μΌκΈ°νλ€.
π€ μ°μλ setStateλ₯Ό μ²λ¦¬νλ λ°©λ²μ?
setStateν¨μμ μΈμλ‘ ν¨μλ₯Ό μ λ¬νλ€.
useEffectμ μμ‘΄μ± λ°°μ΄μ νμ©νλ©΄ λλ€.
π μ°Έκ³
Last updated