[UE4] 커스텀 위젯을 위젯 컴포넌트로 사용하기 (UMG)

using custom widget to widget component

using child widget in parent widget

UMG를 구성하다보면 계층구조가 복잡해지는 경우가 있는데, 이럴 때 동일한 구조로 반복 사용되는 부분을 따로 위젯으로 만들면 조금 더 보기 편한 계층구조를 이룰 수 있다.

 

다만 이렇게 할 경우 상위 위젯에서 하위 위젯의 컴포넌트에 접근할 수 없으므로, (ex. 텍스트가 있는 버튼을 하위 위젯으로 만들면 상위 위젯에서는 text 컴포넌트에 접근할 수 없다) 이 값을 변경시켜줄 수 있는 변수를 따로 준비해야 한다. 그리고 하위 위젯의 각 인스턴스마다 실행될 이벤트가 다르다면 하위 위젯에서 로직을 실행하지 않고 상위 위젯에서 처리할 수 있도록 해줘야 한다.

 

먼저 위젯 생성부터 차례대로 살펴보자. 

1. 동일한 구조로 반복되는 부분을 위젯으로 생성

나는 이름이 있는 버튼을 많이 만들어야 하는데, 매번 만들때마다 스타일을 지정해주는 것이 귀찮아서 버튼 위젯을 따로 만들고 이를 재활용 하기로 했다.  (복붙하면 되지만 계층구조가 지저분해진다. 깔끔하게 그냥 만들자)

 

2-1. 커스텀이 필요한 부분을 변수로 지정

버튼마다 이름이 달라야 하는데 상위 위젯에서는 하위 위젯의 컴포넌트에 접근할 수 없으므로, 이름을 입력받을 변수를 생성하고 상위 위젯에서 변경할 수 있도록 Instance Editable 을 활성화했다. Expose on Spawn 은 현재 상황에서는 체크하지 않아도 문제가 없지만 Create Widget 등의 함수를 통해 위젯을 동적으로 추가하는 경우 체크해주어야 한다.

 

그리고 Construct 와 Pre Construct 이벤트에 ButtonText 값으로 버튼에 표시되는 텍스트박스 값을 바꾸도록 설정해준다. Pre Construct 이벤트를 연결해주면 디자이너 패널에서 위젯을 수정할 때 바로 반영되는 것을 확인할 수 있으므로 꼭 연결해주도록 하자.

 

 

이렇게 해서 똑같은 구조를 가진 위젯을 간단히 추가할 수 있고, 각 위젯마다 커스텀이 필요한 부분도 변경 가능하다.

위젯의 디테일 패널에서 Button Text 값을 바꿀 때 마다 위젯에 변경사항이 바로 적용되는것을 확인할 수 있다.

 

 

 

2-1. 커스텀이 필요한 기능은 Dispatcher를 사용

위젯마다 수행 기능이 달라야 하는 경우도 있다.

그럴 땐 Dispacher를 이용해 하위 위젯의 이벤트를 상위 위젯에서 처리할 수 있도록 하면 된다.

 

먼저 하위 위젯의 Event Dispatcher 에서 상위 위젯으로 보낼 디스패쳐를 생성한다.

나의 경우 버튼 이벤트를 인스턴스마다 다르게 해야 하므로 하위 위젯 버튼의 OnClicked 이벤트가 실행될 때 이벤트 디스패쳐를 호출해 상위 위젯에서 이벤트 기능을 따로 지정할 수 있게 했다.

 

상위 위젯 디자이너 패널에서 앞서 추가했던 하위 위젯 인스턴스의 디테일 패널을 보면 이전에는 없었던 On Button Clicked 이벤트가 생긴 것을 알 수 있다. +를 눌러 해당 위젯이 실행할 로직을 추가해주면 된다.

 

 

위젯 사용 빈도가 높은 프로젝트에서는 자주 반복되는 위젯 구조를 하위 위젯으로 만들어 사용한다고 하니, 미리 익혀두면 좋을 것 같다.