์ ์ธ๊ณ์ ์ผ๋ก ๋ค์ํ DnD ์ํ๋ฅผ ์ถ์ ํ๋ ๋ฐ ๋์์ด๋๋ redux ์์ ์ ์์ํ๋ ค๊ณ ํฉ๋๋ค. ๋๋๊ทธ๊ฐ ๋ฐ์ํ๋์ง ์ฌ๋ถ์ ์ด๋ค ์ ํ์ ๋์ (์ด์์ ์ผ๋ก๋ ์ ํํ ์ด๋ค ๋์)์ ๊ฐ๋ฆฌํค๊ณ ์๋์ง ์์์ผํฉ๋๋ค. ๋๋๊ทธ ๊ฐ์ง๋ Source์ ์ฌ์์ ์ฌ์ฉํ๋ฉด ์ถฉ๋ถํ ์ฝ์ง๋ง ๋์์์ ํธ๋ฒ๋ง์ ๊ฐ์งํ๋ ๋ฐฉ๋ฒ์ ์ ์ ์์ต๋๋ค. ์ฌ์์๋ 'hover'๋ฉ์๋๊ฐ ์์ง๋ง ๊ณ์ ์คํ๋๋ฉฐ ๋ด๊ฐ ์ ์์๋ ํ ๋ง์ฐ์ค ์ค๋ฒ๊ฐ ์ค์ง๋๋ ์์ ์ ์ ์์๋ ๋ฐฉ๋ฒ์ด ์์ต๋๋ค. ์๊ฐ ์ ํ์ ์ฌ์ฉํ ์๋ ์์ง๋ง ์ด์์ ์ด์ง ์์ ๊ฒ ๊ฐ์ต๋๋ค. ๊ธฐ๋ณธ ์ฑ ์์ญ์ dropTarget์ผ๋ก ๋ํํ๊ณ '์์'๊ฒ์ฌ๋ฅผ ์ฌ์ฉํ๋ ค๊ณ ์๊ฐํ์ง๋ง ์ด๋ค ์ ํ์ ๋๋กญ ๋์์ด ํธ๋ฒ๋ง๋๋์ง์ ๋ํ ์ ๋ณด๋ฅผ ์ ๊ณตํ์ง ์์ต๋๋ค. ๋๋ DnD ์ปจํ ์คํธ๋ฅผ ์ ์ฉ ํ ์์๋ ๋ฐฉ๋ฒ์ด ์๋ค๊ณ ์๊ฐํ์ง๋ง ๊ทธ ์ ๋๊น์ง๋ ํํค ์น์ง ์์์ต๋๋ค.
๋ด ์์ ์ onDrag*
์ด๋ฒคํธ๋ฅผ ๋ฐ์ธ๋ฉํ์ฌ ํ์ํ ์์
์ ์ํ ํ ์ ์์ต๋๋ค. ๋ด๊ฐ ์ฌ์ฉํ๋ ๋๋๊ทธ ๋ฐฑ์๋์ ๋ํ ๊ฐ์ ์ธก๋ฉด์์ ๋ด ์ฑ ์ฝ๋์ react-dnd
๊ฐ์ ์ฝ๊ฐ์ ์ํธ ์์กด์ฑ์ ์ถ๊ฐํฉ๋๋ค. ํ์ง๋ง ์๋ง ๊ด์ฐฎ์ต๋๋ค.
componentWillReceiveProps
์๋ช
์ฃผ๊ธฐ ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๊ณ nextProps.isOver !== this.props.isOver
๋ ์์
์ ์คํํ ์ ์์ต๋๋ค. DropTarget
์ collect()
ํจ์์ isOver: monitor.isOver()
์ ์ถ๊ฐํด์ผํฉ๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
componentWillReceiveProps
์๋ช ์ฃผ๊ธฐ ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๊ณnextProps.isOver !== this.props.isOver
๋ ์์ ์ ์คํํ ์ ์์ต๋๋ค.DropTarget
์collect()
ํจ์์isOver: monitor.isOver()
์ ์ถ๊ฐํด์ผํฉ๋๋ค.