Functional Component Lifecycle
Last updated
Last updated
π‘ μ΄μ ν΄λμ€ μ»΄ν¬λνΈμ λΉκ΅νμ¬ ν¨μν μ»΄ν¬λνΈμμλ ν΄λμ€ν μ»΄ν¬λνΈμ λΌμ΄ν μ¬μ΄ν΄ λ©μλλ‘ μ¬μ©λμλ constructor(), render(), ComponenDidMount(), componentDidUpdate(), componentWillUnmount()λ μλμ κ°μ΄ μ¬μ©νλ€.
[μ°Έκ³ ] ν΄λμ€ν μ»΄ν¬λνΈμ ν¨μν μ»΄ν¬λνΈμ λΉκ΅
Mounting
constructor()
ν¨μν μ»΄ν¬λνΈ λ΄λΆ
Mounting
render()
return()
Mounting
ComponenDidMount()
useEffect()
Updating
componentDidUpdate()
useEffect()
UnMounting
componentWillUnmount()
useEffect()
리μ‘νΈ μ»΄ν¬λνΈκ° λ λλ§ λ λλ§λ€ νΉμ μμ μ μννλλ‘ μ€μ ν μ μλ Hook
first
: 첫 λ²μ§Έ 맀κ°λ³μλ‘ μ λ¬λ ν¨μ
μ»΄ν¬λνΈκ° λ λλ§λ λλ§λ€ μ€νλλ€.
μ΄ ν¨μλ λΆμ ν¨κ³Όλ₯Ό μ²λ¦¬νκ³ , λ λλ§ κ²°κ³Όμ μν₯μ μ£Όμ§ μμμΌ νλ€.
return
λ¬Έ μμ μλ ν¨μ
μ»΄ν¬λνΈκ° unmountλ λ μ€νλλ€.
μ΄κ²μ μ£Όλ‘ useEffectμμ μνν μμ
λ€μ μ 리νκ³ , λ©λͺ¨λ¦¬ λμλ₯Ό λ°©μ§νκΈ° μν΄ μ¬μ©λλ€.
[third]
: μμ‘΄μ± λ°°μ΄
useEffectκ° μμ‘΄νλ κ°λ€μ λ°°μ΄λ‘ λ°λλ€. μ΄ λ°°μ΄ μμ κ°μ΄ λ³κ²½λ λλ§λ€ λ€μ μ€νλλ€.
λ§μ½ [third]
λμ []
λ₯Ό μ λ¬νλ©΄, useEffectλ μ»΄ν¬λνΈκ° μ²μ λ λλ§λ λλ§ μ€νλλ€.
μ΄μ μλ ν΄λμ€ν μ»΄ν¬λνΈμμλ§ μνμ λΌμ΄νμ¬μ΄ν΄μ λ€λ£° μ μμμΌλ©° ν¨μν μ»΄ν¬λνΈλ λ¨μν ν¨μλ‘ μ μλμ΄ μμ΄ μ νμ μ΄μλ€. React Hooksμ λ±μ₯μΌλ‘ ν¨μν μ»΄ν¬λνΈκ° μνμ λΌμ΄νμ¬μ΄ν΄μ ν¨κ³Όμ μΌλ‘ λ€λ£° μ μκ² λμλ€. μ΄λ‘μ¨ ν¨μν μ»΄ν¬λνΈλ μ½λκ° λ κ°κ²°νκ³ λͺ νν΄μ‘λ€.
React Hooksλ₯Ό μ¬μ©νλ©΄ *μν κ΄λ¦¬μ λΌμ΄νμ¬μ΄ν΄ μ²λ¦¬μ λν μ κ·Ό λ°©μμ΄ ν΄λμ€ν μ»΄ν¬λνΈμλ λ¬λΌμ§λ€. μ΄λ μ½λμ μΌκ΄μ±κ³Ό μ μ°μ±μ λμΈλ€.
ν¨μν μ»΄ν¬λνΈμ React Hooksλ₯Ό ν¨κ» μ¬μ©νλ©΄μ κ°λ°μλ λ μ§κ΄μ μ΄κ³ κ°λ¨ν μ½λλ₯Ό μμ±ν μ μκ² λμκ³ , μ΄λ¬ν μ΄μ μΌλ‘ μΈν΄ ν¨μν μ»΄ν¬λνΈκ° νμ¬ React μ ν리μΌμ΄μ κ°λ°μμ λ λ§μ΄ μ νΈλλ κ²½ν₯μ΄ μλ€.
*μν κ΄λ¦¬μ λΌμ΄νμ¬μ΄ν΄ μ²λ¦¬μ λν μ κ·Ό λ°©μ
- ν΄λμ€ν μ»΄ν¬λνΈ
setState
λ₯Ό μ¬μ©νμ¬ μνλ₯Ό λ³κ²½νκ³ λΌμ΄ν μ¬μ΄ν΄ λ©μλλ₯Ό μ¬μ©νμ¬ λΉλκΈ° μμ μ²λ¦¬- ν¨μν μ»΄ν¬λνΈ
useState
,useEffect
λ±μ Hook ν¨μλ₯Ό μ¬μ©νμ¬ μ½λκ° κ°κ²°νκ³ λ λ§μ μ μ°μ±μ μ 곡
κ°κ²°μ±κ³Ό κ°λ
μ±
ν¨μν μ»΄ν¬λνΈλ μΌλ°μ μΌλ‘ ν¨μ¬ λ κ°κ²°νκ³ κ°λ
μ±μ΄ λλ€. ν΄λμ€ν μ»΄ν¬λνΈμμλ μμ±μ, λΌμ΄νμ¬μ΄ν΄ λ©μλ, this
ν€μλ λ±μ μ¬μ©ν΄μΌ νμ§λ§, ν¨μν μ»΄ν¬λνΈμμλ μ΄λ¬ν κ²λ€μ΄ νμνμ§ μλ€.
λΌμ΄νμ¬μ΄ν΄ κ΄λ¦¬μ λ¨μν ν¨μν μ»΄ν¬λνΈμμλ React Hooksλ₯Ό μ¬μ©νμ¬ μνμ λΌμ΄νμ¬μ΄ν΄ μ΄λ²€νΈλ₯Ό κ΄λ¦¬ν μ μλ€. μ΄λ ν΄λμ€ν μ»΄ν¬λνΈμ 볡μ‘ν λΌμ΄νμ¬μ΄ν΄ λ©μλλ³΄λ€ ν¨μ¬ μ§κ΄μ μ΄κ³ κ°λ¨νλ€.
μ¬μ¬μ©μ±κ³Ό ν μ€νΈ μ©μ΄μ± ν¨μν μ»΄ν¬λνΈλ μμ ν¨μμ νΉμ±μ κ°μ§κ³ μμ΄μ ν μ€νΈνκΈ°κ° λ μ½λ€. λν, ν¨μν μ»΄ν¬λνΈλ λ μκ³ λ¨μν λ¨μλ‘ λλκΈ°κ° λ μ¬μμ, μ¬μ¬μ©μ±μ΄ λμμ§λ€.
ν¨μν μ»΄ν¬λνΈλ React Hooksλ₯Ό νμ©νμ¬ μν κ΄λ¦¬μ λΌμ΄νμ¬μ΄ν΄μ λ€λ£¨λ©΄μ μ½λμ κ°κ²°μ±κ³Ό μ μ°μ±μ΄ ν₯μλμλ€. μ΄λ¬ν μ΄μ μΌλ‘ ν¨μν μ»΄ν¬λνΈκ° λ λ§μ μ νΈλ₯Ό λ°κ³ μλ€.
μ°Έκ³ μ¬μ΄νΈ
[React] ν¨μν μ»΄ν¬λνΈ μλͺ μ£ΌκΈ°(lifecycle) μ΄ν΄νκΈ°
[React] μ»΄ν¬λνΈ μλͺ μ£ΌκΈ° / ν΄λμ€ν , ν¨μνLifeCycle