JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<comments-app page="1"></comments-app>

Babel + JSX

const PAGES = {
  1: [{
      id: 1,
      author: '페이지 1 작성자a',
      comment: 'asdf'
    },
    {
      id: 2,
      author: '페이지 1 작성자b',
      comment: 'abbbasdfbb'
    },
    {
      id: 3,
      author: '페이지 1 작성자c',
      comment: 'abbbav3wabb'
    },
    {
      id: 4,
      author: '페이지 1 작성자d',
      comment: 'abbawevbbb'
    },
    {
      id: 5,
      author: '페이지 1 작성자e',
      comment: 'abbbawevawvv3bb'
    },
  ],
  2: [{
      id: 1,
      author: '페이지 2 작성자f',
      comment: 'abbbb223443b'
    },
    {
      id: 2,
      author: '페이지 2 작성자g',
      comment: 'abbavsdbbb'
    },
    {
      id: 3,
      author: '페이지 2 작성자h',
      comment: 'abbbnaghjmbb'
    },
    {
      id: 4,
      author: '페이지 2 작성자i',
      comment: 'abbbghjkghjkbb'
    },
  ]
}
class CommentsApp extends HTMLElement {
  constructor() {
    super()
  }
  attributeChangedCallback(attrName, oldValue, newValue) {
    this._render()
  }

  static get observedAttributes() {
    return ['page']
  }


  get page() {
    return this.getAttribute('page')
  }

  set page(newPage) {
    if (newPage === 0 || newPage > 2) {
      return
    }

    this.setAttribute('page', newPage)
  }

  _render() {
    const currentPageData = PAGES[parseInt(this.page)]
    if (!currentPageData) {
      return
    }

    this.innerHTML = `
      ${currentPageData.map((c) => {
      return `
        <div>
          <div>${c.id}</div>
          <div>${c.author}</div>
          <div>${c.comment}</div>
        </div>
        `
    }).join('')}
    
      <div id="pager">
        <button class="pager-button" data-action="prev">이전</button>
        <button class="pager-button" data-action="next">다음</button>
      </div>
    `

    this.querySelector('#pager').addEventListener('click', this.handlePager.bind(this))
  }
  handlePager(event) {
    const button = event.target
    if (!button) return

    const buttonAction = button.dataset.action

    if (buttonAction) event.preventDefault()

    if (buttonAction ===...