Ember.js는 웹 애플리케이션을 구축하는 데 도움이되는 JavaScript 프레임워크입니다. 컴포넌트는 Ember.js에서 UI 요소를 재사용 가능한 단위로 패키징하는 데 사용됩니다. 컴포넌트를 생성하고 사용하는 방법에 대해 알아보겠습니다.
컴포넌트 생성하기
Ember.js에서 컴포넌트를 생성하려면 ember generate component 명령을 사용합니다. 다음은 컴포넌트 생성의 예입니다:
ember generate component my-component
이 명령을 실행하면 프로젝트 구조에 my-component 디렉토리와 my-component.js 파일이 생성됩니다. my-component.js 파일은 컴포넌트의 JavaScript 코드를 포함하고 있습니다.
컴포넌트 사용하기
컴포넌트를 사용하려면 다음과 같이 컴포넌트 태그를 사용하면 됩니다:
위와 같이 사용하면 my-component 컴포넌트가 렌더링됩니다. 이 컴포넌트는 my-component.js 파일의 코드에 따라 상태와 동작을 가지게 됩니다.
컴포넌트에 데이터를 전달하려면 속성을 사용하면 됩니다. 다음과 같이 속성을 전달할 수 있습니다:
위의 예에서 name 속성과 age 속성을 my-component 컴포넌트로 전달합니다. 컴포넌트에서는 이러한 속성을 this.args를 통해 액세스 할 수 있습니다.
컴포넌트의 액션 처리
컴포넌트에서 이벤트를 처리하려면 액션을 사용할 수 있습니다. 컴포넌트의 액션은 `` 헬퍼를 사용하여 정의할 수 있습니다. 다음은 액션의 예입니다:
위의 예에서는 버튼을 클릭할 때 “myAction” 액션이 트리거됩니다. 컴포넌트의 JavaScript 코드에서는 해당 액션을 처리할 수 있습니다.