본문 바로가기
Salesforce

[세일즈포스] 라이트닝 컴포넌트? What is Lightning Web Component? LWC란?

by clove17 2023. 9. 19.
728x90
반응형

Salesforce Lightning Web Components (LWC)는 Salesforce 플랫폼에서 사용되는 웹 컴포넌트 프레임워크입니다. LWC는 모던 웹 개발 기술을 사용하여 Salesforce 애플리케이션을 구축하고 사용자 인터페이스를 개발하는 데 도움을 주는 도구입니다. 이를 기초 코딩 입문자가 이해할 수 있도록 간단하게 설명하겠습니다.

1. **컴포넌트 (Components):** LWC는 Salesforce 애플리케이션의 모든 부분을 작은 조각인 "컴포넌트"로 나눕니다. 컴포넌트는 화면에 표시되는 요소의 독립적인 부분으로, HTML, CSS 및 JavaScript로 구성됩니다. 예를 들어, 버튼, 양식 필드, 데이터 목록, 메뉴 등은 모두 컴포넌트로 구현할 수 있습니다.

2. **마크업 (Markup):** LWC 컴포넌트는 HTML을 사용하여 UI를 정의합니다. HTML은 웹 페이지의 구조를 정의하고 컴포넌트의 요소를 배치하는 데 사용됩니다.

    ```html
    <template>
        <div>
            <h1>Hello, Lightning Web Components!</h1>
            <button onclick={handleClick}>Click Me</button>
        </div>
    </template>
    ```

3. **JavaScript Controller:** LWC는 JavaScript를 사용하여 컴포넌트의 동작을 제어합니다. 이벤트 처리, 데이터 로딩, 비즈니스 로직 등을 JavaScript 컨트롤러로 구현할 수 있습니다.

    ```javascript
    import { LightningElement } from 'lwc';

    export default class MyComponent extends LightningElement {
        handleClick() {
            // 버튼 클릭 이벤트 처리 로직
        }
    }
    ```

4. **데이터 통신 (Data Communication):** LWC는 Salesforce 데이터베이스와 통신하여 데이터를 가져오거나 업데이트할 수 있습니다. 이를 통해 사용자에게 실시간 정보를 표시하고 데이터를 업데이트할 수 있습니다.

5. **이벤트 (Events):** LWC 컴포넌트 간에 데이터 및 상태를 공유하기 위해 이벤트를 사용할 수 있습니다. 컴포넌트에서 이벤트를 발생시키고, 다른 컴포넌트에서 이벤트를 수신하여 상호작용할 수 있습니다.

6. **라이프사이클 (Lifecycle):** LWC 컴포넌트는 라이프사이클 이벤트를 통해 초기화, 렌더링, 업데이트 및 파괴 단계에서 로직을 실행할 수 있습니다.

7. **렌더링 (Rendering):** LWC는 렌더링 엔진을 통해 효율적으로 화면을 그리고 관리합니다. 컴포넌트의 상태가 변경될 때만 변경된 부분을 다시 렌더링하므로 성능을 최적화할 수 있습니다.

8. **커뮤니티 및 통합 (Community and Integration):** LWC는 Salesforce 커뮤니티에 통합되며, 외부 시스템과도 통합하여 데이터를 공유하고 외부 웹 서비스와 상호작용할 수 있습니다.

LWC는 간단한 HTML, CSS, JavaScript 지식으로도 시작할 수 있으며, Salesforce의 기능과 데이터와 함께 강력한 웹 애플리케이션을 빌드할 수 있습니다. LWC를 사용하여 Salesforce 애플리케이션을 개발하면 더 효과적으로 사용자 경험을 개선하고 비즈니스 요구 사항을 충족시킬 수 있습니다.

https://www.youtube.com/watch?v=oujfZjQc_2I&t=5s 

 

728x90
반응형