π λͺ¨λ React Componentμλ Lifecycle(μλͺ
μ£ΌκΈ°)μ΄ μ‘΄μ¬ν©λλ€.
Componentμ μλͺ
μ νμ΄μ§μ λ λλ§λκΈ° μ μ€λΉ κ³Όμ μμ μμνμ¬ νμ΄μ§μμ μ¬λΌμ§ λ λλ©λλ€.
λΌμ΄ν μ¬μ΄ν΄ λ©μλλ ν΄λμ€ν μ»΄ν¬λνΈμμλ§ μ¬μ©ν μ μμ΅λλ€.
λΌμ΄ν μ¬μ΄ν΄ λ©μλμ μ’
λ₯λ μ΄ μν κ°μ§μ
λλ€.
Will μ λμ¬κ° λΆμ λ©μλλ μ΄λ€ μμ
μ μλνκΈ° μ μ μ€νλλ λ©μλμ΄κ³ , Did μ λμ¬κ° λΆμ λ©μλλ μ΄λ€ μμ
μ μλν νμ μ€νλλ λ©μλμ
λλ€.
λΌμ΄ν μ¬μ΄ν΄μ μ΄ μΈκ°μ§, Mount, Update, Unmount λ‘ λλλλ€.
π Mount
- DOMμ΄ μμ±λκ³ μΉ λΈλΌμ°μ μμ λνλλ κ²μ λ§μ΄νΈ(Mount)λΌκ³ ν©λλ€.
μ΄λ νΈμΆνλ λ©μλλ λ€μκ³Ό κ°μ΅λλ€.
- constructor : μ»΄ν¬λνΈλ₯Ό μλ‘ λ§λ€ λλ§λ€ νΈμΆλλ ν΄λμ€ μμ±μ λ©μλ
- getDerivedStateFromProps : propsμ μλ κ°μ stateμ λ£μ λ μ¬μ©νλ λ©μλ
- render : μ€λΉν λ€μ UIλ₯Ό λ λλ§νλ λ©μλ
- componentDidMount : μ»΄ν¬λνΈκ° μΉ λΈλΌμ°μ μμ λνλ ν νΈμΆνλ λ©μλ
π Update
μ»΄ν¬λνΈλ μλ λ€ κ°μ§μ κ²½μ° μ λ°μ΄νΈ(Update)λ₯Ό ν©λλ€.
- propsκ° λ°λ λ
- stateκ° λ°λ λ
- λΆλͺ¨ μ»΄ν¬λνΈκ° 리λ λλ§λ λ
- this.forceUpdatesλ‘ κ°μ λ‘ λ λλ§μ νΈλ¦¬κ±°ν λ
μ΄λ κ² μ»΄ν¬λνΈλ₯Ό μ λ°μ΄νΈν λλ λ€μ λ©μλλ₯Ό νΈμΆν©λλ€.
- getDerivedStateFromProps : μ΄ λ©μλλ λ§μ΄νΈ κ³Όμ μμλ νΈμΆλλ©°, μ λ°μ΄νΈκ° μμνκΈ° μ μλ νΈμΆλ©λλ€. propsμ λ³νμ λ°λΌ state κ°μλ λ³νλ₯Ό μ£Όκ³ μΆμ λ μ¬μ©ν©λλ€.
- shouldComponentUpdated : μ»΄ν¬λνΈκ° 리λ λλ§μ ν΄μΌ ν μ§ λ§μμΌ ν μ§λ₯Ό κ²°μ νλ λ©μλμ λλ€. μ΄ λ©μλμμλ true νΉμ false κ°μ λ°νν΄μΌ νλ©°, trueλ₯Ό λ°ννλ©΄ λ€μ λΌμ΄νμ¬μ΄ν΄ λ©μλλ₯Ό κ³μ μ€ννκ³ , falseλ₯Ό λ°ννλ©΄ μμ μ μ€μ§ν©λλ€. μ¦, μ»΄ν¬λνΈκ° 리λ λλ§ λμ§ μμ΅λλ€.
- render : μ»΄ν¬λνΈλ₯Ό
리λ λλ§
ν©λλ€. - getSnapshotBeforeUpdate : μ»΄ν¬λνΈ λ³νλ₯Ό DOMμ λ°μνκΈ° λ°λ‘ μ§μ μ νΈμΆνλ λ©μλμ λλ€.
- componenetDidUpdate : μ»΄ν¬λνΈμ μ λ°μ΄νΈ μμ μ΄ λλ ν νΈμΆνλ λ©μλμ λλ€.
π Unmount
λ§μ΄νΈμ λ°λ κ³Όμ , μ¦ μ»΄ν¬λνΈλ₯Ό DOMμμ μ κ±°νλ κ²μ μΈλ§μ΄νΈ(Unmount)λΌκ³ ν©λλ€.
- componentWillUnmount : μ»΄ν¬λνΈκ° μΉ λΈλΌμ°μ μμμ μ¬λΌμ§κΈ° μ μ νΈμΆνλ λ©μλμ λλ€.