React

메타에서 개발한 오픈 소스 자바스크립트 라이브러리.

SPA을 전제로 하고 있으며, Dirty checking과 Virtual DOM을 활용하여 업데이트 해야하는 DOM 요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 엄청나게 빠른 퍼포먼스를 내는게 가능하다. 기본적으로 모듈형 개발이기 때문에 생산성 또한 상당히 높은 라이브러리인지라 순식간에 대세로 떠올랐다. 거기에 기본적으로 프레임워크가 아니라 라이브러리인지라 다른 프레임워크에 간편하게 붙여서 사용하는 것도 가능하며, React Hooks라는 강력한 메소드들을 지원하면서 사실상 웹 프론트엔드 개발의 표준으로 자리잡았다. 이와 더불어 타입스크립트나 Sass 같은 언어도 지원한다. 또한 Next.js 등의 등장으로 인해 SSG, SSR등을 할 수 있게 되면서 사용 범위 또한 기하급수적으로 늘어났다.

장점

• 객체지향의 개념으로 자주 쓰이는 화면의 UI를 부분적으로 컴포넌트화한 캡슐화로 간편하게 수정하고 재사용할 수 있다.
• View에 집중하기 때문에 라우팅이나 데이터 모델링 부분 등 없는 기능들은 다른 라이브러리를 사용해서 구현해야 한다.

Virtual DOM

서버와의 데이터 통신과는 별개로 DOM을 직접적으로 조작해야하는 기존의 웹 화면 개발 방식과 달리, React는 DOM을 직접적으로 조작하지 않고 데이터가 변화할 때 변경사항이 적용된 Virtual DOM을 만든다. 그 다음 실제 DOM과 Virtual DOM의 차이점을 비교하고, 변경된 부분을 실제 DOM에 적용한다.

보여지는 데이터의 잦은 변경이 필요한 웹앱의 경우 이러한 방식을 통해 성능을 크게 향상시킬 수 있다. 실제 동적인 웹일수록 Angular 등과 비교해서 성능이 훨씬 더 빠른 편이다. 단, 데이터가 자주 변경되지 않는 비교적 정적인 웹 페이지에 이를 적용할 경우 오히려 성능면에서 손해를 볼 수 있다.

React Native

React의 문법으로 안드로이드, iOS 앱을 개발할 수 있는 프레임워크.

장점

• 한번에 안드로이드와 IOS를 모두 지원하는 앱을 개발할 수 있다.
• 리액트 네이티브는 네이티브 코드로 컴파일되서 성능이 훨씬 좋고, 최신 OS 플랫폼에도 지원한다.
• Hot Reload와 Live Reload
• Code-push
• 개발툴이 필요없다.

단점

• 기존의 방식으로 개발하는 안드로이드/IOS보다 외부 라이브러리가 부족하다.
• 복잡한 설정은 따로 구현해야 하기 때문에, 시간과 비용이 든다.