개인 프로젝트 - React로 Drag and Drop List 만들기 #1

드래그 앤 드롭이 가능한 리스트를 라이브러리 없이 만들어보자.

Colin Park (Hong mae)2020년 11월 3일

두번째 어떤 프로젝트를 할까 고민중에 드래그 앤 드롭이 되는 리스트를 만들기로 했다.

React 라이브러리로 좋은 라이브러리들이 있었지만 html drag and drop api을 이용해서 라이브리러리 없이 만들고 싶었다.

html에서 제공하는 drag and drop api에서 유심히 본 api는 다음과 같다. ~~사실 밑에있는게 전부다.~~

그리고 드래그 앤 드롭을 할 요소에 draggable을 추가하고 드래그 요소를 클릭하고 이동시 grab한 효과가 추가된다.

	const App = () => {
	return (
	<div className='App'>
	<ul className='List'>
	{
	["Red", "Orange", "Yellow", "Green", "Blue", "DarkBlue", "Purple"].map((color, index) => (
	<li
	draggable
	style={{
	backgroundColor: color,
	color: "white"
	}}
	>
	{color}
	</li>
	))
	}
	</ul>
	</div>
	)
	}

	export default App;

React Hooks API중 하나인 useState를 이용해 기본 리스트 및 변경된 리스트를 저장한다.

설정한 state를 바탕으로 html을 보여준다.

	import { useState } from 'react';

	const _SocialNetworks = [
	{title: "Twitter", color: "white", backgroundColor: "Red"},
	{title: "Facebook", color: "black", backgroundColor: "Orange"},
	{title: "Line", color: "black", backgroundColor: "Yellow"},
	{title: "Instagram", color: "white", backgroundColor: "Green"},
	{title: "Telegram", color: "white", backgroundColor: "Blue"},
	{title: "KaKao", color: "white", backgroundColor: "DarkBlue"},
	{title: "LinkedIn", color: "white", backgroundColor: "Purple"},
	]

	const App = () => {
	const [ lists, setLists ] = useState(_SocialNetworks);

	return (
	<div className='App'>
	<ul className='List'>
	{
	lists.map((sns, index) => (
	<li
	draggable
	style={{
	backgroundColor: sns.backgroundColor,
	color: sns.color,
	fontSize: "bold"
	}}
	>
	{sns.title}
	</li>
	))
	}
	</ul>
	</div>
	)
	}

	export default App

다음 포스트에서 계속

Published Nov 3, 2020

Nothing great was ever achieved without enthusiasm. - 랠프 월도 에머슨Colin Park (Hong mae) on Github