React-dnd: useDrop DropTargetHookSpec 수락 μœ ν˜•μ—λŠ” ν•¨μˆ˜ μœ ν˜•μ΄ ν¬ν•¨λ˜μ–΄μ•Ό ν•©λ‹ˆλ‹€.

에 λ§Œλ“  2020λ…„ 08μ›” 20일  Β·  3μ½”λ©˜νŠΈ  Β·  좜처: react-dnd/react-dnd

버그 μ„€λͺ…
useDrop에 λŒ€ν•œ λ¬Έμ„œ μ—λŠ” 사양 개체 멀버 accept κ°€ "λ¬Έμžμ—΄, ES6 기호, λ‘˜ 쀑 ν•˜λ‚˜μ˜ λ°°μ—΄ λ˜λŠ” 주어진 ꡬ성 μš”μ†Œμ˜ μ†Œν’ˆμ—μ„œ λ‘˜ 쀑 ν•˜λ‚˜λ₯Ό λ°˜ν™˜ν•˜λŠ” ν•¨μˆ˜"라고 λ‚˜μ™€ μžˆμŠ΅λ‹ˆλ‹€.
κ·ΈλŸ¬λ‚˜ μ½”λ“œ μ—μ„œ accept λŠ” TargetType 둜 μ •μ˜λ˜λ©° μ΄λŠ” string | symbol λ˜λŠ” κ·Έ λ°°μ—΄μž…λ‹ˆλ‹€.

μ˜ˆμƒλ˜λŠ” 행동
accept λŠ” TargetType λ₯Ό λ°˜ν™˜ν•˜λŠ” ν•¨μˆ˜κ°€ κ°€λŠ₯ν•œ νƒ€μž…μ΄μ–΄μ•Ό ν•©λ‹ˆλ‹€.

μΆ”κ°€ μ»¨ν…μŠ€νŠΈ
accept 을 λ™μ μœΌλ‘œ μ—…λ°μ΄νŠΈν•˜κ³  μ‹ΆμŠ΅λ‹ˆλ‹€. useDrop 의 accept 값을 λ³€κ²½ν•˜λ©΄ κ°€λŠ₯ν•˜λ‹€κ³  μƒκ°ν–ˆμ§€λ§Œ μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. ν˜„μž¬ 이 μž‘μ—…μ„ μˆ˜ν–‰ν•˜λŠ” 방법을 μ•Œ 수 μ—†μœΌλ©° μ„€λͺ…μ„œμ—μ„œ μ„€λͺ…ν•˜λŠ” λ™μž‘μ„ 찾을 수 μ—†μŠ΅λ‹ˆλ‹€.

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

이것이 이상적인 μ†”λ£¨μ…˜μ΄ μ•„λ‹ˆλΌλŠ” 것을 μ•Œκ³  μžˆμ§€λ§Œ 이것이 ν•΄κ²°λ˜κ³  μš°λ¦¬κ°€ λŒ€μƒ μœ ν˜• 생산 κΈ°λŠ₯을 κ°€μ§ˆ 수 μžˆμ„ λ•ŒκΉŒμ§€ ν•΄κ²° 방법 key λ“œλ‘­ νƒ€κ²Ÿ. μ΄λ ‡κ²Œ ν•˜λ©΄ ν—ˆμš©λ˜λŠ” μœ ν˜•μ„ λ³€κ²½ν•œ ν›„ λ‹€μ‹œ λ§ˆμš΄νŠΈλ©λ‹ˆλ‹€. λ‚˜λŠ” 였늘이 μ •ν™•ν•œ λ¬Έμ œμ— μ§λ©΄ν–ˆμŠ΅λ‹ˆλ‹€.

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

이것이 이상적인 μ†”λ£¨μ…˜μ΄ μ•„λ‹ˆλΌλŠ” 것을 μ•Œκ³  μžˆμ§€λ§Œ 이것이 ν•΄κ²°λ˜κ³  μš°λ¦¬κ°€ λŒ€μƒ μœ ν˜• 생산 κΈ°λŠ₯을 κ°€μ§ˆ 수 μžˆμ„ λ•ŒκΉŒμ§€ ν•΄κ²° 방법 key λ“œλ‘­ νƒ€κ²Ÿ. μ΄λ ‡κ²Œ ν•˜λ©΄ ν—ˆμš©λ˜λŠ” μœ ν˜•μ„ λ³€κ²½ν•œ ν›„ λ‹€μ‹œ λ§ˆμš΄νŠΈλ©λ‹ˆλ‹€. λ‚˜λŠ” 였늘이 μ •ν™•ν•œ λ¬Έμ œμ— μ§λ©΄ν–ˆμŠ΅λ‹ˆλ‹€.

λ‚˜λ„ 이것을 μ•Œμ•„μ°¨λ Έμ§€λ§Œ canDrop λ₯Ό μ‚¬μš©ν•˜μ—¬ ν•΄κ²°ν–ˆμŠ΅λ‹ˆλ‹€.

이것이 이상적인 μ†”λ£¨μ…˜μ΄ μ•„λ‹ˆλΌλŠ” 것을 μ•Œκ³  μžˆμ§€λ§Œ 이것이 ν•΄κ²°λ˜κ³  μš°λ¦¬κ°€ λŒ€μƒ μœ ν˜• 생산 κΈ°λŠ₯을 κ°€μ§ˆ 수 μžˆμ„ λ•ŒκΉŒμ§€ ν•΄κ²° 방법 key λ“œλ‘­ νƒ€κ²Ÿ. μ΄λ ‡κ²Œ ν•˜λ©΄ ν—ˆμš©λ˜λŠ” μœ ν˜•μ„ λ³€κ²½ν•œ ν›„ λ‹€μ‹œ λ§ˆμš΄νŠΈλ©λ‹ˆλ‹€. λ‚˜λŠ” 였늘이 μ •ν™•ν•œ λ¬Έμ œμ— μ§λ©΄ν–ˆμŠ΅λ‹ˆλ‹€.

이 μ˜κ²¬μ„ λ°˜μ˜ν•˜κΈ° μœ„ν•΄: λΆ€μšΈμ„ 기반으둜 ν•˜λŠ” λ™μΌν•œ ꡬ성 μš”μ†Œμ˜ 두 가지 버전을 λ Œλ”λ§ν•˜λŠ” 삼항이 μžˆλŠ” 상황이 μžˆμ—ˆμŠ΅λ‹ˆλ‹€. μ˜λ¦¬ν•œ λ°˜μ‘μ€ λ™μΌν•œ ꡬ성 μš”μ†Œμ΄μ§€λ§Œ λ‹€λ₯Έ μ†Œν’ˆμ„ μ‚¬μš©ν•œλ‹€λŠ” 것을 κΉ¨λ‹¬μ•˜μŠ΅λ‹ˆλ‹€. 이 삼항을 μ‚¬μš©ν•˜μ—¬ λΆ€μšΈμ„ 기반으둜 마운트/μ–Έλ§ˆμš΄νŠΈν•˜λŠ” 독립 λ…Έλ“œλ‘œ λ Œλ”λ§ν•˜λ €κ³  μ‹œλ„ν–ˆμ§€λ§Œ μ‹€μ œλ‘œλŠ” λ‹€μ‹œ λ§ˆμš΄νŠΈν•˜λŠ” λŒ€μ‹  λ‹€μ‹œ λ Œλ”λ§λ˜μ—ˆμŠ΅λ‹ˆλ‹€. λ”°λΌμ„œ accept λŠ” μƒˆ propsκ°€ μ•„λ‹Œ μ›λž˜ propsλ₯Ό 기반으둜 ν–ˆμœΌλ©° useDrop λŠ” ν•΄λ‹Ή props 변경에 따라 μ—…λ°μ΄νŠΈλ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

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