# Glimmer 컴포넌트 변경 감지가 작동하지 않음 - @tracked 배열 속성 변경

**URL:** https://meta.discourse.org/t/glimmer-component-change-detection-not-working-mutating-properties-in-tracked-array/378246
**Category:** Development
**Created:** [8월 12, 2025, 5:45오전 UTC](https://meta.discourse.org/t/glimmer-component-change-detection-not-working-mutating-properties-in-tracked-array/378246 "2025-08-12T05:45:09Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![Steve\_John](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steve_john/32/435022_2.png) [@Steve\_John](https://meta.discourse.org/u/Steve_John)
#### Post date: [8월 12, 2025, 5:45오전 UTC](https://meta.discourse.org/t/glimmer-component-change-detection-not-working-mutating-properties-in-tracked-array/378246/1 "2025-08-12T05:45:09Z")

</div>

여러분 안녕하세요!

Glimmer 컴포넌트에서 변경 감지(change detection) 관련으로 문제가 발생해서 조언이 필요합니다. `@tracked` 배열 내 객체의 프로퍼티를 변경(mutation)해도 템플릿이 다시 렌더링되지 않습니다.

**\*\*현재 설정:\*\***

````plaintext
```javascript

import Component from '@glimmer/component';

import { tracked } from '@glimmer/tracking';

import { fn } from '@ember/helper';

import { on } from '@ember/modifier';

import { action } from '@ember/object';

export default class CustomSidebarComponent extends Component {

  @tracked items = [

    {

      id: 'home',

      label: 'Home',

      expanded: false

    },

    {

      id: 'my-posts', 

      label: 'My Posts',

      expanded: false

    }

    // ... 더 많은 항목

  ];

  @action

  toggleExpanded(item) {

    item.expanded = !item.expanded; // 이 변경은 다시 렌더링을 트리거하지 않습니다

    console.log('Toggled:', item.label, item.expanded); // 정상적으로 로그가 출력됩니다

  }

  <template>

    <div id="custom-sidebar">

      <ul>

        {{#each this.items key="@index" as |item|}}

          <li class="menu-item {{if item.expanded 'expanded'}}" {{on "click" (fn this.toggleExpanded item)}}>

            {{item.label}} {{if item.expanded "(expanded)" ""}}

          </li>

        {{/each}}

      </ul>

    </div>

  </template>

}

```

````

**\*\*문제:\*\***

1. 클릭 핸들러가 정상적으로 실행됩니다

2. `item.expanded` 프로퍼티가 업데이트됩니다 (콘솔에서 확인됨)

3. 하지만 템플릿이 다시 렌더링되지 않습니다 - 클래스 변경 없음, 텍스트 변경 없음

**\*\*시도해 본 것들:\*\***

1. **\*\*배열 재할당\*\*** - 변경 후 `this.items = [...this.items]` 실행 (동작하지 않음)

2. **\*\*Immer를 이용한 불변 업데이트\*\*** - 시도하고 싶었지만 Discourse 테마에서 npm 임포트를 작동시킬 수 없었습니다

3. **\*\*다른 키 전략\*\*** - `key="@index"` 대신 `key="id"` 사용

**\*\*질문:\*\***

- Glimmer에서 `@tracked` 배열 내 객체의 프로퍼티를 변경하는 것이 동작하도록 의도된 것인가요?

- 개별 객체를 어떤 방식으로든 tracked로 만들어야 하나요?

- 이 사용 사례에 대한 권장 패턴이 있나요?

- 이것이 Discourse 테마 환경에서 실행되고 있기 때문일 수 있나요?

- 반응성 라이브러리에 영향을 미치는 Discourse 테마의 npm 임포트 제한 사항이 있나요?

**\*\*환경:\*\***

- Discourse 테마 컴포넌트

- `.gjs` 파일이 있는 Glimmer 컴포넌트

- 최신 Discourse 버전 - 오늘 업데이트됨

어떤 통찰도 큰 도움이 될 것입니다! Glimmer의 반응성 시스템에 대해 제가 근본적으로 놓치고 있는 것이 있나요?

감사합니다!

---

_[View the full topic](https://meta.discourse.org/t/glimmer-component-change-detection-not-working-mutating-properties-in-tracked-array/378246)._