[React.js] rc-dock을 사용한 유연한 탭 레이아웃 구현하기

rc-dock이란?

rc-dock은 React 기반의 도킹 및 레이아웃 관리를 위한 라이브러리입니다. rc-dock는 탭 형식의 레이아웃을 생성하고 관리하는 데 사용되는 React 컴포넌트입니다. 다양한 탭을 포함하는 패널을 만들고 사용자가 이를 드래그하여 재배치할 수 있습니다. 또한 동적으로 탭을 추가하고 제거할 수 있습니다.

rc-dock 라이브러리의 주요 특징

1. 유연한 도킹 및 레이아웃 관리: 패널을 자유롭게 이동, 크기 조정 및 도킹할 수 있습니다.
2. 사용자 지정 가능한 설정: 레이아웃, 도킹 동작, 스타일 등을 사용자 정의할 수 있습니다.
3. 다양한 레이아웃 유형: 수평, 수직, 격자 등 다양한 레이아웃을 지원합니다.
4. 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