new TIL. Hooks - useEffect

μœ μžνƒ±μžπŸ‹Β·2021λ…„ 4μ›” 25일
0
post-thumbnail

πŸ“Œ useEffect

λžœλ”λ§μ΄ 될 λ•Œλ§ˆλ‹€ μ‹€ν–‰λ˜λŠ” ν•¨μˆ˜.
처음 λžœλ”λ§λ  λ•Œ + setStateλ₯Ό 톡해 μ—…λ°μ΄νŠΈκ°€ 될 λ•Œλ§ˆλ‹€ μ‹€ν–‰λœλ‹€.

πŸ‘‰ 처음 λžœλ”λ§λ  λ•Œλ§Œ μ‹€ν–‰ν•˜κ³  μ‹Άλ‹€λ©΄, useEffect ν•¨μˆ˜μ˜ λ‘λ²ˆμ§Έ νŒŒλΌλ―Έν„°λ‘œ 빈 배열을 λ„£μ–΄μ£Όλ©΄ λœλ‹€.

πŸ‘‰ μ˜μ‘΄μ„± λ°°μ—΄ μΆ”κ°€
νŠΉμ • 값이 μ—…λ°μ΄νŠΈλ  λ•Œλ§Œ μ‹€ν–‰ν•˜κ³  μ‹Άλ‹€λ©΄ λ°°μ—΄ λ‚΄ κ²€μ‚¬ν•˜κ³  싢은 값을 λ„£μ–΄μ£Όλ©΄ λœλ‹€.

useEffect(()=> {console.log({name})}, [name])
// 처음 λžœλ”λ§λ  λ•Œμ—λ„ useEffectκ°€ μ‹€ν–‰λ˜λŠ” 것을 μ•Œ 수 μžˆλ‹€. 
// μ΄λŠ” state μ΄ˆκΈ°κ°’μ„ 처음 μ„ΈνŒ…ν•΄μ£Όμ—ˆκΈ° λ•Œλ¬Έ! 

πŸ‘‰ clean up!
μ»΄ν¬λ„ŒνŠΈκ°€ unmount 되기 μ „ + μ—…λ°μ΄νŠΈλ˜κΈ° μ „ μ‹€ν–‰ν•˜κ³  μ‹Άλ‹€λ©΄ cleanup ν•¨μˆ˜λ₯Ό λ°˜ν™˜ν•΄μ£Όμ–΄μ•Ό ν•œλ‹€.

  • λ‹€μŒ 번 λžœλ”λ§λ³΄λ‹€ λ¨Όμ € 싀행됨
  • cleanup ν•¨μˆ˜λŠ” ν΄λ‘œμ €λ‘œμ„œ 이전 ν™˜κ²½μ„ κΈ°μ–΅ν•˜κ³  있음
  • unmount 되기 μ „μ—λ§Œ μ‹€ν–‰ν•˜κ³  μ‹Άλ‹€λ©΄ λ‘λ²ˆμ§Έ νŒŒλΌλ―Έν„°λ‘œ 빈 배열을 λ„£μ–΄μ£Όλ©΄ 됨


μ°Έκ³ ) https://simsimjae.tistory.com/400?category=384814

0개의 λŒ“κΈ€