JSFiddle - React, Tailwind, and code Playground

HTML

<label>test1<input type="checkbox" id="checkbox1" name="checkbox1" /></label>
<label>test2<input type="checkbox" id="checkbox2" name="checkbox2" /></label>
<label>test3<input type="checkbox" id="checkbox3" name="checkbox3" /></label>
<label>test4<input type="checkbox" id="checkbox4" name="checkbox4" /></label>
<br><br>
<a href="#" id="tcheckbox1" name="tcheckbox1">checkbox1_toggle</a><br>
<a href="#" id="tcheckbox2" name="tcheckbox2">checkbox2_toggle</a><br>
<a href="#" id="tcheckbox3" name="tcheckbox3">checkbox3_toggle</a><br>
<a href="#" id="tcheckbox4" name="tcheckbox4">checkbox4_toggle</a><br>
<br><br>
<a href="#" id="checker" name="checker">checkerEvent</a><br>
<a href="#" id="reset" name="reset">resetEvent</a><br>

JavaScript

//// MVC 패턴
var Model = (function () {


   var model = function () {
			var test = new init();
      
       return test;
   };

   function init() {
			alert("TEST");
       this.listeners = {};

       return this;
   };

   // 리스너 집합을 통해 현재 View 영역의 상태를 관리한다.
   init.prototype.addListener = function (listenerId, checked) {

       listenerId = listenerId || '';
       checked = checked || false;

       this.listeners[listenerId] = {
            'elem': document.getElementById(listenerId),
            'checked': checked
       };

       return this;
   };

   init.prototype.removeListener = function (listenerId) {
        
       listenerId = listenerId || '';

       delete this.listeners[listenerId];

       return this;
   };

   init.prototype.isListener = function (listenerId) {
        
       listenerId = listenerId || '';

       return this.listeners[listenerId];
   };   

   // 현재 View 영역의 상태를 정의한다.
   init.prototype.setChecked = function (listenerId, checked) {

       listenerId = listenerId || '';
       checked = checked || false;

       this.listeners[listenerId].checked = checked;

       return this.listeners;
   };

   // 현재 View 영역의 상태를 반환한다.
   init.prototype.getChecked = function(listenerId){

        listenerId = listenerId || '';
        var elem = this.listeners[listenerId].elem;

        return elem.checked || false;
   };

   return model;

} ());

// Controller 영역은 Model 과 View 영역 사이의 매개체 역활을 하며, 이 둘 간의 코드 결합도를 현저히 낮춰준다.(결국 이는 패턴의 궁극적인 목적과 동일하다.)
var Control = (function () {


   var control = function (model, view) {

       return new init(model, view);
   }


   function init(model, view) {

       this.model = model;
       this.view = view;

       this.model.addListener(this.view.id, this.view.elem.checked);
       this.model.setChecked(this.view.id, this.view.elem.checked);

       return this;
   }

   // View 영역의 현재 상태를 Model 영역에 적용 시킨다.
   init.prototype.toogle = function () {

       if (this.view.elem){
           if...