허허허헣

index.html

<script type="module" src="index.js"></script>

 

index.js

import App from './app.js'

new App({ el: '#App' }).setup()

 

 

app.js

export default class App {
	constructor(props) {
    	this.props = props
        this.bindEvents()
    }
    setup() {
    	// 클래스 컴포넌트 인스턴스 생성
        // 리스트 조회와 같은 비동기 통신
        // 원래는 render을 호출하지만 인트로 페이지 표시와 같은 처리가 필요할 때 init 호출
    }
    bindEvents() {
    	// 각 클래스 컴포넌트에서 발생하는 이벤트를 받아서 처리하는 함수(on)
        // addEventListener 처리
    }
    init() {
    	// 서비스 첫 시작에서 인트로 표시와 같은 동작 처리
        // 이후에 render 호출
    }
    render() {
    	// setup에서 생성한 컴포넌트 인스턴스의 render 함수를 호출해준다.
    }
}

 

서비스 시작과 동시에 리스트를 조회해주어야한다면 아래와 같이 전달 받도록한다.

이 fetchData앞에 await을 해주었기 때문에 이 동작이 완료된 이후에 init()이 실행되므로 데이터를 받기전에 deliveredComponent에 페이지가 그려지는 일은 없을 것이다.

App.js
...
async setup() {
	...
    // 서버로 부터 데이터를 조회한다.
    await this.fetchData()
    this.init()
}
async fetchData() {
	// 서버로 부터 데이터를 응답받는다.
    const response = await fetch('~~~')
    // 데이터를 받아야하는 컴포넌트에서 데이터를 전달하는 메소드를 호출한다.
    this.deliveredComponent.setData(response)
}
...

deliveredComponent.js
...
setData(data) {
	this.data = data
}
...

 

그럼 페이지마다 리스트를 조회해주어야 하는 상황이어서 App.js에서 모든 페이지의 리스트를 조회해 오는 것은 비효율적이다. 이때는 각 컴포넌트에서 서버통신을 통해 데이터를 조회해주어야한다.