[JavaScript 프레임워크] 7일차: JavaScript 프레임워크에서 컴포넌트 재사용 및 테스트하기

7. 컴포넌트 재사용 및 테스트

프로젝트 개요

이번 글에서는 JavaScript 프레임워크에서 컴포넌트를 재사용하고 테스트하는 방법에 대해 알아보겠습니다. 컴포넌트 재사용은 코드의 유지보수성을 높이고, 테스트는 코드의 신뢰성을 높이는 중요한 과정입니다. React, Vue.js, Angular 각각의 프레임워크에서 이 방법을 다룹니다.

---

React

컴포넌트 재사용

React에서는 컴포넌트를 재사용 가능하게 설계할 수 있습니다.

 

Button 컴포넌트 예제

// src/components/Button.js
import React from 'react';

function Button({ onClick, children }) {
  return (
    <button onClick={onClick} className="btn">
      {children}
    </button>
  );
}

export default Button;

 

Button 컴포넌트 사용

// src/App.js
import React from 'react';
import Button from './components/Button';

function App() {
  return (
    <div className="App">
      <Button onClick={() => alert('Clicked!')}>Click Me</Button>
    </div>
  );
}

export default App;

 

컴포넌트 테스트

React에서는 Jest와 React Testing Library를 사용하여 컴포넌트를 테스트할 수 있습니다.

 

설치

npm install --save-dev @testing-library/react @testing-library/jest-dom

 

Button 컴포넌트 테스트

// src/components/Button.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

test('renders button with text', () => {
  render(<Button>Click Me</Button>);
  const buttonElement = screen.getByText(/click me/i);
  expect(buttonElement).toBeInTheDocument();
});

test('calls onClick handler when clicked', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>Click Me</Button>);
  const buttonElement = screen.getByText(/click me/i);
  fireEvent.click(buttonElement);
  expect(handleClick).toHaveBeenCalledTimes(1);
});

 

 

Vue.js

컴포넌트 재사용

Vue.js에서는 컴포넌트를 재사용 가능하게 설계할 수 있습니다.

 

Button 컴포넌트 예제

<!-- src/components/Button.vue -->
<template>
  <button @click="handleClick" class="btn">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'Button',
  methods: {
    handleClick() {
      this.$emit('click');
    }
  }
}
</script>

<style scoped>
.btn {
  /* 스타일 정의 */
}
</style>

 

Button 컴포넌트 사용

<!-- src/App.vue -->
<template>
  <div id="app">
    <Button @click="handleClick">Click Me</Button>
  </div>
</template>

<script>
import Button from './components/Button.vue';

export default {
  name: 'App',
  components: {
    Button
  },
  methods: {
    handleClick() {
      alert('Clicked!');
    }
  }
}
</script>

<style>
/* 스타일 정의 */
</style>

 

컴포넌트 테스트

Vue.js에서는 Vue Test Utils와 Jest를 사용하여 컴포넌트를 테스트할 수 있습니다.

 

설치

npm install --save-dev @vue/test-utils jest

 

Button 컴포넌트 테스트

// tests/unit/Button.spec.js
import { shallowMount } from '@vue/test-utils';
import Button from '@/components/Button.vue';

describe('Button.vue', () => {
  it('renders button with text', () => {
    const wrapper = shallowMount(Button, {
      slots: {
        default: 'Click Me'
      }
    });
    expect(wrapper.text()).toMatch('Click Me');
  });

  it('emits click event when clicked', async () => {
    const wrapper = shallowMount(Button);
    await wrapper.trigger('click');
    expect(wrapper.emitted().click).toBeTruthy();
  });
});

 

 

Angular

컴포넌트 재사용

Angular에서는 컴포넌트를 재사용 가능하게 설계할 수 있습니다.

 

Button 컴포넌트 예제

// src/app/button/button.component.ts
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-button',
  template: '<button (click)="handleClick()"><ng-content></ng-content></button>',
  styles: ['button { /* 스타일 정의 */ }']
})
export class ButtonComponent {
  @Output() click = new EventEmitter<void>();

  handleClick() {
    this.click.emit();
  }
}

 

Button 컴포넌트 사용

<!-- src/app/app.component.html -->
<div style="text-align:center">
  <app-button (click)="handleClick()">Click Me</app-button>
</div>

// src/app/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  handleClick() {
    alert('Clicked!');
  }
}

 

컴포넌트 테스트

Angular에서는 Jasmine과 Karma를 사용하여 컴포넌트를 테스트할 수 있습니다.

 

Button 컴포넌트 테스트

// src/app/button/button.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ButtonComponent } from './button.component';

describe('ButtonComponent', () => {
  let component: ButtonComponent;
  let fixture: ComponentFixture<ButtonComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ ButtonComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ButtonComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should render button with text', () => {
    component.ngOnInit();
    fixture.detectChanges();
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('button').textContent).toContain('Click Me');
  });

  it('should emit click event when clicked', () => {
    spyOn(component.click, 'emit');
    const button = fixture.nativeElement.querySelector('button');
    button.click();
    expect(component.click.emit).toHaveBeenCalled();
  });
});

 

결론

React, Vue.js, Angular에서 컴포넌트를 재사용하고 테스트하는 방법을 배웠습니다. 컴포넌트를 재사용 가능하게 설계하고, 테스트를 통해 코드의 신뢰성을 높일 수 있습니다.

 

JavaScript 프레임워크 시리즈를 통해 다양한 프레임워크의 기본 개념과 기능을 이해하고, 실제 애플리케이션에 적용할 수 있는 방법을 배울 수 있습니다.