> For the complete documentation index, see [llms.txt](/llms.txt)

# UI Kit을 사용하여 텍스트 채팅 구현

조금 더 고급 튜토리얼에도 도전해 봅시다



## UI 구성

![img.png](img.png)

먼저 씬의 전체 모습을 보여드리겠습니다.

화면 상단에 메시지 리스트, 하단에 텍스트 입력 필드와 전송 버튼을 배치했습니다.

## 컨텍스트

![img_1.png](img_1.png)

Context 배치에 대해 설명합니다.

A는 GS2-Chat의 룸 컨텍스트입니다.

B는 GS2-Chat의 메시지 리스트 컨텍스트입니다.

C는 GS2-Chat의 메시지 컨텍스트입니다.

## 구현 해설

### 메시지 목록 조회

![img_11.png](img_11.png) ![img_12.png](img_12.png)

룸 컨텍스트에는 사전에 GS2-Chat에서 생성해 둔 룸의 정보를 설정합니다.

![img_2.png](img_2.png) ![img_3.png](img_3.png)

메시지 리스트 컨텍스트에는 2개의 컴포넌트를 붙여 두었습니다.

Gs2ChatMessageListFetcher는 룸 컨텍스트에서 지정된 룸 내 메시지 목록을 조회합니다.

Gs2ChatMessageList는 Fetcher가 조회한 데이터를 기반으로 GameObject를 생성합니다.
Maximum Items는 리스트 내 요소를 생성하는 최대 개수입니다.

시작 시 Maximum Items 개수만큼 Prefab으로 지정한 GameObject를 복제하여 인스턴스화합니다.
리스트 아이템의 증감에 맞춰 다시 인스턴스화하는 것은 비용이 높기 때문에, 사전에 모든 GameObject를 인스턴스화하고 불필요한 것은 숨깁니다.



![img_4.png](img_4.png)

대량으로 인스턴스화된 Message 노드.



Prefab에는 메시지 컨텍스트를 가진 GameObject를 지정할 수 있으며, 표시할 때는 반드시 Fetcher가 조회한 메시지 중 하나가 설정됩니다.



![img_5.png](img_5.png) ![img_6.png](img_6.png)

인스턴스화된 Message에 할당된 메시지 컨텍스트의 상태.



### 메시지 표시

![img_8.png](img_8.png) ![img_9.png](img_9.png)

메시지 컨텍스트에는 3개의 컴포넌트를 붙였습니다.

Gs2ChatMessageContext에는 Message를 지정하지 않았습니다. 이는 Gs2ChatMessageList에 의해 값이 설정될 것을 전제로 하기 때문입니다.

Gs2ChatMessageFetcher는 Gs2ChatMessageContext에 지정된 메시지의 정보를 조회하여 보관합니다.

Gs2ChatMessageEnabler는 Gs2ChatMessageFetcher가 값 조회를 완료하면 Text 노드를 활성화하도록 설정되어 있습니다.

![img_10.png](img_10.png)

Text에는 Gs2ChatMessageLabel을 지정하여, Message의 metadata 내용을 텍스트에 반영하도록 설정했습니다.

### 메시지 게시

메시지를 게시하려면 GS2-Chat의 Post API를 호출해야 합니다.

![img_15.png](img_15.png)

UI Kit에는 Post를 실행하기 위한 Prefab인 Gs2ChatMessagePostAction이 준비되어 있습니다.
이 Prefab은 활성화되면 API가 호출되므로, 초기 상태에서는 비활성화해 둡니다.

![img_16.png](img_16.png)

게시하는 메시지에는 2개의 파라미터를 설정할 수 있습니다.

| 이름 | 설명 |
| --- | --- |
| Category | 메시지의 종류 |
| Metadata | 메시지 본문 |

Category에는 임의의 숫자를 지정할 수 있으며, "0"은 텍스트 메시지, "1"은 스티커 와 같이 분류하여 Metadata를 읽어들이는 방법을 결정하는 정보로 사용할 수 있습니다.
Metadata는 메시지의 본문입니다.

이번 샘플에서는 Category는 0만 사용하고, Metadata에는 원시 문자열을 지정하기로 합니다.

성공 시에는 OnPostComplete가 호출되어, 자기 자신의 GameObject를 비활성화하고 InputField의 입력 내용을 빈 값으로 초기화합니다.

![img_13.png](img_13.png) ![img_14.png](img_14.png)

InputField의 OnValueChanged로 입력 필드 값의 변경을 처리하여, Gs2ChatMessagePostAction의 Metadata에 값을 설정합니다.

![img_17.png](img_17.png) ![img_18.png](img_18.png)

전송 버튼의 OnClick 이벤트에서 Gs2ChatMessagePostAction Prefab을 활성화합니다.

## 동작 확인

![img_19.png](img_19.png)

(사전에 동작 확인을 했기 때문에 3건의 메시지가 존재합니다)
ddd를 입력하고 전송 버튼을 누릅니다.

![img_20.png](img_20.png)

메시지 리스트에 ddd가 추가되고, InputField가 초기화됩니다.

## 마치며

UI Kit의 `선언형 프로그래밍`의 재미가 전달되었을까요?

메시지 전송 처리를 한 후 메시지 목록을 다시 가져오는 처리를 굳이 작성하지 않아도
컴포넌트로서 "메시지 목록을 표시한다", "메시지의 metadata 내용을 텍스트에 반영한다"는 설정만으로 동작을 제어할 수 있습니다.