[React] Konva React js 구조 이해하기 (1편)

React-konva 이해하기(구조) (1편)

1. KonvaJS 정의

• HTML5 2D Context 를 확장한 Canvas JavaScript framework 이다.
• 하이퍼포먼스 애니메이션, 전환, 노드 중첩, 계층화, 필터링, 캐싱, 데스크톱 모바일 애플리케이션에 대한 이벤트 처리등을 제공한다.

2. 작동원리

• 모든것은 여러 유저 layers(Konva.Layer) 를 포함한 Konva.Stage 에서 시작한다.
• 각각의 layer 는 두개의 <canvas> 렌더러를 갖는다 : scene renderer / hit graph renderer
• scene renderer: 보여지는 renderer
• hit graph renderer: 고성능 이벤트 감지에 사용되는 숨겨진 캔버스

    			   Stage
		    	     |
		    +------+------+
		    |    		      |
	    Layer 		    Layer
		    | 			      |
  +-----+-----+ 	  Shape
  | 		      |
Group 		  Group
  | 		      |
  +       +---+---+
  | 	    |		    |
Shape   Group 	Shape
		      |
		      +
	    	  |
	    	Shape

• Stage, Layer, Group, Shape 는 HTML 페이지 내의 가상의 DOM 노드로 구성이 되어서 화면상에 그려진다.
• Stage 안에 각각의 Layer 를 가지고, 그 안에 Group 이나 Shape( such as rectangles, circles, images, sprites, text, lines, polygons, regular polygons, paths, stars, etc.) 을 그려 넣는 구조.
• Shape 클래스를 인스턴스화 하고 그리기 기능을 만들어 사용자 정의모양을 만들 수 있음.

3. Konva 상세구조

Stage

• 화면상에 보이는 캔버스 크기(틀) 및 동작(이벤트)하는 행동들을 관리함.
• 이벤트(onMouseLeave, onMouseDown, onMousemove, onMouseup, onTouchStart, onTouchMove, onTouchEnd, onContextMenu 등..)를 등록해서 사용하는 곳

Layer

• Stage 공간 내 지정된 곳에서 Shape, Group 이 화면상에 그려지는 공간.

Shape

• Layer 공간에 인스턴스 단위로 그려지는 모양
• rectangles, circles, images, sprites, text, lines, polygons, regular polygons, paths, stars, etc.

Group

• Layer 공간에 Shape를 하나로 묶어둔 형태를 의미.

4. KonvaJS 설치하기

yarn add konva
yarn add react-konva

npm i konva
npm i react-konva

konva / react-konva 차이점

konva

• 스크립트 단에서 처리하여 동작한다.

import Konva from "konva";

react-konva

• JSX 내에서 Konva를 동작 시킴.

import { Stage, Layer, Line, Image } from "react-konva";

• 하지만 ? react-konva 공식 깃헙에 가면, react 용을 따로 배울필요는 없다고 한다.
• Actually you don’t need to learn react-konva. Just learn Konva framework, you will understand how to use react-konva

참조

KONVA 공식 홈페이지, adjh54 블로그