κΈ°λ₯ μ μμ²νκ±°λ λ²κ·Έλ₯Ό λ³΄κ³ νμκ² μ΅λκΉ?
useEffect
λν API λμμΈ μ§λ¬Έ
νμ¬ νλμ 무μμ
λκΉ?
νμ¬ useEffect
λ λͺ¨λ λ λλ§μμ μ€νλ©λλ€. μ΄ κΈ°λ³Έ λμμ λ λ²μ§Έ μΈμλ₯Ό μ λ¬νλ κ²μ μμμ λ HTTP μμ²μ μ²λ¦¬νλ κ²κ³Ό κ°μ μν©μμ μνν μ μμ΅λλ€. μ΄κ²μ νΉν λ κ°μ μ΄λ³΄μμκ² νν μ€μ μΈ κ² κ°μ΅λλ€. λͺ¨λ λ λλ§μμ useEffect
λ₯Ό μ€ννλ €λ λ§μ ν¨ν΄μ μκ°ν μ μμ΅λλ€. κΈ°λ³Έμ μΌλ‘ ν λ² μ€ννμ§ μλ μ΄μ λ 무μμ
λκΉ?
API μ€κ³:
useEffect(
() => {
// do something
},
[/* dependency list */]
);
useEffect
λ μ’
μμ± λͺ©λ‘μ΄ λ³κ²½λ λλ§ μ€νλκ³ λΉ λ°°μ΄ []
μ μ’
μμ±μ΄ μμμ μλ―Έν©λλ€(μ¦, ν λ²λ§ μ€νλ¨). μ μλμ§ μμ μ’
μμ± λͺ©λ‘μ λ λλ§ν λλ§λ€ useEffect
λνλ ν¨μλ₯Ό μ€ννλ κ²μ μλ―Έν©λλ€.
λͺ¨λ λ λλ§μμ
useEffect
λ₯Ό μ€ννλ €λ λ§μ(μ΄λ€) ν¨ν΄λ μκ°ν μ μμ΅λλ€. κΈ°λ³Έμ μΌλ‘ ν λ² μ€ννμ§ μλ μ΄μ λ 무μμ λκΉ?
Reactλ₯Ό μ²μ μ νκ³ useState
λ³μκ° λ³κ²½λ λλ§λ€ 무μΈκ°λ₯Ό νκ³ μΆλ€κ³ κ°μ ν©λλ€(μ: μ κ°μ μλ²μ POST).
useEffect
μ½λ°±μ νΈλ¦¬κ±°νμ§ μμ΅λλ€.μ’ μμ± λͺ©λ‘μ μ½λ λ¨μνλ₯Ό μν μ±λ₯ μ΅μ ν/μ§μμ λ κ°κΉλ€κ³ μκ°ν©λλ€.
νμ¬ APIλ₯Ό μ¬μ©νλ©΄ λ€μ λμ μ€μμ κ²°μ ν μ μμ΅λλ€.
componentDidMount
+ componentDidUpdate
λμμ λͺ¨λ°©ν©λλ€.componentDidMount
λμμ λͺ¨λ°©ν©λλ€.this.props
λ° prevProps
κ΅¬μ± μμλ‘ λμΌν κ²μ ꡬνν μ μμ§λ§(μμ£Ό μ€ννμ§λ§) μ΄κ²μ μΌμ’
μ μλ‘μ΄ κ²μ
λλ€.μ€λͺ νλ "κΈ°λ³Έ" λμ(λͺ μμ μΌλ‘ μ’ μμ±μ μ§μ νμ§ μμ κ²½μ°)μ μ€λλ κ°μ΄ ν΄λ‘μ μμ μ¬μ©λλ κ²μ λ°©μ§νκΈ° λλ¬Έμ κ°μ₯ μμ ν κ²½μ°κ° λ§μ΅λλ€.
λ―Έλμ μ°λ¦¬λ μ΄ λ§μ λΆλΆμ μλννλ λ° λμμ΄ λλ μΌλΆ μ νμ μ»΄νμΌλ¬λ₯Ό μ 곡ν μ μκΈ°λ₯Ό λ°λλλ€. κ·Έ λμ μ°λ¦¬λ μ’ λ μ½κ² ν μ μλλ‘ κ³΅μ ESLint νλ¬κ·ΈμΈμ μ 곡