Frontend/Angular vs React
Angular vs React | ์ ํ๋ฆฌ์ผ์ด์ ์ง์ ์ ์ ๋ํด์
์ด์ ํฌ
2023. 11. 16. 17:00
Angular์ index.ts
- Angular ํ๋ก์ ํธ์์ index.ts ํ์ผ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ง์ ์ (entry point)๋ก์ ์ฌ์ฉ๋๋ค.
- Angular ๋ชจ๋์ ๋ก๋ํ๊ณ , ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ถํธ์คํธ๋ฉ ํ๋ ์ญํ ์ ํ๋ค.
- platformBrowserDynamic() ์ ์ฌ์ฉํ์ฌ ๋ธ๋ผ์ฐ์ ์ ๋์ ์ผ๋ก Angular ํ๋ก์ ํธ๋ฅผ ๋ถํธ์คํธ๋ฉ ํ๊ณ , AppModule์ ๋ก๋ํ๋ค.
// index.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
React์ app.tsx
- React์์ app.js ๋๋ app.tsx ํ์ผ๋ก ์ฃผ์ ์ปดํฌ๋ํธ๋ค์ ์ ์ํ๋ค.
- JSX ๋ฌธ๋ฒ์ ์ฌ์ฉํ์ฌ UI ๋ฅผ ์์ฑํ๊ณ , TypeScript๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ ํ์ผ ํ์ฅ์๋ .tsx๋ฅผ ์ฌ์ฉํ๋ค.
- ReactDOM.render()๋ฅผ ์ฌ์ฉํ์ฌ App ์ปดํฌ๋ํธ๋ฅผ ๋ฃจํธ ์ปดํฌ๋ํธ์ ๋ ๋๋ง ํ๋ค.
- ReactDOM์ ํตํด DOM์ ๋ ๋๋ง ํ๋ ๊ฒ์ด ํน์ง์ด๋ค.
// app.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root') as HTMLElement);
๋ฐ์ํ