React-dnd: ๋†“๊ธฐ ๋Œ€์ƒ์„ ๊ฐ€๋ฆฌ ํ‚ค์ง€ ์•Š๋Š” ๊ฒฝ์šฐ ํ™•์ธํ•˜๋Š” ๋ฐฉ๋ฒ•

์— ๋งŒ๋“  2016๋…„ 01์›” 22์ผ  ยท  2์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: react-dnd/react-dnd

์ „ ์„ธ๊ณ„์ ์œผ๋กœ ๋‹ค์–‘ํ•œ DnD ์ƒํƒœ๋ฅผ ์ถ”์ ํ•˜๋Š” ๋ฐ ๋„์›€์ด๋˜๋Š” redux ์ž‘์—…์„ ์‹œ์ž‘ํ•˜๋ ค๊ณ ํ•ฉ๋‹ˆ๋‹ค. ๋“œ๋ž˜๊ทธ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š”์ง€ ์—ฌ๋ถ€์™€ ์–ด๋–ค ์œ ํ˜•์˜ ๋Œ€์ƒ (์ด์ƒ์ ์œผ๋กœ๋Š” ์ •ํ™•ํžˆ ์–ด๋–ค ๋Œ€์ƒ)์„ ๊ฐ€๋ฆฌํ‚ค๊ณ  ์žˆ๋Š”์ง€ ์•Œ์•„์•ผํ•ฉ๋‹ˆ๋‹ค. ๋“œ๋ž˜๊ทธ ๊ฐ์ง€๋Š” Source์˜ ์‚ฌ์–‘์„ ์‚ฌ์šฉํ•˜๋ฉด ์ถฉ๋ถ„ํžˆ ์‰ฝ์ง€๋งŒ ๋Œ€์ƒ์—์„œ ํ˜ธ๋ฒ„๋ง์„ ๊ฐ์ง€ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์‚ฌ์–‘์—๋Š” 'hover'๋ฉ”์†Œ๋“œ๊ฐ€ ์žˆ์ง€๋งŒ ๊ณ„์† ์‹คํ–‰๋˜๋ฉฐ ๋‚ด๊ฐ€ ์•Œ ์ˆ˜์žˆ๋Š” ํ•œ ๋งˆ์šฐ์Šค ์˜ค๋ฒ„๊ฐ€ ์ค‘์ง€๋˜๋Š” ์‹œ์ ์„ ์•Œ ์ˆ˜์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ์—†์Šต๋‹ˆ๋‹ค. ์‹œ๊ฐ„ ์ œํ•œ์„ ์‚ฌ์šฉํ•  ์ˆ˜๋Š” ์žˆ์ง€๋งŒ ์ด์ƒ์ ์ด์ง€ ์•Š์€ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ ์•ฑ ์˜์—ญ์„ dropTarget์œผ๋กœ ๋ž˜ํ•‘ํ•˜๊ณ  '์–•์€'๊ฒ€์‚ฌ๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๊ณ  ์ƒ๊ฐํ–ˆ์ง€๋งŒ ์–ด๋–ค ์œ ํ˜•์˜ ๋“œ๋กญ ๋Œ€์ƒ์ด ํ˜ธ๋ฒ„๋ง๋˜๋Š”์ง€์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” DnD ์ปจํ…์ŠคํŠธ๋ฅผ ์•…์šฉ ํ•  ์ˆ˜์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜์ง€๋งŒ ๊ทธ ์ •๋„๊นŒ์ง€๋Š” ํŒŒํ—ค ์น˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

question

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

componentWillReceiveProps ์ˆ˜๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  nextProps.isOver !== this.props.isOver ๋•Œ ์ž‘์—…์„ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. DropTarget ์˜ collect() ํ•จ์ˆ˜์— isOver: monitor.isOver() ์„ ์ถ”๊ฐ€ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋“  2 ๋Œ“๊ธ€

๋‚ด ์ž์‹ ์˜ onDrag* ์ด๋ฒคํŠธ๋ฅผ ๋ฐ”์ธ๋”ฉํ•˜์—ฌ ํ•„์š”ํ•œ ์ž‘์—…์„ ์ˆ˜ํ–‰ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ๋“œ๋ž˜๊ทธ ๋ฐฑ์—”๋“œ์— ๋Œ€ํ•œ ๊ฐ€์ • ์ธก๋ฉด์—์„œ ๋‚ด ์•ฑ ์ฝ”๋“œ์™€ react-dnd ๊ฐ„์— ์•ฝ๊ฐ„์˜ ์ƒํ˜ธ ์˜์กด์„ฑ์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์•„๋งˆ ๊ดœ์ฐฎ์Šต๋‹ˆ๋‹ค.

componentWillReceiveProps ์ˆ˜๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  nextProps.isOver !== this.props.isOver ๋•Œ ์ž‘์—…์„ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. DropTarget ์˜ collect() ํ•จ์ˆ˜์— isOver: monitor.isOver() ์„ ์ถ”๊ฐ€ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰