React-dnd: ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ beginDrag์—์„œ null์ž…๋‹ˆ๊นŒ?

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

๋ฌธ์„œ์—๋Š” _component_๊ฐ€ beginDrag(์„ธ ๋ฒˆ์งธ ๋งค๊ฐœ๋ณ€์ˆ˜)์— ์ „๋‹ฌ๋œ๋‹ค๊ณ  ๋‚˜์™€ ์žˆ์ง€๋งŒ ํ˜ธ์ถœ๋  ๋•Œ null์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๊นŒ? ๋‚ด๊ฐ€ ์ž˜๋ชปํ•˜๊ณ ์žˆ๋Š” ๊ฒƒ์ธ์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์ด ๋„์›€์ด๋œ๋‹ค๋ฉด ๋‚ด ๊ตฌ์„ฑ ์š”์†Œ๋Š” ๋“œ๋ž˜๊ทธ ์†Œ์Šค์ด์ž ๋“œ๋ž˜๊ทธ ๋Œ€์ƒ์ž…๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ ํ•˜๊ณ  ์‹ถ์€ ๊ฒƒ์€ beginDrag ๋‚ด๋ถ€์˜ ๊ตฌ์„ฑ ์š”์†Œ ๋†’์ด๋ฅผ ์–ป๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์ „๋‹ฌ๋œ ์†Œํ’ˆ์—์„œ ํŒŒ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ฏ€๋กœ ๊ตฌ์„ฑ ์š”์†Œ์— ์•ก์„ธ์Šคํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

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

๋ฌธ์ œ๋Š” DnD๊ฐ€ ์ƒํƒœ ๋น„์ €์žฅ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ข‹์•„ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋‚˜๋Š” ๋ณ€ํ–ˆ๋‹ค

const SortableListItem = (props) => {

์—๊ฒŒ

class SortableListItem extends Component {

์ด์ œ _component_๊ฐ€ beginDrag์— ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ „๋‹ฌ๋ฉ๋‹ˆ๋‹ค. ์ƒํƒœ ๋น„์ €์žฅ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์˜ˆ์ƒ๋Œ€๋กœ ์ž‘๋™ํ–ˆ์Œ์„ ์–ธ๊ธ‰ํ•  ๊ฐ€์น˜๊ฐ€ ์žˆ์œผ๋ฏ€๋กœ _component_๊ฐ€ beginDrag์—์„œ null์ธ ์ด์œ ๊ฐ€ ์ƒ๋‹นํžˆ ํ˜ผ๋ž€์Šค๋Ÿฝ์Šต๋‹ˆ๋‹ค.

DnD๊ฐ€ ์ƒํƒœ ๋น„์ €์žฅ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ์ƒํƒœ๋กœ beginDrag ๋ฌธ์„œ๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค(๊ณ ์น  ์ˆ˜ ์—†๋‹ค๊ณ  ๊ฐ€์ •).

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

๋ฌธ์ œ๋Š” DnD๊ฐ€ ์ƒํƒœ ๋น„์ €์žฅ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ข‹์•„ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋‚˜๋Š” ๋ณ€ํ–ˆ๋‹ค

const SortableListItem = (props) => {

์—๊ฒŒ

class SortableListItem extends Component {

์ด์ œ _component_๊ฐ€ beginDrag์— ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ „๋‹ฌ๋ฉ๋‹ˆ๋‹ค. ์ƒํƒœ ๋น„์ €์žฅ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์˜ˆ์ƒ๋Œ€๋กœ ์ž‘๋™ํ–ˆ์Œ์„ ์–ธ๊ธ‰ํ•  ๊ฐ€์น˜๊ฐ€ ์žˆ์œผ๋ฏ€๋กœ _component_๊ฐ€ beginDrag์—์„œ null์ธ ์ด์œ ๊ฐ€ ์ƒ๋‹นํžˆ ํ˜ผ๋ž€์Šค๋Ÿฝ์Šต๋‹ˆ๋‹ค.

DnD๊ฐ€ ์ƒํƒœ ๋น„์ €์žฅ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ์ƒํƒœ๋กœ beginDrag ๋ฌธ์„œ๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค(๊ณ ์น  ์ˆ˜ ์—†๋‹ค๊ณ  ๊ฐ€์ •).

์•—, ์ด๊ฒƒ์— ๋Œ€ํ•ด์„œ๋„ ๋ช‡ ๋ฒˆ์˜ ์‚ฌ์ดํด์„ ๊ฑฐ์ณค์Šต๋‹ˆ๋‹ค( hover() ์ฝœ๋ฐฑ ์ œ์™ธ). ์ด๋ ‡๊ฒŒ ์˜ฌ๋ ค์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค... ๋‹ค์Œ์— ์–ด๋””๋ฅผ ๋ด์•ผํ• ์ง€ ๊ฐ์ด ์žกํžˆ์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

๋ฐฉ๊ธˆ ์ด ๋ฌธ์ œ์— ๋ถ€๋”ช ์ณค์Šต๋‹ˆ๋‹ค. ๋ฌธ์ œ๊ฐ€ receiveComponent ๊ฐ€ null๋กœ ํ˜ธ์ถœ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ฐธ์กฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์กฐ์ •ํ•ด์•ผ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ react-redux ์—…๊ทธ๋ ˆ์ด๋“œํ•˜๊ณ  DragSource connect ed ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ง์ ‘ ๋ž˜ํ•‘ํ•  ๋•Œ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.

ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•: DragSoruce ๋ฐ ์—ฐ๊ฒฐ์˜ ์ˆœ์„œ๋ฅผ ์ „ํ™˜ํ–ˆ์Šต๋‹ˆ๋‹ค. :-/

์ด ๋ฌธ์ œ๋Š” ์ตœ๊ทผ ํ™œ๋™์ด ์—†์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ž๋™์œผ๋กœ ์˜ค๋ž˜๋œ ๊ฒƒ์œผ๋กœ ํ‘œ์‹œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋” ์ด์ƒ ํ™œ๋™์ด ์—†์œผ๋ฉด ํ์‡„๋ฉ๋‹ˆ๋‹ค. ๊ท€ํ•˜์˜ ๊ธฐ์—ฌ์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

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