위젯을 빌드하세요 Mendix React로 - 1부 - 색상 카운터

조 로버트슨
2022 년 10 월 15 일
11분 읽기

이 블로그는 플러그인 위젯을 직접 빌드하는 방법에 익숙해지기 위한 일련의 빌드형 위젯 중 첫 번째입니다. Mendix. 블로그에서는 점점 더 정교해지는 개념을 다루고 Typescript와 Pluggable 위젯 API에 익숙해지는 것, 브라우저에서 머신 러닝 모델을 실행하는 것, 기본 WebAssembly 게임을 만드는 것 등 다양한 사용 사례를 다룰 예정입니다.

어디서부터 시작해야 할까

아직 그렇지 않았다면 첫 번째 Pluggable Widget을 만드는 예제를 확인해야 합니다.

플러그형 위젯은 React Javascript 프레임워크를 사용합니다. 이 시리즈에서는 React 개념에 대해 다루겠지만, 이는 React에 대한 포괄적인 소개가 아닙니다. 따라서 소개나 복습이 필요하면 다음 과정을 적극 추천합니다(이 위젯의 영감을 발견할 수도 있습니다): React 튜토리얼: React JS 배우기 – 무료 11시간 코스

이 블로그의 목적

이 블로그에서는 다음 내용을 다룹니다.

플러그형 위젯 프로젝트 구조
테스트 설정 및 개발
React 개념 소개
외부 라이브러리 활용

우리가 무엇을 만들고 있는가

버튼을 클릭하면 숫자가 늘어나거나 줄어들고, 클릭하면 색상이 무작위로 바뀌는 카운터를 만들어보겠습니다.

프로젝트의 최종 상태는 여기에서 확인할 수 있습니다. GitHub – joe-robertson-mx/colourCount

시작 가이드

우선, 우리는 위젯을 스캐폴딩합니다. Mendix 위젯 생성기 yo @mendix/widget color count. 이것은 우리에게 HelloWorld 구현을 제공합니다.

폴더 구조:

위젯 폴더의 구조는 다음과 같습니다.

dist — 빌드 및 번들된 코드가 출력되는 위치
node-modules — 노드 종속성
src - 우리의 src 코드 폴더
구성 요소 - 각 구성 요소 폴더 jsx 파일
ui — 위젯 스타일링을 위한 css
package.xml — 위젯 구조를 설명합니다.
colourCount.editorConfig.ts — Studio Pro 및 Studio의 디자인 모드에서 미리 보기를 위한 구성
colourCount.editorPreview.jsx — Studio Pro 및 Studio에서 미리보기를 제공하는 구성 요소
colourCount.tsx — 위젯의 진입점
colourcount.xml — 위젯과 인터페이스를 설명하는 마크업 Mendix
package.json — npm 프로젝트와 위젯 종속성을 설명합니다.
prettier.config.js — 코드에 대한 prettier 규칙을 수정할 수 있도록 합니다.

테스트 및 개발 설정

테스트를 용이하게 하기 위해 새 빈칸을 만듭니다. Mendix 위젯을 대상으로 하는 버전의 프로젝트는 ./colourCount/tests/testProject에 있습니다.

실행해보세요

완료되면 빌드 스크립트를 실행하여 위젯을 테스트해 보겠습니다.

터미널에서 위젯 루트 디렉토리로 이동한 다음 다음을 입력합니다.

npm 실행 빌드

이렇게 하면 dist/ 폴더와 테스트 앱의 widgets 폴더에 위젯 패키지가 생성됩니다.

위젯이 작동하는 것을 보려면 Studio Pro에서 테스트 애플리케이션을 열고 F4를 눌러 파일 디렉토리를 동기화하기만 하면 됩니다. 그런 다음 다른 위젯과 같은 방식으로 위젯을 페이지에 추가할 수 있습니다.

위젯을 구성하고 매개변수가 모델러에서 프런트 엔드의 위젯으로 전달되는지 확인하려면 전달할 텍스트를 추가할 수 있습니다.

우리가 응용 프로그램을 실행하면 다음을 볼 수 있습니다.

위젯에 대한 이 배포 및 테스트 프로세스는 작동하지만 약간 느립니다. 프로세스를 가속화하기 위해 다음을 실행하여 위젯 서버를 시작할 수 있습니다.

npm 실행 시작

이렇게 하면 코드에서 변경 사항을 감시하여 변경 사항을 반영하려면 캐시를 지우고 강제로 다시 로드하기만 하면 됩니다.

Chrome에서 이 작업을 수행하려면 Chrome 개발자 도구(Ctrl + Shift +i)를 열고 새로 고침 버튼을 마우스 오른쪽 버튼으로 클릭한 다음 '캐시 비우기 및 강제 다시 로드'를 선택하세요.

코드 작성

코딩할 시간입니다!

시작하기 전에 몇 가지 사소한 변경 사항

React 코드부터 시작해 보겠습니다. 먼저 컴포넌트의 이름을 더 의미 있는 Count로 바꾸겠습니다.

먼저, HelloWorld.jsx에서 구성 요소의 이름을 바꿉니다.

import { createElement } from "react";
import { Count } from "./components/Count";
import "./ui/ColourCount.css";

export function ColourCount({ sampleText }) {
   return <Count sampleText={sampleText ? sampleText : "World"} />
}

또한 ColourCount 내의 구성 요소와 일치하도록 파일 이름을 바꾸는 것이 가장 좋습니다.

src/ui의 CSS 파일을 ColourCount.css로 이름을 바꿔야 합니다. 그래야 올바르게 가져올 수 있습니다. 또한 자식 구성 요소를 업데이트해야 합니다. 이를 위해 먼저 HelloWorldSample.jsx의 이름을 Count.jsx로 바꾸고 그 안의 구성 요소 이름을 Count로 업데이트합니다.

export function Count({ sampleText }: HelloWorldSampleProps) {
    return <div className="widget-hello-world">
              Hello {sampleText}
           </div>;
 }

개발 프로세스를 가속화하기 위해 다음과 같이 업데이트하여 editorPreview 파일을 나머지 코드에 종속되지 않도록 변경하려고 합니다.

import { ReactElement, createElement } from "react";

export function preview() {
    return <div />;
}

export function getPreviewCss() {
    return require("./ui/ColourCount.css");
}

구성 요소를 업데이트하기 전에 자식 구성 요소의 이름을 좀 더 합리적인 'Count'로 바꿔보겠습니다. 이를 위해 ColourCount 부모 구성 요소를 업데이트하여 구성 요소/Count 파일에 포함된 Count 구성 요소를 참조해야 합니다.

위젯 빌드는 3가지 부분으로 나눌 수 있습니다.

업데이트 Mendix 카운터의 시작 값으로 숫자를 수용하는 위젯 인터페이스
이 숫자를 변경하기 위한 논리를 만드세요
숫자에 무작위 색상 변경을 추가합니다.

업데이트 Mendix 위젯 인터페이스

사이의 인터페이스 Mendix 모델과 위젯은 ColourCounter.xml 마크업에 정의되어 있습니다. '샘플 텍스트' 재산 다음에

<property key="initialValue" type="integer" required="true" defaultValue="5">
    <caption>Initial Value</caption>
    <description>The initial value of the counter</description></property>

우리가 열면 Mendix 모델, F4를 눌러 위젯을 업데이트합니다. 위젯을 열면 새로운 인터페이스가 표시됩니다.

하지만 이건 아직 우리 구성 요소와 연결되지 않았습니다.

이를 위해서는 다음을 교체해야 합니다. 샘플 텍스트 과 초기 값 ColourCount 파일에서:

import { createElement } from "react";
import { Count } from "./components/Count";
import "./ui/ColourCount.css";

export function ColourCount({ initialValue }) {
    return <Count initialValue={initialValue} />;
}

그리고 Count 파일에서

export function Count({ initialValue }) {
    return <div>{initialValue}</div>;
}

우리가 애플리케이션을 다시 실행하면 초기 값이 렌더링된 것을 볼 수 있습니다:

속성(또는 소품)은 다음에서 전달됩니다. Mendix ColourCount 구성 요소에 대한 응용 프로그램으로, 함수 내에서 구조 분해되어 Count 구성 요소로 전달됩니다.

자바스크립트 객체의 구조 분해에 대해 자세히 알아보세요.

이 숫자를 변경하기 위한 논리를 만드세요

Props는 React에서 직접 변경되어서는 안 됩니다. 대신, 컴포넌트 상태에서 변경된 속성을 저장합니다.

함수형 컴포넌트에서 상태를 활용하려면 useState 후크를 사용합니다.

Hooks는 React 16.8 버전에서 도입되었습니다. Hooks를 사용하면 클래스를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수 있습니다. Hooks는 함수형 컴포넌트에서 React 상태 및 라이프사이클 기능을 "후크(hook)"하는 함수입니다. 클래스 내부에서는 작동하지 않습니다. React의 Hooks에 대해 자세히 알아보세요.

첫째로, 우리는 추가해야 합니다 사용 상태 수입으로.

import { createElement, useState } from "react";

그런 다음 Count 구성 요소에 다음 코드를 추가합니다.

export function Count({ initialValue }) {
    const [count, setCount] = useState (initialValue)
    return <div>{count}</div>;
}

우리가 부를 때 사용 상태 상태 변수의 배열과 상태 변수를 설정하는 함수를 반환합니다. 이것은 즉시 다음과 같이 구조화됩니다. 계산 상태와 세트카운트 기능.

그것은 허용합니다 초기 값 매개변수로, 생성 시 count 변수의 값을 설정합니다.

이제 다음을 사용하여 상태를 변경할 수 있습니다. 세트카운트상태를 설정할 때, 단순히 값을 전달하거나 이 경우처럼 함수에서 이전 상태를 매개변수로 사용할 수 있습니다.

이를 알면 상태 값을 증가시키는 함수를 추가할 수 있습니다.

export function Count({ initialValue }) {

   const [count, setCount] = useState (initialValue)
   
   const increment = () => {
      setCount(prevState => prevState + 1);
   };

   return <div>{initialValue}</div>;
}

감소 함수에도 같은 작업을 할 수 있습니다.

이제 우리 애플리케이션에 필요한 HTML을 렌더링하기 위해 JSX를 업데이트해야 합니다.

export function Count({ initialValue }) {
    const [count, setCount] = useState (initialValue)

    const increment = () => {
         setCount(prevState => prevState + 1);
    };

    const decrement = () => {
        setCount(prevState => prevState - 1);
    };

    return (
        <div>
              <p>{count}</p>
              <button onClick={increment}>+</button>
              <button onClick={decrement}>-</button>
       </div>
    );
}

이제 우리가 응용 프로그램을 실행할 때 값을 늘리거나 줄일 수 있습니다. 상태위젯에 표시되는 내용은 다음과 같습니다.

숫자에 무작위 색상 변경을 추가합니다.

이제 카운트가 변경될 때 무작위 색상을 생성하려고 합니다. 이는 작성하는 데 시간이 많이 걸리는 코드이지만 다행히도 npm 레지스트리에 저장된 사전 작성된 소프트웨어 패키지를 사용할 수 있습니다. 랜덤색상

이 패키지는 호출 시 무작위 색상을 문자열로 반환하는 함수를 제공합니다. 이 패키지를 활용하는 것은 쉽습니다. 먼저 다음을 실행하여 패키지를 설치합니다. npm install randomcolor 위젯 폴더에 있습니다.

그런 다음 Count 파일에서 코드를 변경하기 시작합니다. 먼저 함수를 가져옵니다.

import randomColor from 'randomcolor';

그런 다음 색상 속성을 유지하기 위해 일부 상태를 시작해야 합니다.

const [colour, setColour] = useState('')

이를 위해 위젯의 스타일에 색상이 반영되어야 하며, HTML 태그에 대한 스타일 속성을 사용할 수 있습니다. 스타일 속성은 적용하려는 스타일 속성이 있는 JS 객체를 허용합니다.

React를 사용하여 Dom 요소의 스타일을 지정하는 방법에 대해 자세히 알아보세요.

여기 있는 동안 내장된 기능을 사용하여 버튼의 모양을 개선할 수 있습니다. Mendix 클래스:

import { createElement, useState } from 'react'
import randomColor from 'randomcolor'
export function Count({ initialValue }) {
  const [count, setCount] = useState(initialValue)
  const [colour, setColour] = useState('')
  
  const increment = () => {
    setCount((prevState) => prevState + 1)
  }
  
  const decrement = () => {
    setCount((prevState) => prevState - 1)
  }
  
  return (
    <div>
      <p style={{ color: colour }}>{count}</p>
      <button className="mx-button btn-primary" onClick={increment}>
        +
      </button>
      <button className="mx-button" onClick={decrement}>
        -
      </button>
    </div>
  )

이제 count 변수가 변경될 때 색상이 변경되도록 트리거해야 합니다. 이를 위해 React에서 사용할 수 있는 핵심 유틸리티 중 하나를 사용할 수 있습니다. 사용 효과.

사용 효과 는 구성 요소의 모든 렌더링에서 함수(부작용)를 호출하는 후크입니다. 다음을 추가하면 렌더링 시 색상을 임의의 값으로 설정할 수 있습니다.

import { createElement, useState } from 'react'
import randomColor from 'randomcolor'
export function Count({ initialValue }) {
  const [count, setCount] = useState(initialValue)
  const [colour, setColour] = useState('')
  
  useEffect(() => {
    setColour(randomColor())
  }, [])
  
  const increment = () => {
    setCount((prevState) => prevState + 1)
  }
  
  const decrement = () => {
    setCount((prevState) => prevState - 1)
  }
  
  return (
    <div>
      <p style={{ color: colour }}>{count}</p>
      <button className="mx-button btn-primary" onClick={increment}>
        +
      </button>
      <button className="mx-button" onClick={decrement}>
        -
      </button>
    </div>
  )

브라우저에서 이것을 실행하면…DISCO COUNT!라는 결과가 나옵니다!

이건 멋지지만, 확실히 우리가 원하는 것은 아닙니다. 그럼 왜 이런 일이 일어나는 걸까요?

글쎄요, useEffect에 console.log('Render')를 넣으면 컴포넌트가 반복적으로 다시 렌더링되는 것을 볼 수 있는데, 이는 컴포넌트가 상태나 props가 변경될 때마다 다시 렌더링되기 때문입니다. 따라서 useEffect에 색상 상태를 설정하면 다시 렌더링하고 무한 루프가 발생합니다..

다행히도, 이것은 쉽게 고칠 수 있습니다. useEffect 후크는 두 번째 매개변수를 허용하는데, 이는 감시할 상태 및/또는 props의 배열입니다. 즉, 이 함수는 감시하는 상태/props 중 하나가 변경될 때만 실행됩니다. 우리는 count가 변경될 때만 색상이 변경되기를 원하므로 useEffect를 다음과 같이 업데이트합니다.

useEffect(() => {
    setColour(randomColor())
  }, [count])

참고: useEffect를 한 번만 실행하려면 구성 요소 로드 시 두 번째 매개변수로 빈 배열을 추가합니다.

이제 위젯을 업데이트하면…보일라!

요점을 되풀이하다

이 블로그에서는 Pluggable Widgets를 사용하는 방법을 다루었습니다. Mendix, 개발 환경을 설정하는 방법과 state, props, useEffect를 포함한 핵심 React 개념에 대해 설명합니다.

위젯의 최종 코드는 여기에서 확인할 수 있습니다. GitHub – joe-robertson-mx/colourCount

다음은?

다음으로 Typescript를 사용하여 직접 통합할 것입니다. Mendix 엔터티와 속성을 살펴보고 작업을 트리거하는 방법을 살펴보세요. Mendix 위젯의 모델입니다.

이 게시물에 대한 의견을 알려주세요. 보고 싶은 위젯이 있나요? 향후 위젯에 대한 제안이 있으면 여기 댓글에 남겨주세요.

자료

플러그형 위젯에 대해 자세히 알아보려면 다음 리소스가 도움이 될 수 있습니다. 시작하기 – React, 플러그형 웹 위젯 구축,

위젯을 빌드하세요 Mendix React로 작성하기 - 1부 - 색상 카운터 | Mendix

사이트 검색

개발자 블로그