흐름도를 그려볼 수 있는 마인드맵을 어플리케이션입니다.

복잡한 구조나 흐름을 쉽게 그려보고, 브레인스토밍이 필요할 때 아이디어 보드로 활용해 보세요!

• 트리 그래프 형식의 마인드 맵을 그릴 수 있습니다.
• 노드의 핸들을 Drag & Drop 하면 새로운 노드가 생성됩니다.
• 노드를 클릭하면 수정할 수 있습니다. (노드 이름, 배경 컬러, 엣지 스타일)
• 작성한 플로우를 다운로드 받을 수 있습니다. (advanced)

React Redux Toolkit React Flow library

• 2022/9/16

  • 개인 포트폴리오 직접 만들기 과제를 진행하며 마인드맵 어플리케이션을 구상했습니다.
  • 기획 초기 Figma

• 2022/9/18

  • 기존 MindMap에서 SpiderMap로 기획을 변경 했습니다.
  • 화면을 디자인하고, React flow 라이브러리를 추가했습니다.

• 2022/9/19

  • Redux toolkit을 프로젝트에 적용했습니다.
  • Spidermap 이름을 붙이고 디자인을 수정했습니다.🤗

🕸 SpiderMap에서 관리되는 상태는 크게 노드들과 엣지(노드 연결선)이 있다. 노드를 추가하는 것은 Flow 라이브러리에서 제공하는 AddNodeOnEdgeDrop 컴포넌트 예시로 쉽게 추가할 수 있었다. 문제는, 수정과 삭제가 이루어지는 모달 컴포넌트로 노드(이름, 배경색)와 엣지(라인 스타일), setState를 전달하는 과정에서 과한 props 전달과 상태 끌어올리기에 의구심이 들었다.

결론적으로, 프로젝트에서 관리하는 state는 노드와 엣지, 모두 라이브러리에서 제공하는 state로 관리되기 때문에, store를 사용하기 위해 Flow 라이브러리에서 제공하는 API를 사용해 적용이 필요함을 알았다.

처음엔 모든 설정이 담긴 노드와 엣지를 전역에서 React-Redux로 관리하고자 했다. 프로젝트에 적용하는 것은 처음이라 복습하는 과정에서 서칭을 하다가 좀 더 간편하면서 불필요한 코드를 줄일 수 있는 React Toolkit을 추가적으로 학습했다.