[Lightning Component] Controller vs Helper

 

 

 

Controller & Helper

Controller

Component에 직접적.

이벤트에 응답, 제어 흐름 수행, Helper에게 비즈니스 로직 위임

Helper

Component간 공통적으로 활용되는 비즈니스 로직 영역.

공유 코드를 포함하도록 설계됨 ≫ Renderer, Controller, 여러 Controller 함수에서 코드 공유 O

상속을 통해 연결된 component간에 Helper 코드 공유 O

 

 

 

 

예시

두 개의 Account component (Account.cmp)를 표시하는 Account List가 있다고 가정하기

<c:AccountList>
    <c:AccountCmp id="1" />
    <c:AccountCmp id="2" />
</c:AccountList>

 

Account List는 시각적으로는 첫 번째 그림과 같지만, 실제로 실행하는 동안에는 두 번째 그림과 같다!

 

 

각 Account Component 컴포넌트(번들)은 마크업으로 만들어져있음 (JavaScript controller, Helper, Renderer...)

 

하지만 실행하는 동안 프레임워크는 각 component에 대한 Renderer의 인스턴스인 Controller 인스턴스를 생성하지만, Helper의 복사본은 하나만 만들고 Helper의 reference를 모든 Controller 인스턴스와 모든 Renderer 인스턴스에 전달함.

 

2개의 component가 있는 예에서 프레임워크는 Helper의 복사본 하나를 만들고, 이 Helper의 reference를 2개의 Controller와 2개의 Renderer 인스턴스에 전달함.

 

 

Benefits

• Helper는 모든 것이 공유되기 때문에 Controller와 Renderer의 로직을 한 곳에서 공유, 유지 가능
• Controller 및 Renderer 내에서 로직을 간결하게 유지하는 데 도움이 됨

☞ 따라서 가능하면 비즈니스 로직을 Helper에 위임하는 것이 좋음

 

 

When to use Controller / Helper

˙ Controller를 사용하여 user event, component & application event와 같은 다른 event를 수신

     하지만 Helper에게 비즈니스 로직 위임하기

˙ 모든 Renderer 기능(render, rerender)에서 유사한 위임을 수행함

˙ Controller 함수에서 다른 Controller 함수를 호출해야 할 때마다 해당 로직 Helper로 이동시키기

 

 

 

 

 

 

 

※ 출처

1. Developers' Blog - Understanding JavaScript Controllers vs Helpers in Lightning Components

Developer Blog | Salesforce Developers

2. Stack Exchange - Difference Between Controller And Helper

Lightning Apps - Difference Between Controller And Helper?