요구사항 검색페이지, 로딩ui

• 요구사항 : 검색페이지 관련, 로딩ui

• 💡UI동작 구현 순서

• 예제1. 로딩 UI

• 예제2. 이미지 lazy로딩

• 로딩 컴포넌트 생성

필수 데이터를 불러오는 중일 때, 현재 데이터를 불러오는 중임을 유저에게 알리는 UI를 추가해야 합니다.

• index.html

class Loading {

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

    this.render();
    
  }

  render(){
    this.$loading.innerHTML = `
      <div class="Loading"><p>로딩중...</p></div>
    `;
  }

}

Loading이라는 컴포넌트를 생성 후 App.js에 연

console.log("app is running!");

class App {
  $target = null;
  data = [];

  constructor($target) {
    this.$target = $target;

    **this.Loading = new Loading({
      $target,
    })**

    this.DarkmodeToggle = new DarkmodeToggle({
      $target,
    });
		//생략...
	}
}

.Loading{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height: 100vh;      /*세로로 화면 꽉찬 높이*/
  background-color: rgba(0, 0, 0, 0.5);
  z-index:10;
}
.Loading p{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  color:#fff;
  font-size:40px;
}

• 로딩 상태 제어하기.

로딩 상태의 data를 만들어 준다.

class Loading {
  **$loading = null;      //로딩 상태 제어
  data = null;          //로딩 상태 데이터**

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

    **//로딩 상태
    this.data = {
      show : false, 
    }**

    this.render();
}

• 로딩 상태가 show일 때 render() 시킨다. 로딩이 끝나면 this.$loading.innerHTML을 초기화 시켜준다.

render(){
    if(**this.data.show**){
      this.$loading.innerHTML = `
      <div class="Loading"><p>로딩중...😊</p></div>
      `;
    }else{
      this.$loading.innerHTML = ''; //초기화
    }
  }

• 로딩 상태 show, hide 함수를 만들어 주고, data에 대해 상태 관리를 한다. setState 수에서 제어.

show(){
    this.setState({
      show : true
    })
  }

hide(){
  this.setState({
    show : false
  })
}

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