[React] React-Grid-Layout으로 드래그 가능한 반응형 그리드 디자인 구현하기

1. React-Grid-Layout 이란?

React-Grid-Layout은 React 기반의 그리드 레이아웃 시스템입니다. 특히 반응형 웹 디자인에 최적화되어 있으며, 드래그 앤 드롭 기능을 제공하여 사용자 친화적인 인터페이스를 제공합니다.

장점:

• • 유연성: 다양한 그리드 레이아웃 구성 가능.
• • 반응형 디자인: 화면 크기에 따라 자동으로 레이아웃 조정.
• • 드래그 앤 드롭 지원: 웹 페이지의 항목 재배치 가능.

2. 설치 및 적용 방법

설치:

npm install react-grid-layout

적용:

import React from 'react';
import { Responsive, WidthProvider } from 'react-grid-layout';

const ResponsiveGridLayout = WidthProvider(Responsive);

3. 예제 및 주요 props 설명

아래 예제는 `react-grid-layout`을 활용하여 다양한 화면 크기에 대응하는 그리드 레이아웃을 만듭니다.

import React from 'react';
import { Responsive, WidthProvider } from 'react-grid-layout';

const ResponsiveGridLayout = WidthProvider(Responsive);

export default function MyGridLayout() {
    const layouts = {
        lg: [
            {i: 'a', x: 0, y: 0, w: 4, h: 2},
            {i: 'b', x: 4, y: 0, w: 4, h: 2},
            {i: 'c', x: 8, y: 0, w: 4, h: 2}
        ]
    };

    return (
        <ResponsiveGridLayout 
            className="layout" 
            layouts={layouts}
            breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
            cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}
            rowHeight={50}>
            <div key="a" style={{background: 'red'}}>A</div>
            <div key="b" style={{background: 'blue'}}>B</div>
            <div key="c" style={{background: 'green'}}>C</div>
        </ResponsiveGridLayout>
    );
}

주요 props 설명:

• • layouts: 그리드 레이아웃의 구성을 정의. 각 레이아웃 항목은 i(ID), x(x 위치), y(y 위치), w(너비), h(높이) 값을 가져야 합니다.
• • breakpoints: 화면의 너비에 따라 어떤 레이아웃을 사용할지 정의합니다. 예를 들어, 화면 너비가 1200px 이상이면 lg 레이아웃을 사용합니다.
• • cols: 각 브레이크 포인트에 대한 열 수를 정의합니다.
• • rowHeight: 각 행의 높이를 정의합니다.

---

React-Grid-Layout은 반응형 그리드 디자인을 손쉽게 구현할 수 있게 도와주는 라이브러리입니다. 다양한 props와 함께 사용하면 원하는 대로 레이아웃을 디자인할 수 있습니다.