[React & Express] 를 이용한 웹 어플리케이션 개발하기 01

React & Express 를 이용한 웹 어플리케이션 개발하기 01

---

앵귤러가 react를 대체할수있을까?

 

앵귤러와 리액트는 모두 웹 개발 분야에서 인기있는 프론트엔드 프레임워크 중 하나입니다. 

앵귤러는 구글에서 개발하고 있으며, AngularJS(1.x)와 Angular(2+)가 있으며, TypeScript를 기본 언어로 사용합니다. 

리액트는 Facebook에서 개발하고 있으며, JavaScript 또는 TypeScript로 개발될 수 있습니다.

이제 약간의 차이점을 살펴보겠습니다.

1. 컴포넌트 기반

앵귤러와 리액트 모두 컴포넌트 아키텍처를 사용합니다. 그러나 앵귤러는 더 많은 프로젝트 구성 요소, 서비스 및 기타 디렉티브를 제공합니다. 이는 대형 애플리케이션의 작성에 적합합니다.

리액트는 단순하고 더 적게 제공합니다. 작은 스타트업 웹 사이트 또는 블로그를 만드는 데 적합합니다.

2. 데이터 바인딩

앵귤러는 양방향 데이터 바인딩을 지원합니다. 이는 뷰와 모델간의 동기화가 자동으로 이루어지며, 사용자가 입력한 값과 모델 간의 변경사항이 상호 반영됩니다.

리액트는 단방향 데이터 흐름을 가집니다. 이는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 props를 사용하고 하위 컴포넌트에서 상위 컴포넌트로 데이터를 전달할 때 콜백을 사용합니다.

3. 성능

앵귤러는 리액트보다 많은 코드를 작성하며, 프로젝트가 커질수록 더욱 느려질 수 있습니다. 이는 컴파일 시간과 런타임에 많은 라이브러리와 모듈을 로드해야 하기 때문입니다.

리액트는 코드가 더 간결하고 작은 규모의 프로젝트 또는 코드를 처음 작성하는 개발자들에게 적합합니다. Virtual DOM을 사용하여 더 나은 성능을 제공합니다.
 
4. 테스트

앵귤러와 리액트 모두 테스트 및 디버깅을 쉽게 수행할 수 있습니다. 그러나 앵귤러는 테스트 도구 및 라이브러리가 더 많습니다. 이는 대규모 프로젝트에서 유용합니다.

결론적으로, 앵귤러와 리액트는 모두 웹 개발 분야에서 매우 인기있는 프론트엔드 프레임워크입니다. 두 프레임워크 모두 사용자의 요구에 따라 선택할 수 있습니다. 앵귤러는 대형 프로젝트나 팀에서의 협업 시 더 적합하며, 리액트는 작은 규모의 프로젝트나 개인 개발자에게 적합합니다.

---

React Dom 이란?

 

React는 UI를 만드는 도구로서, 가상 돔(Virtual DOM)을 사용합니다. 이를 사용하여 최상위 DOM 요소에서 작은 변화를 찾아내고, 변화를 최소화하여 UI를 업데이트합니다.

React의 DOM 조작 방식은 React DOM에 구현되어 있으며, 이는 가상 돔을 사용하여 최적화된 DOM 조작을 수행합니다. React DOM은 React 애플리케이션을 웹 브라우저에서 렌더링하는 데 필요한 React 라이브러리의 일부입니다.

React DOM은 ReactDOM 라이브러리를 사용하여 사용할 수 있습니다. 이는 React 애플리케이션을 브라우저에서 렌더링할 수 있도록 하는 도구입니다.

ReactDOM.render() 메서드는 React 애플리케이션을 브라우저에 렌더링하는 데 사용됩니다. 이 메서드는 특정 React 컴포넌트를 렌더링하고, 해당 컴포넌트의 자식 컴포넌트를 호출하여 모든 하위 컴포넌트를 렌더링합니다.

React는, 가상 돔(Virtual DOM)을 사용하여 실제 DOM 조작을 최소화합니다. 
가상 돔은 메모리 상에서만 존재하며, 실제 DOM과는 독립적입니다. 최상위 DOM 요소에서 작은 변화를 찾아내고, 변화를 최소화하여 UI를 업데이트합니다. 기존의 DOM 조작 방식은 변화가 있을 때마다 모든 DOM을 새로 그리기 때문에 업데이트가 느릴 수 있습니다. 

하지만 가상 돔을 사용하면, 메모리 상에서만 DOM 요소를 생성하는 것으로 시작하여, 이전 상태와 현재 상태를 비교하여 변경된 부분만 렌더링합니다. 이를 통해 효율적인 UI 업데이트가 가능합니다.

React DOM은 가상 돔을 사용하므로, 개발자는 DOM 조작에 필요한 일부 기능(예: 날짜 Formatter, 문자열 조작 등)을 직접 작성해야 할 수도 있습니다.

React DOM은 다양한 이벤트 핸들링 및 상태 관리 기능도 제공합니다. 이런 기능들을 사용하면 React 애플리케이션을 조작하는 데 편리합니다.