๋ฌธ์์๋ _component_๊ฐ beginDrag(์ธ ๋ฒ์งธ ๋งค๊ฐ๋ณ์)์ ์ ๋ฌ๋๋ค๊ณ ๋์ ์์ง๋ง ํธ์ถ๋ ๋ null์ธ ๊ฒ ๊ฐ์ต๋๊น? ๋ด๊ฐ ์๋ชปํ๊ณ ์๋ ๊ฒ์ธ์ง ํ์คํ์ง ์์ต๋๋ค. ๊ทธ๊ฒ์ด ๋์์ด๋๋ค๋ฉด ๋ด ๊ตฌ์ฑ ์์๋ ๋๋๊ทธ ์์ค์ด์ ๋๋๊ทธ ๋์์ ๋๋ค.
๋ด๊ฐ ํ๊ณ ์ถ์ ๊ฒ์ beginDrag ๋ด๋ถ์ ๊ตฌ์ฑ ์์ ๋์ด๋ฅผ ์ป๋ ๊ฒ์ ๋๋ค. ์ด๊ฒ์ ์ ๋ฌ๋ ์ํ์์ ํ์์ํฌ ์ ์๋ ๊ฒ์ด ์๋๋ฏ๋ก ๊ตฌ์ฑ ์์์ ์ก์ธ์คํด์ผ ํฉ๋๋ค.
๋ฌธ์ ๋ DnD๊ฐ ์ํ ๋น์ ์ฅ ๊ตฌ์ฑ ์์๋ฅผ ์ข์ํ์ง ์๋๋ค๋ ๊ฒ์ ๋๋ค.
๋๋ ๋ณํ๋ค
const SortableListItem = (props) => {
์๊ฒ
class SortableListItem extends Component {
์ด์ _component_๊ฐ beginDrag์ ์ฌ๋ฐ๋ฅด๊ฒ ์ ๋ฌ๋ฉ๋๋ค. ์ํ ๋น์ ์ฅ ๊ตฌ์ฑ ์์๊ฐ ์์๋๋ก ์๋ํ์์ ์ธ๊ธํ ๊ฐ์น๊ฐ ์์ผ๋ฏ๋ก _component_๊ฐ beginDrag์์ null์ธ ์ด์ ๊ฐ ์๋นํ ํผ๋์ค๋ฝ์ต๋๋ค.
DnD๊ฐ ์ํ ๋น์ ์ฅ ๊ตฌ์ฑ ์์์์ ์๋ํ์ง ์๋๋ค๋ ์ํ๋ก beginDrag ๋ฌธ์๋ฅผ ์ ๋ฐ์ดํธํ๋ ๊ฒ์ด ์ข์ต๋๋ค(๊ณ ์น ์ ์๋ค๊ณ ๊ฐ์ ).
์, ์ด๊ฒ์ ๋ํด์๋ ๋ช ๋ฒ์ ์ฌ์ดํด์ ๊ฑฐ์ณค์ต๋๋ค( hover()
์ฝ๋ฐฑ ์ ์ธ). ์ด๋ ๊ฒ ์ฌ๋ ค์ฃผ์
์ ๊ฐ์ฌํฉ๋๋ค... ๋ค์์ ์ด๋๋ฅผ ๋ด์ผํ ์ง ๊ฐ์ด ์กํ์ง ์์์ต๋๋ค.
๋ฐฉ๊ธ ์ด ๋ฌธ์ ์ ๋ถ๋ช ์ณค์ต๋๋ค. ๋ฌธ์ ๊ฐ receiveComponent
๊ฐ null๋ก ํธ์ถ๋๊ธฐ ๋๋ฌธ์ ์ฐธ์กฐ๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์กฐ์ ํด์ผ ํ ์ ์์ต๋๋ค.
์ด๊ฒ์ react-redux
์
๊ทธ๋ ์ด๋ํ๊ณ DragSource
connect
ed ๊ตฌ์ฑ ์์๋ฅผ ์ง์ ๋ํํ ๋ ๋ฐ์ํ์ต๋๋ค.
ํด๊ฒฐ ๋ฐฉ๋ฒ: DragSoruce ๋ฐ ์ฐ๊ฒฐ์ ์์๋ฅผ ์ ํํ์ต๋๋ค. :-/
์ด ๋ฌธ์ ๋ ์ต๊ทผ ํ๋์ด ์์๊ธฐ ๋๋ฌธ์ ์๋์ผ๋ก ์ค๋๋ ๊ฒ์ผ๋ก ํ์๋์์ต๋๋ค. ๋ ์ด์ ํ๋์ด ์์ผ๋ฉด ํ์๋ฉ๋๋ค. ๊ทํ์ ๊ธฐ์ฌ์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋ฌธ์ ๋ DnD๊ฐ ์ํ ๋น์ ์ฅ ๊ตฌ์ฑ ์์๋ฅผ ์ข์ํ์ง ์๋๋ค๋ ๊ฒ์ ๋๋ค.
๋๋ ๋ณํ๋ค
const SortableListItem = (props) => {
์๊ฒ
class SortableListItem extends Component {
์ด์ _component_๊ฐ beginDrag์ ์ฌ๋ฐ๋ฅด๊ฒ ์ ๋ฌ๋ฉ๋๋ค. ์ํ ๋น์ ์ฅ ๊ตฌ์ฑ ์์๊ฐ ์์๋๋ก ์๋ํ์์ ์ธ๊ธํ ๊ฐ์น๊ฐ ์์ผ๋ฏ๋ก _component_๊ฐ beginDrag์์ null์ธ ์ด์ ๊ฐ ์๋นํ ํผ๋์ค๋ฝ์ต๋๋ค.
DnD๊ฐ ์ํ ๋น์ ์ฅ ๊ตฌ์ฑ ์์์์ ์๋ํ์ง ์๋๋ค๋ ์ํ๋ก beginDrag ๋ฌธ์๋ฅผ ์ ๋ฐ์ดํธํ๋ ๊ฒ์ด ์ข์ต๋๋ค(๊ณ ์น ์ ์๋ค๊ณ ๊ฐ์ ).