Ember.js에서 라우팅은 애플리케이션의 다른 URL 경로와 상태를 연결하는 기능입니다. 이를 통해 사용자가 애플리케이션 내에서 탐색할 수 있습니다.
Ember.js에서 라우팅을 사용하려면 몇 가지 단계를 거쳐야 합니다.
-
app/router.js
파일을 생성하여 애플리케이션의 경로를 정의합니다. 이 파일에서Router.map
메서드를 사용하여 여러 경로를 정의할 수 있습니다. 예를 들어,Router.map(function() { this.route('about'); })
과 같이about
경로를 정의할 수 있습니다. -
라우터 클래스를 정의합니다.
app/routes
디렉터리에서about.js
파일을 생성하여Ember.Route
클래스를 확장하는 클래스를 만듭니다. 예를 들어,app/routes/about.js
파일에import Route from '@ember/routing/route'; export default class AboutRoute extends Route {}
와 같이 정의할 수 있습니다. -
about.js
파일에서model()
메서드를 정의하여 해당 경로에 대한 데이터를 로드합니다.model()
메서드는 사용자가about
경로로 이동했을 때 Ember.js에 의해 자동으로 호출됩니다. 예를 들어,model() { return this.store.findAll('about'); }
와 같이 데이터를 로드하고 반환할 수 있습니다. -
라우팅 템플릿을 정의합니다.
app/templates
디렉터리에서about.hbs
파일을 생성하여 라우팅 템플릿을 작성합니다. 이 템플릿은model()
메서드에서 로드한 데이터를 보여줄 수 있습니다.
이제 about
경로에 접속하면 Ember.js는 라우터를 통해 model()
메서드를 호출하고 about.hbs
템플릿을 렌더링합니다. 이를 통해 사용자는 브라우저의 주소창을 통해 다른 경로로 이동하고 해당 경로에 따른 데이터를 로드할 수 있습니다.
Ember.js의 라우팅 기능은 풍부한 기능을 제공하며 애플리케이션의 구조를 단순하고 유지보수 가능한 방식으로 관리할 수 있습니다.
더 자세한 내용은 Ember.js 공식 문서를 참조하세요.