Reactλ top-down νμμ λ¨λ°©ν₯ λ°μ΄ν° νλ¦μ κ°μ§κ³ μμΌλ state λμ΄μ¬λ¦¬κΈ° (Lifting State Up)μΌλ‘ λΆλͺ¨ μ»΄ν¬λνΈμ stateλ₯Ό λ³κ²½ν μ μλ€.
μ΄ λμ΄ μ¬λ¦¬κΈ°μ μμ μ λΆλͺ¨ μ»΄ν¬λνΈ λ΄μμ stateλ₯Ό λ³κ²½μν€λ ν¨μλ₯Ό λ§λ€κ³ κ·Έ ν¨μλ₯Ό propsλ‘ μμ μ»΄ν¬λνΈλ‘ μ λ¬ νλ κ²μ΄λ€.
-> νλλΌλ YesλΌλ©΄ stateλ‘λ λΆμ ν©νλ€.
useEffect Hook -> λλ²μ§Έ μΈμ μ리μ μ΄λ€ stateκ° λ³ν λ Effect Hookμ μ½λ°±ν¨μλ₯Ό μ€νν μ§μ κ°λ₯ κ°λ₯νλ€.
λ°°μ΄ ννλ‘ λ³μλ₯Ό μμλ₯Ό λ£μΌλ©°, μ΄ λλ²μ§Έ μμλ₯Ό μ’
μμ± λ°°μ΄μ΄λΌ νλ€.
ν¨μ λ΄ μ΄λ€ ꡬνμ΄ 'μΈλΆμ' μν₯μ λ―ΈμΉλ©΄ Side Effectκ° μλ€κ³ νλ€.
Pure Function
μμν¨μλ ν¨μμ μ
λ ₯λ§μ΄ ν¨μμ κ²°κ³Όμ μν₯μ μ£Όλ ν¨μμ΄λ€.
μ΄λ€ μ λ¬μΈμκ° μ£Όμ΄μ§λ©΄ νμ κ°μ κ°μ λ°ννκΈ°μ μμΈ‘ κ°λ₯ν ν¨μμ΄λ€.
fetch API
fetchλ₯Ό μ¬μ©νκ³ λ©μλλ₯Ό λ°λ‘ μ§μ νμ§ μμΌλ©΄ GET λ©μλλ‘ APIλ₯Ό μ½μ΄μ¨λ€.
const func1 = ()=>{
const [isLoading, setIsLoading] = useState(true);
useEffect(()=>{
setTimeout(5000, setIsLoading(false))
},[])
return <>
{isLoading ? <div>Loading..</div> : <div> done! </div>}
</>
}
μ΄λ°μμΌλ‘ μ€ν μ΄νΈλ₯Ό μ¬μ©ν΄μ λ‘λ©μ€μ λ‘λ©μ€μ΄λΌλ κ²μ κ°μμ μΌλ‘ 보μ¬μ£Όλ νλ©΄μ λ λν μ μλ€.
μ€λ μ€λλ§μ 리μ‘νΈλ₯Ό λ§λ¬λ€.
λ€νν λΈλ‘κ·Έ ν¬μ€ν
μ νμΈμ§ λͺ¨λ₯΄κ² μ§λ§ λλΆλΆ κΈ°μ΅μ΄ λμ μ€λ μ€νλ¦°νΈμμ ν° μ΄λ €μμ μμλ€.
λ΄μΌ νμ΄μκ°μ ν μ€νλ¦°νΈκΉμ§ λλ΄λ¨λλ°, λ΄μΌμ λ°λ¦° 리μ‘νΈ λ³΅μ΅μ λ¬λ €λ³ΌκΉ κ³ λ―Όμ€μ΄λ€.