프로젝트 깃헙주소: https://github.com/ragnarok-forU/Project-Study
리액트란 ?
리액트는 페이스북이 만든 사용자 인터페이스(UI) 개발을 위한 라이브러리로 UI 컴포넌트를 만들어 캡슐화를 시켜주기 때문에 재사용성이 높고 한가지 작업만 하기 때문에 단순하고 다양한 자바스크립트 프레임워크나 라이브러리와 함께 사용도 가능하다.
특히 리액트는 기존의 라이브러리나 프레임워크와 달리 MVC 패턴이 아닌 그 중에서도 View에만 집중한 라이브러리인데, MVC의 특성상 확장이 어렵고 거대한 시스템에 어울리지 않다고 결론을 내린 페이스북이 이처럼 결정을 내린 것이다. 이유는 모델(Model)과 뷰(View)의 수가 커지고 양방향 데이터 플로우일 수록 더욱 복잡해져 디버깅과 코드를 이해하기 어려워지기 때문에 MVC는 작은 앱 개발 시 활용도가 높다는 것이다.
리액트를 사용하는 이유 ?
복잡하고 동적인 웹 어플리케이션에서 UI를 동적으로 나타내기 위해서는 많은 상태를 관리해야 하는 부담이 생긴다.
만약에 프로젝트 규모가 크고 다양한 UI와의 상호작용이 필요하다면 DOM 요소 하나하나를 직접 관리하고 복잡하게 늘어진 코드를 리팩토링 하는 것은 점점 힘들게 될 것이고 또한 이러한 복잡한 SPA에서는 DOM 조작이 많이 발생하면 매번 브라우저가 연산을 해야 하므로 전체적인 프로세스가 비효율적이 되기 쉽다.
하지만 React의 Virtual DOM을 사용한다면 실제 DOM에 적용시키기 전 가상의 DOM을 만들어 적용시키고, 최종 완성된 결과만을 실제 DOM으로 전달한다. 이를 통해 브라우저가 진행하는 연산의 양을 줄일 수 있어 성능이 개선된다. Virtual DOM은 렌더링도 되지 않기 때문에 연산 비용이 적다. 모든 변화를 Virtual DOM을 통해 묶고 이를 실제 DOM으로 전달하여 브라우저 전체를 새로고침하지 않고도 컨텐츠를 빠르게 변경할 수 있다. 뿐만 아니라 React를 사용하면 사용자와 상호작용할 수 있는 interactive한 UI를 쉽게 만들 수 있고 기능과 UI 구현에 집중하고 불필요한 주의력 분산을 줄일 수 있게 된다.
장점
Component를 사용해서 효율적으로 재사용이 가능하고 높고 유지보수가 용이
Component는 UI를 구성하는 개별적인 뷰 단위로 전체 앱은 각 Component들이 결합해서 만들어 지게 되는데 무엇보다 각 Component들은 앱의 다른 부분 또는 다른 앱에서 쉽게 재사용이 가능하다. Redux의 창시자이며 현재는 Facebook React Core팀의 일원인 Dan Abramov는 React의 목표가 성능보다는 유지가능한 앱을 만드는 것에 있다고 설명한다.
생태계가 넓고 다양한 라이브러리 사용 가능
개발을 하다보면 막히는 부분, 오류가 있는 부분이 많은데 Vue에 비해 사용자가 많고 역시 Facebook에서 만들었다보니 확실히 커뮤니티나 자료가 굉장히 방대하다.
리액트는 라이브러리이기 때문에 다른 프레임워크나 라이브러리와 혼용 가능
React는 다른 프레임워크나 라이브러리와 쉽게 함께 사용할 수 있고 이미 개발된 서비스에서도 일정 부분에서만 선택적으로 적용이 가능하여 단계적으로 React로의 변경이 가능하다.
virtual DOM을 활용하여 빠른 렌더링이 가능
DOM은 브라우저가 화면을 그리기 위한 정보를 담고 있는 문서 객체이다. jQuery처럼 실제 DOM을 변경할 경우, 변경할 부분이 일부분이더라도 DOM 전체를 다시 렌더링해야 하고 이는 성능 저하로 직결된다는 단점이 있다. React는 렌더링 시 Virtual DOM, 즉 가상 DOM을 먼저 만든다. 그 후 실제 DOM과 비교를 하여 변경이 있는 부분(하위 컴포넌트)만 대체를 하기 때문에 리소스 낭비를 줄일 수 있다.
단방향 데이터 바인딩을 통한 디버깅 용이, 다른 라이브러리에 비해 안정성이 높음
React 내에서의 데이터의 흐름은 부모(Parent)에서 자식(Child)으로 단방향적이다. 그렇기 때문에 디버깅이 용이하며 다른 라이브러리에 비해 안정성이 높다.
리액트 네이티브를 활용하여 앱 개발 가능
리액트 네이티브는 네이티브 모바일 앱을 만들기 위한 프레임워크로서 리액트를 기반으로 개발되었다. 리액트 라이브러리가 웹 개발자나 하이브리드 앱 개발자에게 유용하고 관심을 끌게 하는 기술이라면, 리액트 네이티브는 모바일 개발자들이 몹시 주목할 기술이다.
리액트 네이티브: 대다수의 모바일 앱은 하이브리드가 아닌 네이티브 앱 형식으로 개발이 되는데 여기서 일반적으로 안드로이드와 iOS에서 동시 작동하는 소스코드를 작성하기 위해서는 '웹뷰'를 이용해야만 했다. 그러나 웹뷰를 이용한 하이브리드 앱 기술은 기존의 네이티브 앱에서 지원하는 속성을 이해하지 못했는데 리액트 네이티브 활용으로 네이티브 속성을 그대로 이용하는 것이 가능해졌다.
단점
프레임워크의 MVC와 비교하였을 때 V(View)만을 관리한다.
View 부분만을 관리하기 때문에 다른 부분은 써드파티 라이브러리(Third party library,패키지)를 이용하거나 직접 구현해야 한다.
진입장벽이 낮지 않다.
순수 JavaScript의 개념을 잘 알고 있을 필요가 있고 React는 inline-template과 JSX를 사용하는데 처음에는 적응이 어려울 수도 있다.
MVC 패턴과 비교하였을 때 V(View)만을 관리한다.
IE8이하 버전은 지원을 하지 않기 때문에 필요하다면 React 14 이하의 버전을 사용하고 이것을 호환해주는 풀리필을 사용해야 한다.
