Vanilla 로 구현해보는 컴포넌트

블랙커피 LV1 스터디 와 황준일 개발자님 포스트 를 보고 이전부터 하고자 했던 내용을 주제로 구현해봤습니다. 해당 내용의 코드는 github 에 있습니다. 해당 내용을 노션에서 보고 싶다면 클릭

github 구조

• cypress 는 테스트를 위한 것이므로 참고하지 않으셔도 됩니다.

• v1—vanilla-* 은 버전1 의 컴포넌트를 의미합니다.

• v1-* 으로 시작하는 부분은 v1—vanilla-* 로 구현한 각종 프로젝트(counter, todo-list, async-user) 구조 입니다.

들어가기에 앞서

1. 바닐라 자바스크립트로 웹 컴포넌트 만들기

2. 웹 컴포넌트 만들기 + 리덕스 패턴 구현하기

1. 리액트 클래스 컴포넌트

2. 옵저버 패턴 (추후 업데이트)

웹 컴포넌트 만들기 - 기본 구조

리액트 라이프 사이클

1. constructor()
• 초기 state 값 선언

2. render()
• 컴포넌트 모양새 정의

3. componentDidMount()
• 컴포넌트 생성 후, 첫 렌더링을 다 마친 후 실행
• event 등록, setTimeout, 네트워크 요청 등

4. setState()
• 컴포넌트의 state 변경

웹 컴포넌트 기본 구조

// /src/core/Component.js /
export default class Component {
  $target;
  props;
  state;
  constructor($target, props) {
    this.$target = $target;
    this.props = props;

    this.initialState();
  }

  async initialState() {
// 초기 state 초기화 영역// 기존에는 constructor 에서 처리하고자 했으나, constructor 에서 비동기를 따로 처리해야 하므로// 해당 메소드 생성
    this.render();
  }

  setState(newState) {
// 컴포넌트의 상태를 변경하는 기능
    this.state = newState;
    this.render();
    console.log('setState', this.state);
  }

  template() {
// JSX 와 같이 해당 컴포넌트의 UI 를 정의하는 부분
    return ``;
  }

  render() {
// 실제 브라우저에 뿌려주는 기능
    this.$target.innerHTML = this.template();
    this.componentDidMount();
  }

  componentDidMount() {
// 이벤트 등록 및 관련(하위) 컴포넌트 생성?
  }
}

• 웹 컴포넌트를 추상화한 클래스이다.

• constructor 메서드

// bad
constructor($target, props) {
  this.$target = $target;
  this.props = props;

	this.setState({
		testState: 0
	});
}

// recommend
constructor($target, props) {
  this.$target = $target;
  this.props = props;

	this.initialState();
}

initialState() {
	this.setState({
		testState: 0
	})
}

• initialState 메서드

async initialState() {
// 초기 state 초기화 영역// 기존에는 constructor 에서 처리하고자 했으나, constructor 에서 비동기를 따로 처리해야 하므로// 해당 메소드 생성
  this.render();
}

• 초기 상태가 업데이트 되면 해당 컴포넌트를 렌더링해야해서 해당 메서드에서 render 를 호출한다.

• setState 메서드

setState(newState) {
// 컴포넌트의 상태를 변경하는 기능
  this.state = newState;
  this.render();
  console.log('setState', this.state);
}

• template 메서드

template() {
// JSX 와 같이 해당 컴포넌트의 UI 를 정의하는 부분
  return ``;
}

• render 메서드

render() {
// 실제 브라우저에 뿌려주는 기능
  this.$target.innerHTML = this.template();
  this.componentDidMount();
}

• 실제 DOM 을 생성하는 작업

• componentDidMount 메서드

componentDidMount() {
// 이벤트 등록 및 관련(하위) 컴포넌트 생성?
}

• 실제 DOM 이 생성되고 난 후 (render() 호출 후) 동작하는 기능으로

카운터 구현하기

App 컴포넌트로 구현

• App 은 하나의 컴포넌트(App) 에서 모든 것을 처리하도록 구현했다.

// utils/util.js
export const $ = (selector) => document.querySelector(selector);

• DOM 을 셀렉트 하는 기능을 함수로 따로 빼서 관리하였다.

// index.js
import { $ } from './utils/util.js';

import App from './App.js';

new App($('#app'));

• entry point 부분이다.

export default class Component {
  $target;
  state;
  props;
  constructor($target, props) {
    this.$target = $target;
    this.props = props;

    this.initialState();
  }

  async initialState() {
// 초기 state 초기화 영역// 기존에는 constructor 에서 처리하고자 했으나, constructor 에서 비동기를 따로 처리해야 하므로// 해당 메소드 생성
    this.render();
  }

  setState(newState) {
// 컴포넌트의 상태를 변경하는 기능
    this.state = newState;
    this.render();
    console.log('setState', this.state);
  }

  template() {
// JSX 와 같이 해당 컴포넌트의 UI 를 정의하는 부분
    return ``;
  }

  render() {
// 실제 브라우저에 뿌려주는 기능
    this.$target.innerHTML = this.template();
    this.componentDidMount();
  }

  componentDidMount() {
// 이벤트 등록 및 관련(하위) 컴포넌트 생성?
  }
}

• 위에서 설명한 컴포넌트의 기본이 되는 영역이다.

// App.js
import { $ } from './utils/util.js';

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

export default class App extends Component {
  constructor(...rest) {
    super(...rest);// 추후에 하위로 컴포넌트를 렌더링할 때 필요한 부분
    this.initialState();// 초기값 설정
  }

  async initialState() {
    this.setState({
      count: 0,
      diff: 1,
    });
  }

  template() {// 해당 카운터 컴포넌트의 UI 를 정의
    return `
      <div class="container">
        <h1>Counter</h1>
        <form class="setDiffForm">
          <input class="diffInput" type="number" placeholder="1" value="${this.state.diff || 1}"/>
          <button class="diffSubmit" type="submit">diff 설정</button>
        </form>
        <h2 class="counter">${this.state.count}</h2>
        <button class="increaseBtn">+1</button>
        <button class="decreaseBtn">-1</button>
      </div>
    `;
  }

  componentDidMount() {// 컴포넌트가 렌더링 된 후, 관련된 이벤트를 등록하였다.
    const { handleIncrease, handleDecrease, handleSubmit } = this;
    $('.increaseBtn').addEventListener('click', handleIncrease.bind(this));
    $('.decreaseBtn').addEventListener('click', handleDecrease.bind(this));
    $('.setDiffForm').addEventListener('submit', handleSubmit.bind(this));
  }

// custom handler // 프로젝트에 필요한 기능을 정의했다.
  handleIncrease() {
    this.setState({
      ...this.state,
      count: this.state.count + this.state.diff,
    });
  }
  handleDecrease() {
    this.setState({
      ...this.state,
      count: this.state.count - this.state.diff,
    });
  }

  handleSubmit(event) {
    event.preventDefault();
    const diff = parseInt($('.diffInput').value, 10);
    this.setState({
      ...this.state,
      diff: diff,
    });
  }
}

자세한 코드는 Github Repo 를 참고하면 된다.

Counter 컴포넌트를 컴포넌트로 분리하여 구현하기

// App.js
import { $ } from './utils/util.js';
import Component from './core/Component.js';

import Counter from './components/Counter.js';
import DiffInput from './components/DiffInput.js';

export default class App extends Component {
  constructor(...rest) {
    super(...rest);
    this.initialState()
  }

  async initialState() {
    this.setState({
      count: 0,
      diff: 1,
    });
  }

  componentDidMount() {
    const { handleIncrease, handleDecrease, handleSetDiff } = this;

    new Counter($('.counter-component'), {
      count: this.state && this.state.count,
      onIncrease: handleIncrease.bind(this),
      onDecrease: handleDecrease.bind(this),
    });

    new DiffInput($('.diff-form-component'), {
      diff: this.state && this.state.diff,
      onSetDiff: handleSetDiff.bind(this),
    });
  }

  template() {
    return `
      <h1>Counter</h1>
      <section class="diff-form-component"></section>
      <section class="counter-component"></section>
    `;
  }

// custom handler
  handleIncrease() {
    this.setState({
      ...this.state,
      count: this.state.count + this.state.diff,
    });
  }
  handleDecrease() {
    this.setState({
      ...this.state,
      count: this.state.count - this.state.diff,
    });
  }

  handleSetDiff(diff) {
    this.setState({
      ...this.state,
      diff,
    });
  }
}

• 자세하게 볼 내용은 template() 과 componentDidMount 를 보면 된다.

• template 을 각 컴포넌트를 root DOM 을 지정해줘야한다.

• componentDidMount 메서드에는 해당 컴포넌트에 필요한 이벤트 또는 하위 컴포넌트를 생성해줘야한다.

// 코어 컴포넌트의 생성자를 보면된다.
$target;
props;
state;// 코드도 수정해야함.
constructor($target, props) {
  this.$target = $target;
  this.props = props;

  this.initialState();
}

import { $ } from '../utils/util.js';
import Component from '../core/Component.js';

export default class Counter extends Component {
  constructor(...rest) {
    super(...rest);
  }

  componentDidMount() {
    const { onIncrease, onDecrease } = this.props;

    $('.increaseBtn').addEventListener('click', onIncrease);
    $('.decreaseBtn').addEventListener('click', onDecrease);
  }

  template() {
    const { count } = this.props;

    return `
      <h2 class="counter">${count}</h2>
      <button class="increaseBtn">+1</button>
      <button class="decreaseBtn">-1</button>
    `;
  }
}

• 관련된 기능들을 구현한다.

• 중요한 점은 App 컴포넌트에서 props로 count 값과 onIncrease, onDecrease 기능을 넘겨준 점이다.

import { $ } from '../utils/util.js';
import Component from '../core/Component.js';

export default class DiffInput extends Component {
  constructor(...rest) {
    super(...rest);
  }

  componentDidMount() {
    $('form').addEventListener('submit', this.handleSubmit.bind(this));
  }

  template() {
    const { diff } = this.props;

    return `
      <form>
        <input class="diffInput" type="number" value="${diff}" />
        <button class="diffSubmit" type="submit">diff 설정</button>
      </form>
    `;
  }

// custom
  handleSubmit(event) {
    event.preventDefault();
    const { onSetDiff } = this.props;

    const diff = $('input')?.value;
    onSetDiff(+diff);
  }
}

• DiffInput 컴포넌트도 props 로 전달된 것과 custom 핸들러를 만들어서 props 로 전달된 기능을 구현했다.

자세한 코드는 Github Repo 를 참고하면 된다.