[Javascript] 상태관리

상태관리

상태(state)는 데이터를 의미한다.
보통 변수(variable)에 저장되거나 객체(object)형태로 표현된다.

💡 상태관리란?

데이터나 정보의 변화를 추적하고 해당 변화에 따라 UI를 업데이트 하는 것을 말한다

로딩 ui를 예시로 상태관리에 대해 알아보자.

// Loading.js
class Loading {
  constructor({ $target }) {
    const $loading = document.createElement("div");
    this.$loading = $loading;
    $target.appendChild(this.$loading);

    this.data = {
      show: false,
    };

    this.render();
  }

  show() {
    this.setState({
      show: true,
    });
  }
  hide() {
    this.setState({
      show: false,
    });
  }

  setState(newxData) {
    this.data = newxData;
    this.render();
  }

  render() {
    if (this.data.show) {
      this.$loading.innerHTML = `
          <div class='loading'><p>💞로딩💞</p></div>`;
    } else {
      this.$loading.innerHTML = ``;
    }
  }
}

show()가 true면 로딩창이 보이고, false면 보이지 않는다.

// Loading.js
class Loading {
	constructor({$target}) {
    	this.data {
        	show: false,
        };
    }
}

이 데이터를 막 조종을 해 줘야하는데 어디서 조종을 해야할까?🤔

로딩창이니까 뭐가 새로 뜨게 될 때 띄워주면 되겠군.
모든 클래스들을 모아놓은 js파일로 가서 로딩창이 제공되어야 하는 부분에 넣어주자.

// App.js
class App {
	$target = null;
	data = [];

	constructor($target) {
    	this.$target = $target;
      
      	this.loading = new Loading({
        	$target,
        });
      	this.searchInput = new SearchInput({
        	$target,
          	onSearch: (keyword) => {
            	// 로딩 SHOW
              	api.fetchData(keyword).then(({data}) => {
                	this.setState(data);
                  
                  	// 로딩 HIDE
                  
                });
            },
        });
    }
}

주석부분에 들어가야 하는 로딩 show와 로딩hide...
어떻게 추가해주면 좋을까🤔

// Loading.js
class Loading {
	constructor({$target}) {
    	this.data {
        	show: false,
        };
          
        this.render();
    }
    
    show() {
    	this.setState({
        	show: true;
        });
    }
    
    hide() {
    	this.setState({
        	show: false,
        });
    }
      
    setState(nextData) {
    	this.data = nextData;
      	this.render();
    }
}

show(),hide()메서드의 데이터가 변경되면 -> 렌더가 되게 해준다.
이를 위해 상태관리를 해줘야 한다.

여기서 setState()가 상태관리 역할을 수행중이다.
show()와 hide()메서드 안에서 setState를 호출함으로서 상태를 변경하고, 변경된 상태에 맞게 UI를 업데이트 해 줄 수 있다.

// App.js
class App {
	$target = null;
	data = [];

	constructor($target) {
    	this.$target = $target;
      
      	this.loading = new Loading({
        	$target,
        });
      	this.searchInput = new SearchInput({
        	$target,
          	onSearch: (keyword) => {
            	// 로딩 SHOW
              	this.loading.show();
              	api.fetchData(keyword).then(({data}) => {
                	this.setState(data);
                  
                  	// 로딩 HIDE
                  	this.loading.hide();
                  
                });
            },
        });
    }
}

이제 로딩UI가 작동하게 된다.