바닐라 JS 웹 컴포넌트 개발기

feat: ReactJS

초기 세팅.

컴파일러 세팅

Babel을 사용함으로 ES6+ 이상의 JS 코드를 하위버전 문법으로 변환시켜주고 ES6+문법을 사용하고자 하였다.

Babel packages 설치

$ npm install --save-dev @babel/cli @babel/core @babel/node @babel/preset-env @babel/polyfill

babel.config.json

{
  "presets": ["@babel/preset-env"]
}

Local Server

VS Code Live Server
NPM Package serve(Selected, VS Code를 사용하지 않는 케이스가 있다고 생각)

개발.

HTML 세팅

HTML파일을 만들고 동적으로 생성할 수 있도록 script 파일을 연결합니다.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="App"></div>
    <script type="module" src="./src/index.js"></script>
  </body>
</html>

Core Component

공통 Component class를 React Lifecycle 기반으로 만듭니다.

constructor: 각 컴포넌트는 target 원소를 가지고 props로 다른 컴포넌트로 내려줄 수 있습니다.
setup: 초기값 지정 initState
template: render의 UI 부분을 담당하여 컴포넌트화 시킬 수 있도록 합니다.
setState: React와 같이 state가 변하면 해당 부분을 찾아 리렌더링을 시킵니다.
mounted: React Lifecycle componentDidMount
updated: React Lifecycle componentDidUpdate
unmounted: React Lifecycle componentWillUnmount

class Component {
  constructor(target, props = {}) {
    this.target = target;
    this.props = props;
    this.setup();
    this.render();
    this.mounted();

    window.onbeforeunload = () => {
      this.unmounted();
    };
  }
  setup() {}
  template() {
    return "";
  }
  render() {
    this.target.innerHTML = this.template();
  }
  mounted() {}
  setState(newState, shouldUpdate = true) {
    let isRerender = false;
    for (const key of Object.keys(newState)) {
      if (this.state[key] !== newState[key]) {
        isRerender = true;
        break;
      }
    }

    if (!isRerender) return;

    this.state = { ...this.state, ...newState };

    if (shouldUpdate) {
      this.render();
      this.mounted();
      this.updated();
    }
  }
  updated() {}
  unmounted() {}
}

export default Component;

Component를 App.js가 상속받습니다.

import Component from "./core/Component.js";

class App extends Component {
  setup() {
    this.state = {
      data: [],
      text: "",
    };
  }

  template() {
    return `
      <div>
        바닐라 JS 웹 컴포넌트 개발
      </div>
    `;
  }

  mounted() {}

  updated() {}
}

export default App;

App.js를 index.js에서 호출하여 화면에 렌더합니다.

import App from "./App.js";

new App(document.querySelector(".App"), {});

Next Step.

리렌더링 성능이 좋지 않아 이 부분은 React의 휴리스틱 알고리즘 활용하여 해당 방식을 적용해볼 것이다.
React hook을 구현하고 class형 컴포넌트를 함수형으로 바꿔볼 생각이다.

PreviousNode.js 모듈시스템과 CJS, ESM NextWebCam 카메라 좌우반전

Last updated 1 year ago

초기 세팅.

컴파일러 세팅

Local Server

개발.

HTML 세팅

Core Component

Next Step.

컴파일러 세팅