티스토리 뷰
rc-dock이란?
rc-dock은 React 기반의 도킹 및 레이아웃 관리를 위한 라이브러리입니다. rc-dock는 탭 형식의 레이아웃을 생성하고 관리하는 데 사용되는 React 컴포넌트입니다. 다양한 탭을 포함하는 패널을 만들고 사용자가 이를 드래그하여 재배치할 수 있습니다. 또한 동적으로 탭을 추가하고 제거할 수 있습니다.
rc-dock 라이브러리의 주요 특징
- 유연한 도킹 및 레이아웃 관리: 패널을 자유롭게 이동, 크기 조정 및 도킹할 수 있습니다.
- 사용자 지정 가능한 설정: 레이아웃, 도킹 동작, 스타일 등을 사용자 정의할 수 있습니다.
- 다양한 레이아웃 유형: 수평, 수직, 격자 등 다양한 레이아웃을 지원합니다.
- React 기반: React 애플리케이션과의 통합이 쉽습니다.
사용 예시
사용법
먼저, rc-dock를 설치합니다.
npm install rc-dock
이제 코드를 통해 사용법을 알아보도록 합시다.
import DockLayout from "rc-dock";
import "./styles/rc-dock-dark.css"; // 다크모드(커스텀)
// import "rc-dock/dist/rc-dock.css"; // 기본모드
function App() {
// 초기 레이아웃 설정
const defaultLayout = {
dockbox: {
mode: "vertical", // 수직 모드로 설정
children: [
{
id: "my_panel", // 패널의 고유한 ID
tabs: [
// 패널에 초기 탭 설정
{
id: 1, // 탭의 고유한 ID
content: <div>content1</div>, // 탭 내용
title: "tab1", // 탭 제목
},
],
},
],
},
};
return (
<div>
{/* DockLayout 컴포넌트 */}
<DockLayout
defaultLayout={defaultLayout} // 초기 레이아웃 설정
style={{ position: "absolute", left: 10, top: 40, right: 10, bottom: 10 }} // 스타일 설정
/>
</div>
);
}
export default App;
DockLayout을 통해 레이아웃을 생성하고 defalutLayout으로 초기 레이아웃을 설정해줍니다.
tabs 배열을 통해 탭과 해당 탭에 속해있는 content를 설정할 수 있습니다.
구현된 화면입니다.
이제 버튼을 통해 탭을 추가하는 방법에 대해 설명하겠습니다.
add 함수를 만들어줍니다.
add 함수 생성
// 탭 추가 함수
const addTab = () => {
const newTab = {
id: 2, // 탭의 고유한 ID
content: <div>New Tab</div>, // 탭 내용
title: "New Tab", // 탭 제목
closable: true, // 닫을 수 있는지
}; // 새로운 탭 생성
dockLayoutRef.current.dockMove(newTab, "my_panel", "middle"); // 생성한 탭을 DockLayout에 추가
};
탭을 DockLayout에 추가하려면 마지막 줄처럼 ref를 통해 추가시켜줘야합니다.
ref를 DockLayout에 설정해줍시다.
dockLayoutRef 생성
const dockLayoutRef = useRef(null); // DockLayout 컴포넌트에 대한 ref 생성
DockLayout에 ref 설정
<DockLayout
ref={dockLayoutRef} // ref 설정
defaultLayout={defaultLayout} // 초기 레이아웃 설정
style={{ position: "absolute", left: 10, top: 40, right: 10, bottom: 10 }} // 스타일 설정
/>
이제 버튼을 통해 추가해봅시다.
<button className="btn" onClick={addTab}>
Add Tab
</button>
Add Tab 버튼을 누르면 New Tab이 생성되는 것을 확인할 수 있습니다.
코드를 좀 더 리팩토링 해보겠습니다.
getTab 함수를 생성해줍니다.
getTab 함수
// 탭 형식에 맞게 만드는 함수
function getTab(id, component) {
return {
id, // 탭의 고유한 ID
content: component, // 탭 내용
title: id, // 탭 제목
};
}
그 후 탭의 id와 title을 count를 통해 관리하기 위해 count 상태 변수를 추가해줍니다.
const [count, setCount] = useState(2); // 탭의 개수를 관리하기 위한 상태
addTab 함수를 수정해줍시다.
// 탭 추가 함수
const addTab = () => {
setCount((prevCount) => prevCount + 1); // 탭 개수 증가
const newTab = getTab(`tab${count + 1}`, <Test />); // 새로운 탭 생성
dockLayoutRef.current.dockMove(newTab, "my_panel", "middle"); // 생성한 탭을 DockLayout에 추가
};
defalutLayout에 tabs도 getTab을 통해 설정하도록 수정해줍시다.
// 초기 레이아웃 설정
const defaultLayout = {
dockbox: {
mode: "vertical", // 수직 모드로 설정
children: [
{
id: "my_panel", // 패널의 고유한 ID
tabs: [
// 패널에 초기 탭 설정
getTab("tab1", 1),
getTab("tab2", 2),
],
},
],
},
};
버튼을 누르면 tab3가 추가되는 것을 확인할 수 있습니다.
전체 코드
import DockLayout from "rc-dock";
import React, { useRef, useState } from "react";
import "./styles/rc-dock-dark.css"; // 다크모드(커스텀)
import Test from "./components/test";
// import "rc-dock/dist/rc-dock.css"; // 기본모드
// 탭 형식에 맞게 만드는 함수
function getTab(id, component) {
return {
id, // 탭의 고유한 ID
content: component, // 탭 내용
title: id, // 탭 제목
};
}
function App() {
const dockLayoutRef = useRef(null); // DockLayout 컴포넌트에 대한 ref 생성
const [count, setCount] = useState(2); // 탭의 개수를 관리하기 위한 상태
// 탭 추가 함수
const addTab = () => {
setCount((prevCount) => prevCount + 1); // 탭 개수 증가
const newTab = getTab(`tab${count + 1}`, <Test />); // 새로운 탭 생성
dockLayoutRef.current.dockMove(newTab, "my_panel", "middle"); // 생성한 탭을 DockLayout에 추가
};
// 초기 레이아웃 설정
const defaultLayout = {
dockbox: {
mode: "vertical", // 수직 모드로 설정
children: [
{
id: "my_panel", // 패널의 고유한 ID
tabs: [
// 패널에 초기 탭 설정
getTab("tab1", 1),
getTab("tab2", 2),
],
},
],
},
};
return (
<div>
{/* 탭 추가 버튼 */}
<button className="btn" onClick={addTab}>
Add Tab
</button>
{/* DockLayout 컴포넌트 */}
<DockLayout
ref={dockLayoutRef} // ref 설정
defaultLayout={defaultLayout} // 초기 레이아웃 설정
style={{ position: "absolute", left: 10, top: 40, right: 10, bottom: 10 }} // 스타일 설정
/>
</div>
);
}
export default App;
더 많은 기능은 github를 참고해주시길 바랍니다.
깃허브 링크 : https://github.com/ticlo/rc-dock
'React.js' 카테고리의 다른 글
[React.js] 메모리제이션을 통해 성능 최적화 하기 (0) | 2024.05.20 |
---|---|
[React.js] axios.interceptors를 이용하여 액세스 토큰 재발급 및 헤더 설정하기 (0) | 2024.05.15 |
[React.js] 커스텀 훅 사용하기 (useInput, useToggle) (0) | 2024.01.17 |
[React.js] 드래그 앤 드롭으로 삭제 구현 (0) | 2024.01.13 |
[React.js] 메타마스크 sepolia 테스트넷 트랜잭션 보내기 (1) | 2023.11.14 |
- Total
- Today
- Yesterday
- 20551
- stompjs
- baekjoon
- useQuery
- js
- 4659
- 25329
- zustand
- revalidateTag
- 9575
- useMemo
- NextAuth
- dynamic routing
- eventemitter3
- 해시를 사용한 집합과 맵
- rc-dock
- useCallback
- React
- useState
- react-three-fiber
- 백준
- revalidatePath
- 24431
- useMutation
- sepolia
- react-quey
- React.JS
- Next.js
- react-query
- RefreshToken
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |