React: useEffect의 κΈ°λ³Έ λ™μž‘μ΄ λͺ¨λ“  λ Œλ”μ—μ„œ μ‹€ν–‰λ˜λŠ” μ΄μœ λŠ” λ¬΄μ—‡μž…λ‹ˆκΉŒ?

에 λ§Œλ“  2019λ…„ 11μ›” 26일  Β·  3μ½”λ©˜νŠΈ  Β·  좜처: facebook/react

κΈ°λŠ₯ 을 μš”μ²­ν•˜κ±°λ‚˜ 버그λ₯Ό 보고 ν•˜μ‹œκ² μŠ΅λ‹ˆκΉŒ?
useEffect λŒ€ν•œ API λ””μžμΈ 질문

ν˜„μž¬ 행동은 λ¬΄μ—‡μž…λ‹ˆκΉŒ?
ν˜„μž¬ useEffect λŠ” λͺ¨λ“  λ Œλ”λ§μ—μ„œ μ‹€ν–‰λ©λ‹ˆλ‹€. 이 κΈ°λ³Έ λ™μž‘μ€ 두 번째 인수λ₯Ό μ „λ‹¬ν•˜λŠ” 것을 μžŠμ—ˆμ„ λ•Œ HTTP μš”μ²­μ„ μ²˜λ¦¬ν•˜λŠ” 것과 같은 μƒν™©μ—μ„œ μœ„ν—˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 이것은 특히 λ‚˜ 같은 μ΄ˆλ³΄μžμ—κ²Œ ν”ν•œ μ‹€μˆ˜ 인 것 κ°™μŠ΅λ‹ˆλ‹€. λͺ¨λ“  λ Œλ”λ§μ—μ„œ useEffect λ₯Ό μ‹€ν–‰ν•˜λ €λŠ” λ§Žμ€ νŒ¨ν„΄μ„ 생각할 수 μ—†μŠ΅λ‹ˆλ‹€. 기본적으둜 ν•œ 번 μ‹€ν–‰ν•˜μ§€ μ•ŠλŠ” μ΄μœ λŠ” λ¬΄μ—‡μž…λ‹ˆκΉŒ?

Question

λͺ¨λ“  3 λŒ“κΈ€

API 섀계:

useEffect(
    () => {
        // do something
    },
    [/* dependency list */]
);

useEffect λŠ” 쒅속성 λͺ©λ‘μ΄ 변경될 λ•Œλ§Œ μ‹€ν–‰λ˜κ³  빈 λ°°μ—΄ [] 은 쒅속성이 μ—†μŒμ„ μ˜λ―Έν•©λ‹ˆλ‹€(즉, ν•œ 번만 싀행됨). μ •μ˜λ˜μ§€ μ•Šμ€ 쒅속성 λͺ©λ‘μ€ λ Œλ”λ§ν•  λ•Œλ§ˆλ‹€ useEffect λž˜ν•‘λœ ν•¨μˆ˜λ₯Ό μ‹€ν–‰ν•˜λŠ” 것을 μ˜λ―Έν•©λ‹ˆλ‹€.

λͺ¨λ“  λ Œλ”λ§μ—μ„œ useEffect λ₯Ό μ‹€ν–‰ν•˜λ €λŠ” λ§Žμ€(μ–΄λ–€) νŒ¨ν„΄λ„ 생각할 수 μ—†μŠ΅λ‹ˆλ‹€. 기본적으둜 ν•œ 번 μ‹€ν–‰ν•˜μ§€ μ•ŠλŠ” μ΄μœ λŠ” λ¬΄μ—‡μž…λ‹ˆκΉŒ?

Reactλ₯Ό 처음 μ ‘ν•˜κ³  useState λ³€μˆ˜κ°€ 변경될 λ•Œλ§ˆλ‹€ 무언가λ₯Ό ν•˜κ³  μ‹Άλ‹€κ³  κ°€μ •ν•©λ‹ˆλ‹€(예: μƒˆ 값을 μ„œλ²„μ— POST).

  • ν˜„μž¬ λ™μž‘μœΌλ‘œ λ™μΌν•œ 값을 μ—¬λŸ¬ 번 κ²Œμ‹œν•˜μ§€λ§Œ λ³€κ²½λœ 값을 κ²Œμ‹œν•˜λŠ” 것을 λ†“μΉ˜μ§€ μ•Šμ„ κ²ƒμž…λ‹ˆλ‹€.
  • μ œμ•ˆν•˜λŠ” λ™μž‘μœΌλ‘œ 초기 κ°’/첫 번째 λ³€κ²½ μ‚¬ν•­λ§Œ κ²Œμ‹œλ˜κ³  μΆ”κ°€ λ³€κ²½ 사항은 useEffect μ½œλ°±μ„ νŠΈλ¦¬κ±°ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

쒅속성 λͺ©λ‘μ€ μ½”λ“œ λ‹¨μˆœν™”λ₯Ό μœ„ν•œ μ„±λŠ₯ μ΅œμ ν™”/지원에 더 가깝닀고 μƒκ°ν•©λ‹ˆλ‹€.

ν˜„μž¬ APIλ₯Ό μ‚¬μš©ν•˜λ©΄ λ‹€μŒ λ™μž‘ μ€‘μ—μ„œ κ²°μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

  • 맀번 효과λ₯Ό μ‹€ν–‰ν•©λ‹ˆλ‹€. 이것은 이전 클래슀 componentDidMount + componentDidUpdate λ™μž‘μ„ λͺ¨λ°©ν•©λ‹ˆλ‹€.
  • 효과λ₯Ό ν•œ 번만 μ‹€ν–‰ν•©λ‹ˆλ‹€. 이것은 이전 componentDidMount λ™μž‘μ„ λͺ¨λ°©ν•©λ‹ˆλ‹€.
  • 쒅속성이 변경될 λ•Œλ§Œ 효과λ₯Ό μ‹€ν–‰ν•©λ‹ˆλ‹€. 클래슀 ꡬ성 μš”μ†Œ APIμ—μ„œ this.props 및 prevProps ꡬ성 μš”μ†Œλ‘œ λ™μΌν•œ 것을 κ΅¬ν˜„ν•  수 μžˆμ§€λ§Œ(자주 μ‹€ν–‰ν–ˆμ§€λ§Œ) 이것은 μΌμ’…μ˜ μƒˆλ‘œμš΄ κ²ƒμž…λ‹ˆλ‹€.

μ„€λͺ…ν•˜λŠ” "κΈ°λ³Έ" λ™μž‘(λͺ…μ‹œμ μœΌλ‘œ 쒅속성을 μ§€μ •ν•˜μ§€ μ•Šμ€ 경우)은 였래된 값이 ν΄λ‘œμ €μ—μ„œ μ‚¬μš©λ˜λŠ” 것을 λ°©μ§€ν•˜κΈ° λ•Œλ¬Έμ— κ°€μž₯ μ•ˆμ „ν•œ κ²½μš°κ°€ λ§ŽμŠ΅λ‹ˆλ‹€.

λ―Έλž˜μ— μš°λ¦¬λŠ” 이 λ§Žμ€ 뢀뢄을 μžλ™ν™”ν•˜λŠ” 데 도움이 λ˜λŠ” 일뢀 μœ ν˜•μ˜ 컴파일러λ₯Ό μ œκ³΅ν•  수 있기λ₯Ό λ°”λžλ‹ˆλ‹€. κ·Έ λ™μ•ˆ μš°λ¦¬λŠ” μ’€ 더 μ‰½κ²Œ ν•  수 μžˆλ„λ‘ 곡식 ESLint ν”ŒλŸ¬κ·ΈμΈμ„ 제곡

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰