주로 리액트를 사용합니다. 프레임워크면 Next.js인데.. 라이브러리?
리액트는 다양한 JS프레임워크나 라이브러리와 함께 사용도 가능하다.
특히 리액트는 기존의 라이브러리나 프레임워크와 달리 MVC 패턴이 아닌 그 중에서 View에만 집중한 라이브러리인데,
MVC 특성상 확장이 어렵고 거대한 시스템에 어울리지 않다고 결론을 내린 페이스북이 이처럼 결정한 것입니다.
이유는 Model과 View의 수가 커지고 양방향 데이터 플로우일수록 더욱 복잡해져 디버깅과 코드 이해가 어려워지기 떄문에 MVC는 작은 앱 개발시 활용도가 더 높다는 것입니다.
이에 따라 더 예측가능하도록 코드를 구조화하기 위해서 단방향 시스템 아키텍쳐인 Flux를 제안하였습니다.
리액트를 사용하는 이유는
복잡하고 동적인 웹 어플리케이션에서 UI를 동적으로 나타내기 위해서 많은 상태를 관리해야 하는 부담이 생깁니다.
만약 프로젝트 규모가 크고 다양한 UI 상호작용이 필요하면 DOM 요소 하나하나를 직접 관리하고 복잡하게 늘어진 코드를 리팩터링하는 것은 힘들어질 것입니다.
복잡한 SPA에서는 DOM 조작이 많이 발생하면 매번 브라우저가 연산을 해야 하므로 전체적인 프로세스가 비효율적이 되기 쉽습니다.
하지만 React의 Virtual DOM을 사용하면, 실제 DOM에 적용하기 전에 가상 DOM을 만들어 적용시키고, 최종 완성된 결과만을 실제 DOM으로 전달합니다. 이를 통해 브라우저가 진행하는 연산의 양을 줄일 수 있어 성능이 개선됩니다.
Virtual DOM은 렌더링도 되지 않으므로 연산 비용이 적습니다. 모든 변화를 Virtual DOM에 묶고 이를 실제 DOM으로 전달하여 브라우저 전체를 새로고침하지 않고도 컨텐츠를 빠르게 변경할 수 있습니다.
뿐만 아니라, interactive UI를 쉽게 만들 수 있고, 기능과 UI 구현에 집중하고 불필요한 주의력 분산을 줄일 수 있습니다.
리액트의 특징은
•
자바스크립트 기반
•
선언형 - 예측 가능한 코드 및 쉬운 디버깅
•
Virtual DOM - DOM Tree 같은 구조체를 갖고, diffing 알고리즘을 통해 문서 변화를 확인한 다음, ‘Reconciliation’ 진행으로 부분 조작이 가능합니다. DOM 직접 조작이 아니라 효율적이다.
•
Components - 개발이 쉽고 유지보수가 편하다.
•
단방향 데이터 플로우 - 데이터가 변하면 UI 업데이트된다.
장점
•
Components는 효율적 재사용과 유지보수가 편하다. - Facebook React Core 팀의 일원인 Dan Abramove는 React의 목표가 성능보다는 유지가능한 앱을 만드는 것에 있다고 설명했다.
•
생태계가 넓고, 다양한 라이브러리 사용 가능
•
라이브러리이므로 다른 프레임워크와 라이브러리와 혼용 가능하다.
•
Virtual DOM을 활용하여 빠른 렌더링이 가능하다. - JQuery처럼 실제 DOM을 변경하면 일부를 변경할 때도 DOM 전체를 다시 렌더링해야 하고, 성능 저하로 직결된다. 리액트는 일부만 변경하여 리소스를 절약한다.
•
단방향 데이터 바인딩을 통한 디버깅 용이, 안정성 높음
•
리액트 네이티브를 활용한 개발 - 기존에는 웹뷰를 이용했으나 웹뷰 하이브리드 앱 기술은 기존 네이티브 앱의 지원하는 속성을 이해하지 못했었다.
단점
•
View만을 관리하므로 다른 부분은 직접 구현해야 한다.
•
진입장벽이 낮지 않다.
