@badahertz52/sortable-list-tsc v0.0.11
sortable-list-tsc
๐sortable-list-tsc ํจํค์ง ๋ฐ๋ก๊ฐ๊ธฐ
๐ sortable-list-tsc ํจํค์ง ์ฌ์ฉํ ์ํ ๋ณด๋ฌ๊ฐ๊ธฐ
1. Sortable List
1) ์๊ฐ
๋ง์ฐ์ค์ ๋๋๊ทธ, ๋๋กญ (๋ชจ๋ฐ์ผ ๋ธ๋ผ์ฐ์ ์์๋ ํฐ์น)์ ์ด์ฉํด ์์ดํ ์ ์ฌ์ ๋ ฌํ ํ ์ ์๋ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ sortable-list ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ react(with js)์์๋ง ์ฌ์ฉํ ์ ์์๊ธฐ ๋๋ฌธ์, typescript ๋ก ์งํํ๋ react ํ๋ก์ ํธ์์๋ ์ฌ์ฉํ ์ ์๋ sortable-list-tsc๋ฅผ ๋ง๋ค์๋ค.
๐sortable-list github ๋ฐ๋ก๊ฐ๊ธฐ
๐sortable-list npm ๋ฐ๋ก๊ฐ๊ธฐ
2) ์ฌ์ฉ ๋ฐฉ๋ฒ
A. ์ค์น
npm i @badahertz52/sortable-list-tsc
B. ์ค๋ช
a. ์ปดํฌ๋ํธ
โ SortableItem
์ฌ์ฉ์๊ฐ ์ง์ ํ data ์์ ์์ดํ ๋ค์ ๊ฐ์ธ๊ณ ์๋ html์์, ๋๋๊ทธ,๋๋กญ ์ด๋ฒคํธ(๋ชจ๋ฐ์ผ์์๋ ํฐ์น ์ด๋ฒคํธ)๋ฅผ ํตํด ์ฌ์ ๋ ฌ๋๋ค.
type SortableListItemProps = {
index: number;
draggable: boolean;
children?: ReactNode;
onDragStart?: (index: number) => void;
onDropItem: (index: number) => void;
onClickItem?: (index: number) => void;
mobileDrag: boolean;
setMobileDrag: Dispatch<SetStateAction<boolean>>;
};
const SortableItem = ({ props }: SortableListItemProps) => {
return <li>{props.children}</li>;
};
- SortableItem์ props |props|์ค๋ช | |---|---| |index|SortableItem์ด ๊ฐ์ธ๊ณ ์๋ data ์ ์์ดํ ์ index | draggable|๋ง์ฐ์ค๋ก ๋๋๊ทธ ํ ์ ์๋ ์ง ์ฌ๋ถ. type:boolean| children|data ์์ ์์ดํ ์ ํ๋ฉด์ ํ์ํ๋ ์ปดํฌ๋ํธ ์์ : TestItem | onDragStart| ๋๋๊ทธ ์,startIndex์ ์ํ๋ฅผ ๋๋๊ทธ๋๋ ์์ดํ ์ index๋ก ๋ณ๊ฒฝํ๋ ํจ์ | onDropItem| ์์ดํ ์ ๋๋กญ ์, ๋๋กญ๋๋ ์์น์ ๋ง๊ฒ ์์ดํ ์ ์ฌ์ ๋ ฌํ๋ ํจ์| onClickItem|์ ๋ ฌ๋ ์์ดํ ๋ค์ ํด๋ฆญ ํ ๋ ๋ฐ์ํ๋ ์ด๋ฒคํธ| mobileDrag, setMobileDrag|๋ชจ๋ฐ์ผ ๋ธ๋ผ์ฐ์ ์์ ๋๋๊ทธ์ค ๋๋กญ์ ์์ํ๋ ์ง ์ฌ๋ถ|
โ SortableList
์ฌ๋ฌ ๊ฐ์ SortableItem์ ๊ฐ์ง๊ณ ์๋, SortableItem์ ๋ถ๋ชจ ์์
type SortableListProps = {
data: any;
onClickItem: (index: number) => void;
renderItem: (item: any, index: number) => JSX.Element;
updateList?: (newPlayList: any) => void;
dragItemStyleProps?: CSSProperties;
};
const SortableList = ({props}:SortableListProps) => {
....
}
- SortableList์ props |props|์ค๋ช | |---|---| |data|์ ๋ ฌํ ์์ดํ ๋ค์ ๋ด์ ๋ฐฐ์ด๋ก ๋ฐฐ์ด์ ์์์ ํ์์ ์ฌ์ฉ์๊ฐ ์ง์ ํ ์ ์์. type: Array| |onClickItem|์ ๋ ฌ๋ ์์ดํ ๋ค์ ํด๋ฆญ ํ ๋ ๋ฐ์ํ๋ ์ด๋ฒคํธ | |renderItem| SortableItem์ children ์์๋ฅผ ๋ฐํํ๋ ํจ์๋ก ์ ๋ ฌํ ์์ดํ ์ ํ๋ฉด์์ ์ด๋ป๊ฒ ๋ณด์ผ ์ง๋ฅผ ๊ฒฐ์ ํจ. parameter: item (data์ item), index(item์ data ์ index) | |updateData|onDropItem ์์ item์ ์ฌ์ก๋ ฌํด data๋ฅผ ๋ณ๊ฒฝํ ๋, ๋ณ๊ฒฝ๋ data๋ฅผ SortableList ์ธ๋ถ์์๋ ๋ฐ์ํ ์ ์๊ฒ ํด์ค | |dragItemStyleProps| ๋ชจ๋ฐ์ผ ๋ธ๋ผ์ฐ์ ์์ ๋๋๊ทธ์ค ๋๋กญ์ ์คํ ์, ํฐ์น ํฌ์ธํธ๋ฅผ ๋ฐ๋ผ๋ค๋๋ ์์์ ์คํ์ผ๋ก ๊ธฐ๋ณธ๊ฐ์ undefined. type:CSSProperties|undefined|
b. ์ฌ์ฉ ์์
- App.js
import SortableList from "@badahertz52/sortable-list/dist/SortableList";
import { data } from "./TestItem/testData";
import TestItem from "./TestItem/TestItem";
function App() {
const onClickItem = (index) => {
alert(index);
};
return (
<SortableList
data={data}
renderItem={(item, index) => <TestItem data={item} index={index} />}
onClickItem={onClickItem}
/>
);
}
export default App;
import React from "react";
import "./TestItem.css";
function TestItem({ data, index }) {
return (
<div className="test-item">
<div>
<p>content:{data.content}</p>
<p>index:{index}</p>
</div>
</div>
);
}
export default TestItem;
- testData.js
export const data = [
{ content: "Apple ๐" },
{ content: "Banana ๐" },
{ content: "Carrot ๐ฅ" },
{ content: "Dessert ๐ง" },
];
2. Skill & Scripts
Skill
- HTML, CSS, TypeScript
- React
install
npm i
start
npm run start
publish
npm publish
Update
๐ง 2023 .8
- ๋ชจ๋ฐ์ผ ๋ธ๋ผ์ฐ์ ์์๋ ํฐ์น๋ฅผ ํตํด ๋๋๊ทธ ์ค ๋๋กญ์ ํ ์ ์๋๋ก ํจ