React: λ©”λͺ¨ 된 ꡬ성 μš”μ†Œκ°€ 후크와 μ„œμŠ€νŽœμŠ€λ₯Ό λͺ¨λ‘ μ‚¬μš©ν•  λ•Œ κ²½κ³ 

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

κΈ°λŠ₯ 을 μš”μ²­ν•˜κ±°λ‚˜ 버그λ₯Όλ³΄κ³  ν•˜μ‹œκ² μŠ΅λ‹ˆκΉŒ?

κ³€μΆ©

ν˜„μž¬ 행동은 λ¬΄μ—‡μž…λ‹ˆκΉŒ?

λ‹€μŒ 쑰건을 λͺ¨λ‘ μΆ©μ‘±ν•˜λŠ” ꡬ성 μš”μ†Œμ— λŒ€ν•œ κ²½κ³ κ°€ μ½˜μ†”μ— ν‘œμ‹œλ©λ‹ˆλ‹€.

  • React.memo μ‚¬μš©ν•˜μ—¬ λ©”λͺ¨λ©λ‹ˆλ‹€.
  • 그것은 후크λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€
  • μ„œμŠ€νŽœμŠ€λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€ (약속이 λ˜μ Έμ§‘λ‹ˆλ‹€).

κ²½κ³  ν…μŠ€νŠΈ : Warning: ComponentName: Rendered more hooks than during the previous render. This is not currently supported and may lead to unexpected behavior.

ν˜„μž¬ λ™μž‘μ΄ 버그 인 경우 μž¬ν˜„ 단계λ₯Ό μ œκ³΅ν•˜κ³  κ°€λŠ₯ν•˜λ©΄ λ¬Έμ œμ— λŒ€ν•œ μ΅œμ†Œν•œμ˜ 데λͺ¨λ₯Ό μ œκ³΅ν•˜μ‹­μ‹œμ˜€. μ•„λž˜μ— JSFiddle (https://jsfiddle.net/Luktwrdm/) λ˜λŠ” CodeSandbox (https://codesandbox.io/s/new) μ˜ˆμ œμ— λŒ€ν•œ 링크λ₯Ό λΆ™μ—¬ λ„£μœΌμ‹­μ‹œμ˜€.

https://codesandbox.io/s/71lr16j491

μ˜ˆμƒλ˜λŠ” λ™μž‘μ€ λ¬΄μ—‡μž…λ‹ˆκΉŒ?

후크 κ·œμΉ™μ΄ μΆ©μ‘±λ˜μ—ˆμœΌλ―€λ‘œ κ²½κ³ κ°€ ν‘œμ‹œλ˜μ§€ μ•Šμ•„μ•Όν•©λ‹ˆλ‹€. λ˜ν•œ React.memo μ‚¬μš© 여뢀에 관계없이 λ™μž‘μ΄ μΌκ΄€λ˜μ–΄μ•Όν•©λ‹ˆλ‹€.

μ–΄λ–€ λ²„μ „μ˜ React와 μ–΄λ–€ λΈŒλΌμš°μ € / OS가이 문제의 영ν–₯을 λ°›μŠ΅λ‹ˆκΉŒ?

λ°˜μ‘ 16.8.1

Hooks Bug

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

16.8.2μ—μ„œ μˆ˜μ •λ˜μ—ˆμŠ΅λ‹ˆλ‹€.
https://codesandbox.io/s/vmmkmvo6pl

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

λ‚΄ 첫 번째 μ½κΈ°λŠ” 이것이 λ²„κ·Έμž…λ‹ˆλ‹€.

버전 16.8.1 μ—μ„œ 이와 λ™μΌν•œ 문제λ₯Ό λ°œκ²¬ν–ˆμŠ΅λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ 제 κ²½μš°μ—λŠ” Promise κ°€ λ˜μ Έμ§€λŠ” μž₯μ†Œμ™€ Suspense μ»΄ν¬λ„ŒνŠΈ 사이에 λ©”λͺ¨ 된 μ»΄ν¬λ„ŒνŠΈκ°€ μ—†μŠ΅λ‹ˆλ‹€.

ꡬ성 μš”μ†ŒλŠ” Promise κ°€ λ°œμƒν•˜κ³  κ²½κ³ κ°€ ν‘œμ‹œλ˜κΈ° 전에 두 개의 후크λ₯Ό 맨 μœ„μ— μ„ μ–Έν•©λ‹ˆλ‹€. λ‚˜λŠ” 후크와 같은 일이 μΌμ–΄λ‚˜κΈ° 전에 Promise λ₯Ό 맨 μœ„μ— λ˜μ§€λŠ” ν˜ΈμΆœμ„ μ΄λ™ν–ˆμŠ΅λ‹ˆλ‹€. ꡬ성 μš”μ†Œ 내에 Promise λ°œμƒν•˜μ§€ μ•ŠμœΌλ©΄ κ²½κ³ κ°€ μ‚¬λΌμ§‘λ‹ˆλ‹€.

λ‚΄ ꡬ성 μš”μ†Œμ˜ λͺ¨μ˜λŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

function Component(props) {
  const [state, setState] = useState()
  useEffect(...)

  // Promise is thrown somewhere after these two
  // hooks on top, but before the return statement.
  return (
    ...
  )
}

이것을 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

16.8.2μ—μ„œ μˆ˜μ •λ˜μ—ˆμŠ΅λ‹ˆλ‹€.
https://codesandbox.io/s/vmmkmvo6pl

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