👻 nodeTypes에 등록할 컴포넌트 만들기필자의 경우에는 컴포넌트 폴더에 reactflow라는 폴더를 만들고 nodes라는 폴더를 생성하여 그 안에 커스텀 노드들을 만들어주었습니다.editorTools에 만들어준 4개의 모형대로 해당 폴더 안에 컴포넌트들을 만들어보겠습니다.네이밍 센스가 부족하여 간단히 test1,2,3,4로 구분하였습니다 😅 🙌🏻 Test1.tsxconst Test1 = React.memo(() => { return ( );});export default Test1;...test2, test3, test4 또한 동일하게 만들어주자.스타일링은 ReactFlow 최상단을 감쌌던 styled-component 안에서 해줄 거 기 때..

🍄 드래그 앤 드롭 구현원리드래드 앤 드랍과 관련하여 리액트에서 다음과 같은 두 개의 이벤트를 활용해보고자 한다.- onDrop : 드래그가 끝난 후, 객체를 놓는 장소에 이벤트 발생- omDragOver : 드래그 시 마우스가 객체 위에 있는 경우 이벤트 발생 두 개의 이벤트에 대한 설명은 다음 링크를 참조 바란다.onDragOver 이벤트 관련 onDrop 이벤트 관련 HTMLElement: drop event - Web APIs | MDNThe drop event is fired when an element or text selection is dropped on a valid drop target. To ensure that the drop event always fires as expected..

🍄 레이아웃을 분리하여 보자!지금까지는 준비된 nodes 와 edges를 Reactflow 에 담아줬다면,이제부터는 툴에서 직접 끌어다가 도형을 그리는 틀을 잡아보려고 한다.기존의 하나의 컴포넌트에서 만들어진 코드를 다음과 같이 두 컴포넌트 영역으로 분리해보고자 한다.EditorTools 에는 간단한 모형 3가지를 두고,해당 모형이 ReactFlowCanvas 에서 자유롭게 생성되도록 작업을 해볼 것이다.먼저 파일을 분리하면서, EditorTools 에 대해 간단한 스타일링을 입히면 다음과 같이 표현해볼 수 있다.🍄 EditorTools.tsximport styled from "styled-components";const EditorTools = () => { return ( "te..

🍄 edge 알아보기edge 에 대한 자세한 속성과 타입에 대한 설명은 다음 링크에서 확인 할 수 있다.https://reactflow.dev/api-reference/types/edgetype DefaultEdge = { id: string; type?: string; source: string; target: string; sourceHandle?: string | null; targetHandle?: string | null; style?: CSSProperties; animated?: boolean; hidden?: boolean; deletable?: boolean; data?: T; className?: string; sourceNode?: Node; targetNo..

🍄 Nodes 알아보기앞서 예시를 보았던 것처럼,Reactflow 에는 반드시 nodes 와 edges 를 넣어줘야 한다.nodes 는 도형, edges 는 선이라고 간단하게 이해하면 된다.nodes 의 타입은 Node[] 인데, 데이터 형태는 다음과 같다.reactflow - node[]의 타입 상세 링크 바로가기export type Nodeextends string> = { id: string; position: XYPosition; data: T; type?: U; sourcePosition?: Position; targetPosition?: Position; hidden?: boolean; selected?: boolean; dragging?: boolean; draggable..

유명한 라이브러리 중 하나인 reactflow를 활용하여 다이어그램 편집 툴을 개발해본 경험을 블로그로 포스팅해보고자 한다.이번 포스팅에서는 전체적인 개요와 라이브러리 설치에 대해 알아보려고 한다. 개요는 다음 링크를 통하여 확인 할 수 있다.https://reactflow.dev/learn Quickstart - React FlowReact Flow quickstart that shows how to install the package, use it and where to find example appsreactflow.dev 먼저, 라이브러리 설치명령어는 다음과 같다.npm install reactfloworyarn add reactflow Quickstart 에 써져있는 예시문을 응용하여 로컬에서 ..