React class μ»΄ν¬λνΈμ componentDid~μ λ€μ νλ μμ μ ν¨μ μ»΄ν¬λνΈμμ useEffect HookμΌλ‘ ν μ μλ€.
useEffect()
λ componentDidMount()
, componentDidUpdate()
, componentWillUnmount()
μΈκ°μ§κ° ν©μ³μ§ κ²μΌλ‘ λ³Ό μ μλ€.
componentDidMount()
λ μ»΄ν¬λνΈ μ΅μ΄ λ λμ μ€ν,
componentDidUpdate()
λ μ€ν
μ΄νΈ λ³κ²½μΌλ‘ μ»΄ν¬λνΈκ° 리νλ μ¬ λ λ μ€ν,
componentWillUnmount()
λ μ»΄ν¬λνΈ μ’
λ£μ μ€νλλ€.
κ·Έ μ€ componentDidMount
κ°μ κ²½μ°λ useEffect
μ λλ²μ§Έ μΈμλ‘ λΉ λ°°μ΄μ λ£μΌλ©΄ ꡬν κ°λ₯νλ€.
prop typesλ μ λ¬ λ°λ νλ‘μ€κ° λ΄κ° μνλ μλ£μ΄μΈμ§ νμΈν΄μ£Όλ λ©μλμ΄λ€.
npm i prop-types
λ‘ μ€μΉνκ³ import PropTypes from 'prop-types'
λ‘ λΆλ¬μ¨λ€.
νλ‘μ€ λ°λ μ»΄ν¬λνΈλ‘ κ°μ ν¨μ λ°μμ μ¬μ©νκ² λλλ°,
import PropTypes from 'prop-types'
Component.propTypes = {
key1: PropTypes.string
key2: PropTypes.number.isRequired
}
// μ¬κΈ°μ ν¬λ‘νΌν° ν€κ° key1μΈ κ°μ΄ μ λ¬λμ§ μκ±°λ stringμ΄μ΄μΌ μ€λ₯κ° λ°μνμ§ μκ³ ,
// key2μ κ²½μ°λ νλ‘νΌν° κ°μ΄ numberμ¬μΌ μ€λ₯κ° λ°μνμ§ μλλ€. (μ λ¬λμ§ μμλ μ€λ₯ λ°μ)
μλ°μ€ν¬λ¦½νΈλ κΈ°λ³Έμ μΌλ‘ λΉλκΈ°μ μ΄κΈ°μ λ°μ΄ν° μ 보λ₯Ό μ λΆ λΆλ¬μ€κΈ° μ μ μ€νλλ©΄ μλλ μ½λκ° μ€νλλ κ²½μ°κ° μλ€.
κ·Έ κ²½μ° async ν€μλμ await ν€μλλ₯Ό μ¬μ©νκ² λλλ°,
λ°μ΄ν°λ₯Ό λΆλ¬μ€λ ν¨μ μμ asyncλ₯Ό λΆνκ³ λ°μ΄ν°λ₯Ό μ§μ κ°μ Έμ€λ λ©μλ μμ awaitλ₯Ό λΆνμ async ν¨μ μ, await ν€μλκ° λΆμ ν¨μ(λ©μλ) λ€μ μ½λλ₯Ό λκΈ°μ μΌλ‘ μ€νλκ² νλ κ²μ΄λ€.
const getMovies = async () =>{
const {data: {data: {movies}}} = await axios.get('https://yts.mx/api/v2/list_movies.json?sort_by=rating');
setMovies(movies);
setIsLoading(false);
}
// axiosλ fetchμ μ μ¬νλ°, npm i axios νκ³ λΆλ¬μ€λ κ²μΌλ‘ μ¬μ©κ°λ₯νλ€.
useEffect(()=> {
getMovies();
}, [])
// useEffect ν
μ μ΄μ©ν΄μ componentDidMount μ κ°μ΄ μ»΄ν¬λνΈ μ΅μ΄ λ λμμλ§ μ€νλκ² νλ€.
// λ
Έλ§λ μ½λμ 리μ‘νΈ ν΄λ‘ μ½λ© λμ€μ λμ¨ μ½λμ΄λ€.
React
JavaScript
κ²°κ΅ μ£Όλ§μ κ°μ‘±λ€μ΄λ μμ°½ λμλ²λ Έλ€.
λ°μ±μ’ νμ π€¦