[TIL] 0309

프로그래머스 데브매칭 준비

vanilla js SAP쇼핑몰 구현

클래스 constructor함수에서 비동기 사용시 문제점
setup함수에서 비동기가 다 끝나고 나서 다음 메소들이 실행되는게 아닌,
비동기 로직이 끝날 동안 다음 메소드들이 줄줄이 실행돼서 초기 값이 빈값이 렌더링되어 오류가 생겼다

setup함수에서 setState함수를 실행하고 template함수에서 빈값일 경우 빈값을 리턴하게 하면
비동기가 끝나기 전엔 빈값이 렌더링되고, 비동기가 끝나면 setState안에서 render함수가 다시 실행되기 때문에 서버에서 받아온 값으로 렌더링될 수 있다

export default class ProductListPage extends Component {
    async setup() {
        const res = await request('/products');
        this.setState({ProductData:res});
        // 서버 요청이 완료되면 render함수를 실행하도록 setState함수로 초기화
    }

    template() {
        if(!this.state) {   //state 빈 값 처리
            return ''
        }

        return `
          <div class="ProductListPage">
            <h1>상품목록</h1>
            <ul data-component='product-list'></ul>
          </div>
          `;
    }

    mounted() {
        if(!this.state) {
            return 
        } // state 빈 값 처리
      
        const $productList = this.$target.querySelector('[data-component="product-list"]');
        new ProductList($productList, this.state);
    }
}