# 컴포넌트 실시간 업데이트

**URL:** https://meta.discourse.org/t/live-updates-of-components/318126
**Category:** Development
**Created:** [7월 24, 2024, 2:15오후 UTC](https://meta.discourse.org/t/live-updates-of-components/318126 "2024-07-24T14:15:26Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [7월 24, 2024, 2:15오후 UTC](https://meta.discourse.org/t/live-updates-of-components/318126/1 "2024-07-24T14:15:27Z")

</div>

다음과 같은 컴포넌트가 있습니다:

```plaintext
<td class="topic-rating">
  <span class="rating-title">{{ratingName}}</span> 
     <form>
        <input type="hidden" name="topic_id" value="{{topic.id}}">
        {{#unless useNames}}{{ratingLow}}{{/unless}}
        {{#each this.ratingOptions as |option|}}
            <RadioButton
              @name={{option.name}}
              @value={{option.value}}
              @selection={{this.myRating}}
              @onChange={{this.submitRating}}
            />
            {{#if useNames}} <span class="rotated-label">{{option.label}}</span>{{/if}}
        {{/each}}
        {{#unless useNames}}{{ratingHigh}}{{/unless}}
    </form>
</td>

```

평점은 `topic_view` 시리얼라이저에 추가된 배열이며, 각 배열 항목에는 `topic_id`와 `rating_id`가 포함되어 있습니다.

그리고 다음과 같은 지원 JS 코드가 있습니다:

```plaintext
...
export default class TopicRatingComponent extends Component {
  get myRating() { 
    const ratingId = this.args.id;
    const rating = this.args.topic.user_ratings.find((rating) => Number(rating.rating_id) === Number(ratingId));
    return rating?.rating_value;
  }
...

```

기대대로 작동합니다. `RadioButton` 중 하나를 클릭하면 POST 요청을 수행하고 토픽 시리얼라이저에 추가된 커스텀 모델을 업데이트하는 함수가 호출됩니다. 페이지를 새로 고침하면 모든 것이 기대대로 표시되지만, 라디오 버튼이 실시간으로 업데이트되기를 원합니다(현재 여러 번 변경하면 여러 라디오 버튼이 켜진 상태로 유지됩니다).

제 컨트롤러는 다음과 같이 처리합니다:

```plaintext
      MessageBus.publish("/topic/#{params[:topic_id]}", reload_topic: true)

```

따라서 토픽 목록에 표시되는 토픽들이 업데이트되어야 한다고 _생각_합니다.

문제는 `get` 대신 `@discourseComputed`를 사용해야 하는 것 같다는 생각인데, 그렇게 하면 오류가 발생합니다. 아마 컴포넌트에서 `@discourseComputed`를 사용할 수 없는 걸까요? 아니면 다른 어떤 작업을 해야 하는 걸까요?

수정: ChatGPT에게 물어보니 `import { tracked } from '@glimmer/tracking';`을 사용하여 무언가를 해야 한다고 하네요. 그래서 지금 그 방법을 시도하고 있습니다…

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [7월 24, 2024, 4:55오후 UTC](https://meta.discourse.org/t/live-updates-of-components/318126/2 "2024-07-24T16:55:11Z")

</div>

그래서 결국 해냈습니다. 이 내용들이 다른 누군가에게 도움이 될 수 있을 것 같아, 컴포넌트에서 제가 놓치고 있었던 부분을 공유합니다:

이것은 일반적으로 유용한 문서라고 하기는 어렵지만, 누군가 필요할 때 도움이 될 수도 있겠고 (아니면 다음에 제가 필요할 때 다시 찾을 수도 있겠네요!).

```plaintext
import { tracked } from '@glimmer/tracking';
...
  @tracked myRating

 constructor() {
    super(...arguments);
    this.userRatings = this.args.topic.user_ratings; // tracked 프로퍼티 초기화
    if (!this.args.topic.user_ratings) {
      return [];
    }
    const ratingId = this.args.id;
    const rating = this.args.topic.user_ratings.find((rating) => Number(rating.rating_id) === Number(ratingId));
    this.myRating = rating?.rating_value;
    }

....
 // 그리고 값을 변경하는 액션에서는:
        this.myRating = Number(newStatus);

```