소개

안녕하세요, 여러분 :)

오늘은 ReactFlow의 onNodeDoubleClick 이벤트 - 작동 원리와 활용에 대해 알아보려고 합니다.

ReactFlow는 노드 기반의 그래프를 생성하고 조작할 수 있는 강력한 React 라이브러리입니다.
이 라이브러리는 다양한 이벤트를 제공하여 노드와의 상호작용을 처리할 수 있습니다.
그 중에서도 onNodeDoubleClick 이벤트는 노드를 더블 클릭했을 때
호출되는 콜백 함수를 지정할 수 있는 유용한 이벤트입니다.

본론

onNodeDoubleClick 이벤트의 작동 원리

onNodeDoubleClick 이벤트는 ReactFlow 컴포넌트에 전달되는 prop 중 하나입니다. 이 prop은 노드를 더블 클릭했을 때 호출될 콜백 함수를 지정합니다.

콜백 함수는 두 개의 인자를 받습니다:

1. event: 더블 클릭 이벤트 객체 (React.MouseEvent)
2. node: 더블 클릭된 노드 객체 (Node)

콜백 함수 내부에서는 이벤트 객체와 노드 객체를 사용하여 원하는 동작을 수행할 수 있습니다.

위의 캡쳐는 ReactFlow 공식문서의 onNodeDoubleClick 내용입니다.

useCallback을 사용한 성능 최적화

onNodeDoubleClick 콜백 함수를 정의할 때,
useCallback 훅을 사용하여 함수를 메모이제이션하는 것이 좋습니다.

useCallback은 두 가지 인자를 받습니다:

1. 메모이제이션할 함수
2. 의존성 배열 (함수 내부에서 사용되는 모든 변수를 포함)

의존성 배열이 변경되지 않는 한, useCallback은 이전에 메모이제이션된 함수를 반환합니다.
이를 통해 불필요한 함수 재생성을 방지할 수 있습니다.

위의 캡쳐는 useCallback내용의 React 공식문서 내용입니다.
useCallback 공식사이트

import { useCallback } from 'react';
import ReactFlow, { useNodesState, useEdgesState } from 'reactflow';

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

  const onNodeDoubleClick = useCallback((event, node) => {
    // 노드 더블 클릭 시 수행할 동작
    console.log('Double clicked node:', node);
  }, []);

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onNodeDoubleClick={onNodeDoubleClick}
    />
  );
};

위의 예시에서 onNodeDoubleClick 콜백 함수는 useCallback으로 감싸져 있습니다.
의존성 배열이 비어 있으므로, 컴포넌트가 re-render되더라도 동일한 함수 인스턴스가 사용됩니다.

활용 예시

onNodeDoubleClick 이벤트는 다양한 방식으로 활용될 수 있습니다.

예를 들어:

• 노드 정보 표시: 노드를 더블 클릭했을 때 해당 노드의 상세 정보를 모달이나 사이드바에 표시할 수 있습니다.
• 노드 편집: 노드를 더블 클릭하면 노드 편집 모드로 진입하여 노드의 속성을 수정할 수 있습니다.
• 노드 확장/축소: 노드를 더블 클릭하면 하위 노드를 확장하거나 축소할 수 있습니다.

다음은 노드를 더블 클릭했을 때 노드의 ID를 알려주는 간단한 예시입니다:

const onNodeDoubleClick = useCallback((event, node) => {
  alert(`Double clicked node with ID: ${node.id}`);
}, []);

추가 내용

• 이벤트 버블링과 캡처링: onNodeDoubleClick 이벤트는 이벤트 버블링 단계에서 호출됩니다.
  이벤트 버블링은 가장 깊은 노드에서 시작하여 부모 노드로 올라가는 과정입니다.
  반대로 이벤트 캡처링은 부모 노드에서 시작하여 가장 깊은 노드로 내려가는 과정입니다. ReactFlow에서는 이벤트 버블링을 사용하여 노드 이벤트를 처리합니다.

• 이벤트 위임: ReactFlow는 이벤트 위임(Event Delegation)을 사용하여 이벤트를 효율적으로 처리합니다.
  노드 수가 많은 경우, 각 노드에 개별적으로 이벤트 리스너를 연결하는 것은 비효율적일 수 있습니다. 대신 ReactFlow는 상위 컨테이너에 이벤트 리스너를 연결하고, 이벤트 버블링을 통해 각 노드의 이벤트를 처리합니다.

• 커스텀 노드 컴포넌트: ReactFlow는 커스텀 노드 컴포넌트를 지원합니다. 노드의 모양과 기능을 커스터마이징하기 위해 자체 노드 컴포넌트를 만들 수 있습니다.
  커스텀 노드 컴포넌트 내부에서도 onNodeDoubleClick 이벤트를 사용할 수 있습니다.

마무리

ReactFlow의 onNodeDoubleClick 이벤트는 노드와의 상호작용을 처리하는 데 유용한 도구입니다.
useCallback을 사용하여 콜백 함수를 메모이제이션함으로써 성능을 최적화할 수 있습니다.
이 이벤트를 활용하여 다양한 기능을 구현할 수 있으며, 이는 사용자 경험을 향상시키는 데 도움이 될 것입니다.