[ReactFlow] 다이어그램 툴 만들기 #0

유명한 라이브러리 중 하나인 reactflow를 활용하여 다이어그램 편집 툴을 개발해본 경험을 블로그로 포스팅해보고자 한다.

이번 포스팅에서는 전체적인 개요와 라이브러리 설치에 대해 알아보려고 한다.

 

개요는 다음 링크를 통하여 확인 할 수 있다.

https://reactflow.dev/learn

Quickstart - React Flow

 

먼저, 라이브러리 설치명령어는 다음과 같다.

npm install reactflow

or

yarn add reactflow

 

Quickstart 에 써져있는 예시문을 응용하여 로컬에서 직접 띄어보겠다.

가장 하단에 있는 미니맵, 컨트롤까지 붙여진 코드를 가져와보았다.

import { useCallback } from "react";
import ReactFlow, {
  MiniMap,
  Controls,
  Background,
  useNodesState,
  useEdgesState,
  addEdge,
  Connection,
  Edge,
} from "reactflow";

import "reactflow/dist/style.css";

const initialNodes = [
  { id: "1", position: { x: 0, y: 0 }, data: { label: "1" } },
  { id: "2", position: { x: 0, y: 100 }, data: { label: "2" } },
];
const initialEdges = [{ id: "e1-2", source: "1", target: "2" }];

const ReactFlowExample = () => {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  const onConnect = useCallback(
    (params: Edge | Connection) => setEdges((eds) => addEdge(params, eds)),
    [setEdges]
  );

  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
      >
        <Controls />
        <MiniMap />
        <Background gap={12} size={1} />
      </ReactFlow>
    </div>
  );
};
export default ReactFlowExample;

 

이 상태에서 로컬을 실행해보면 다음과 같이 보인다.

 

 

리액트 플로우 라이브러리와 관련된 코드를 한번 간략히 살펴보자.

• ReactFlow : nodes와 edges로 이루어진 형태들을 화면에 표현해주는 부분이다.
• Controls : 현재 스크린샷에서는 좌측 하단에 보여지는 도구들이다.
• MiniMap : 우측 하단에 보이는 미니맵
• Background : 캔버스의 배경을 보여주는 부분으로 어두운 테마를 입히거나, 점선, 라인 등등의 점자를 스타일링해줄 수 있다.

다음 포스팅에서는 리액트 플로우 nodes 에 대해 분석해보고, 커스텀해보는 시간을 가져보겠다!