react-p5 사용의 문제점

npm에서 보는 react-p5

react-p5 - npm (npmjs.com)

불러온 이미지에 텍스트를 합성시켜야 한다면 canvas API를 이용하는게 유용하다 생각해서

p5.js라는 라이브어리를 리액트에서 사용할 수 있다는 react-p5를 설치했다.

$ npm i react-p5

App.js

function App() {
  const greetings = (e) => {
    e.preventDefault();
    alert("Hello World!");
  };

  return (
    <div>
      <Sketch /> // <--- 컴포넌트 코드로 만들고 sketch.js파일을 만든다.
      <form>
        <p>문구</p>
        <input type="text" id="Text input" />
          .
          .
          .
          .
          .
                <p>문구 위치를 드래그(손이나 마우스로!)로 수정하실 수 있어요!</p>
        <input type="submit" onClick={greetings} value="만들기"></input>
      </form>
    </div>
  );
}

export default App;  

기본적인 p5.js의 예제문법

function setup(){  
  createCanvas(500, 400);
}

function draw(){   
  background(180, 0, 180);         // red:180, green:0, blue:180
  circle(mouseX, mouseY, 50);     // 마우스X축의 위치, 마우스Y축의 위치, 지름:50 
}

sketch.js에 적용

import React from "react";
import Sketch from "react-p5";

const sketch = () => {
  const setup = (p, canvasParentRef) => {
    p.createCanvas(500, 400).parent(canvasParentRef);
  };

  const draw = (p) => {
    p.background(180, 0, 180);
    p.circle(p.mouseX, p.mouseY, 50);
  };
  return (
    <div>
      <Sketch setup={setup} draw={draw} />
    </div>
  );
};

export default sketch;

p5.js에서 활용하는 메서드와 함수 전부 매개변수에
인수를 달아 놓으면서 구현해야 작동한다.

react-p5를 포기한 이유

• p5.js는 본래 순수 자바스크립트에서 p5.js를 불러 쓰는거라 그런지
  리액트에서 사용할때는 까다로는 규칙이 더 생겼다.

  setState를 쓸 수가 없고 대부분의 매서드나 함수를 쓸 때
  일일히 인수를 설정해 보내야 한다. 적어도 지금의 내 입장에서는
  리액트 환경에서 p5.js는 너무나 불편하고 비능률적이였다.

  그래서 이후 프로젝트 진행에서는 html, css, javascript 언어만 쓰기로 했다.
  본인 스스로 기능구현을 하는게 이번 프로젝트의 목적이였기 때문에....