복잡한 상태 관리: 배열과 객체 다루기 🧠

실제 애플리케이션에서는 단순한 숫자나 문자열보다 복잡한 상태를 다루는 경우가 많아요. 배열이나 객체를 상태로 관리할 때 두 라이브러리는 어떻게 다른지 살펴볼게요.

LitElement에서 배열과 객체 다루기

import { LitElement, html } from 'lit-element';

class TodoList extends LitElement {
  static get properties() {
    return {
      todos: { type: Array }
    };
  }

  constructor() {
    super();
    this.todos = [
      { id: 1, text: '웹 컴포넌트 공부하기', completed: false },
      { id: 2, text: 'LitElement 익히기', completed: false }
    ];
  }

  addTodo(text) {
    // 새 배열 참조를 생성하여 상태 업데이트
    this.todos = [...this.todos, {
      id: Date.now(),
      text,
      completed: false
    }];
  }

  toggleTodo(id) {
    // map을 사용하여 새 배열 참조 생성
    this.todos = this.todos.map(todo => 
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    );
  }

  render() {
    return html`
      <ul>
        ${this.todos.map(todo => html`
          <li>
            <input type="checkbox" 
                  ?checked=${todo.completed}
                  @change=${() => this.toggleTodo(todo.id)}>
            <span>${todo.text}</span>
          </li>
        `)}
      </ul>
      <button @click=${() => this.addTodo('새 할일')}>할일 추가</button>
    `;
  }
}

customElements.define('todo-list', TodoList);

Stencil에서 배열과 객체 다루기

import { Component, State, h } from '@stencil/core';

@Component({
  tag: 'todo-list',
  styleUrl: 'todo-list.css',
  shadow: true
})
export class TodoList {
  @State() todos: { id: number, text: string, completed: boolean }[] = [
    { id: 1, text: '웹 컴포넌트 공부하기', completed: false },
    { id: 2, text: 'Stencil 익히기', completed: false }
  ];

  addTodo = (text: string) => {
    // 새 배열 참조를 생성하여 상태 업데이트
    this.todos = [...this.todos, {
      id: Date.now(),
      text,
      completed: false
    }];
  }

  toggleTodo = (id: number) => {
    // map을 사용하여 새 배열 참조 생성
    this.todos = this.todos.map(todo => 
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    );
  }

  render() {
    return (
      <div>
        <ul>
          {this.todos.map(todo => (
            <li>
              <input type="checkbox" 
                    checked={todo.completed}
                    onChange={() => this.toggleTodo(todo.id)} />
              <span>{todo.text}</span>
            </li>
          ))}
        </ul>
        <button onClick={() => this.addTodo('새 할일')}>할일 추가</button>
      </div>
    );
  }
}

두 라이브러리 모두 불변성(Immutability) 원칙을 따라 상태를 업데이트하는 것을 볼 수 있어요. 배열이나 객체를 직접 수정하지 않고, 새로운 참조를 생성해서 상태를 업데이트하죠. 이건 React나 Redux 같은 최신 프론트엔드 라이브러리의 패턴을 따르는 거예요.

이런 방식은 상태 변화를 예측 가능하게 만들고, 디버깅을 쉽게 해줘요. 특히 재능넷처럼 다양한 컴포넌트와 상태를 관리해야 하는 복잡한 웹 애플리케이션에서는 이런 패턴이 정말 중요하죠! 😊