angular 와 react 비교

angular 와 react  비교

엥귤러(Angular)는 google 에서 2016년 부터 개발한 타입스크립트 기반의 자바스크립트 프레임워크로, 2010년에 출시되어 2022년 공식 지원이 중단된 엥귤러 JS의 후 속작으로 문법은 상당히 달라졌지만 기본적으로 엥귤러의 최대장점인 MVC를 정확히 지원하고, 양방향 데이터 바인딩,  모듈화, 컴포넌트 기반의 설계를 제공하며, 컴포넌트 간의 의존성을 자동으로 관리하고, 코드의  재사용을 쉽게 할 수 있는 장점이 있습니다

리액트(React)는 메타(구 페이스북)에서 주도하여 개발한 오픈 소스 라이브러리로 기본 베이스가 모두 갖춰진 angular 와 달리 정말 단순히 virtual dom으로 view를 구현하는 단순 라이브러리 그 자체이기 때문에 필요한 다른 기능들은 스스로 개발하거나 다른 라이브러리를 설치하여 개발하여 사용하는데 단점으로 보일 수도 있지만 반대로 생각하면 그만큼 확장성이 높아 어떤 라이브러리와도 결합력이 높고, 단방향 데이터 흐름을 갖고 있어 컴포넌트간 데이터 전달이 용이하고 코드의 일관성이 증가하여 코드의 유지보수가 나름 어렵지 않다는 장점이 있습니다.

1) 기본 "hello World"

Angular 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<div>Hello World!</div>',
})
export class AppComponent {}

React

import React from 'react';
import { render } from 'react-dom';

function App() {
  return <div>Hello World!</div>;
}

render(<App />, document.getElementById('root'));

* 엥귤러는 @Component 데코레이터를 사용하여 컴포넌트 정의를 시작합니다. 이 데코레이터는 컴포넌트의 선택자, 템플릿, 스타일 정보를 각각 지정하지만 리액트에서는 컴포넌트를 정의할 때 함수나 클래스를 선택해서 사용하며, JSX를 사용해 컴포넌트 내부에서 템플릿과 스타일을 정의할 수 있습니다.

2) 값 변경 하기

Angular

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-my-component',
template: `
<div>
{{count}}
<button (click)="handleClick()">카운트 증가</button>
</div>
`,
})
export class MyComponentComponent implements OnInit {
count: number = 0; // angular는 정의된 값의 유형을 반드시 설정해야함(any, number, string, boolean등)

constructor() { }

ngOnInit() {
}

handleClick() {
this.count++;
}

}

React

import React from 'react';

class MyComponent extends React.Component {
state = {
count: 0
}

handleClick = () => {
this.setState({ count: this.state.count + 1 });
}

render() {
return (
<div>
<button onClick={this.handleClick}>Click me!</button>
<p>You clicked {this.state.count} times.</p>
</div>
);
}
}

3) 데이터 가져오기

: Angular는 rxjs 문법의 subscribe를 통해 , React는 fetch 함수를 사용하여 구현

Angular

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
data: any[];

constructor(private http: HttpClient) { }

ngOnInit() {
this.fetchData();
}

fetchData() {
this.http.get('/api/data')
.subscribe(response => this.data = response);
}
}

React

import React, { useState } from 'react';

function App() {
const [data, setData] = useState([]);

const fetchData = () => {
fetch('/api/data')
.then(response => response.json())
.then(json => setData(json))
.catch(error => console.log(error));
}

return (
<div>
<button onClick={fetchData}>Fetch Data</button>
{data.map(item => <div key={item.id}>{item.name}</div>)}
</div>
);
}

4) 반복문

: Angular는 "*ngFor"라는 디렉티브를 사용하여 반복문을 구현하고, React는 map() 함수를 사용하여 반복문을 구현

Angular

public items: any = ['item1', 'item2', 'item3'];

// 첫번째 방법

<div *ngFor="let item of items">
  {{ item.name }}
</div>

// 두번째 방법
 <ng-template ngFor let-item [ngForOf]="items">
  {{ item.name }}
 </ng-template>

React

const items = ['item1', 'item2', 'item3']

// 첫번째 방법

const list = items.map(item => <div>{item.name}</div>);

// 두번째 방법
{items.map(item => (
  <div key={item.id}>{item.name}</div>
))}

// 세번째 방법
const ItemsList = ({ items }) => (
  <div>
    {items.map(item => (
      <div key={item}>{item}</div>
    ))}
  </div>
);

5)  html 템플릿 처리

: Angular에서 Html 템플릿을 이용하여 구성 요소의 구조와 레이아웃를 정의하고,  양방향 데이터 바인딩을 사용하여 데이터가 변경될 때 View를 자동으로 업데이트 해주며, React는 데이터가 변경될 때 가상 DOM을 사용하여 View를 효율적으로 업데이트합니다. 

Angular

public title: string = 'sample';
~
<div>
  <h1>{{ title }}</h1>
  <input [(ngModel)]="title" />
</div>

// input 속성(ngModel) 안에 있는 title 을 수정하면 자동으로 h1 의 title 요소가 자동으로 업데이트됨

React

function MyComponent({ title }) {
  const [localTitle, setLocalTitle] = useState(title);

  return (
    <div>
      <h1>{localTitle}</h1>
      <input value={localTitle} onChange={e => setLocalTitle(e.target.value)} />
    </div>
  );
}

// useState라는 hook 함수를 추적하여 상태를 업데이트하고 
// 구성 요소를 다시 렌더링합니다.
// localTitle 은 업데이트할 state 변수명
// setLocalTitle 은  localTitle 을 변경할 함수명

6) css 처리

:  Angular는 템플릿 표현식을 사용하여 구성 요소의 템플릿 파일에 직접 스타일을 적용하고 React는 'styled-components' 또는 'Emotion'과 같은 라이브러리나 CSS-in-J 같은 라이브러리를 사용하여 구성 요소의 스타일을 지정합니다.

Angular

1. 첫번째 방법(인라인)
<div style="color: red; font-size: 20px;">Hello World</div>

2. 두번째 방법(컴포넌트내 사용)
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `<div>Hello World</div>`,
  styles: [`
    div {
      color: red;
      font-size: 20px;
    }
  `]
})
export class ExampleComponent {}

3. 세번째 방법(css 파일 설정)
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `<div>Hello World</div>`,
  styleUrls: './example.css',
})
export class ExampleComponent {}

React

1. 첫번째 방법(인라인 스타일)

<div style={{color: 'red', fontSize: '20px'}}>Hello World</div>

2. 두번째 방법(css 모듈 호출)

import styles from './example.module.css';

function Example() {
   return <div className={styles.text}>Hello World</div>;
}

3. 세번째 방법(index.js 파일에 글로벌 설정)
import './index.css';

7. 라우팅 처리(경로 설정)

Angular

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

React

import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Router>
  );
}