앞으로 10년은 가지고 놀 수 있을거라는 React...
요즘 React를 공부하고 있는데, 문득 React가 왜 '핫한' library가 되었을까 궁금해졌다.
React 이전에 Jquery, Backbone, Angular 등.. 많은 framework가 있었고 현재도 주요하게 사용되고 있지만,
어째서 React는 단기간에 급부상 한 것인지.. 개발자들이 React에 열광하는 이유는 무엇이었을지..
이 글에서 React는 무엇이고, 많은 개발자들이 이를 사용하는 이유를 알아보고자 한다.
먼저, React 란
Facebook에서 개발한 Javascript 기반의 library이다.
웹 어플리케이션의 UI를 효과적으로 구축하기 위해 탄생했으며, 다른 library들과 함께 사용 할 수 있는
효율적인 library라고 정리할 수 있다.
Angular,Backbone.js,Vue.js 등의 프레임워크들은 주로 MVC(Model-View-Controller) 아키텍쳐나, MVVM(Model-View-View Model) 아키텍쳐를 사용한다. Angluar의 경우에는 MVW(Model-View-Whatever) 아키텍쳐로 App을 구조화 한다.
위의 예시 등과 같은 여러 아키텍쳐가 가진 공통점은 Model과 View가 있다는 것이다.
- Model : App에서 사용하는 데이터를 관리하는 영역
- View : 사용자에게 보여지는 부분
즉, 사용자가 어떠한 작업을 하면 Controller는 해당 데이터를 Model에서 조회하거나 수정하고,
이때 변경된 사항을 View에 반영한다. 이때 업데이트 하는 항목에 따라 모델의 어떤 데이터를 수정할지에 대한 로직은 간단하지만,
App의 규모가 커질수록 상당히 복잡해지고 성능 또한 떨어질 수 있다는 단점이 존재했다.
이러한 단점을 극복하기 위해 Facebook의 개발 팀은 하나의 아이디어를 고안해 냈는데,
어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아니라 기존의 View를 없애고
처음부터 새로 Rendering 하는 방식이 바로 그것이다.
여러 자료를 찾으며 '대표적인 프레임워크로 React, Vue, Angular 3가지가 있다' 라고 알고 있었지만,
React는 정확히는 framework가 아닌 library로 분류된다.
위에서 예시로 든 다양한 framework가 MVC,MVW 등의 아키텍쳐를 지향하는 것과 달리
React는 오로지 'View'만 담당하기 때문에, 다른 Web Framework가 Ajax,Router,Data Modeling 등과 같은 기능을 '내장'하고 있는 반면에, React는 그렇지 않다.
따라서, 이러한 빈자를 채우기 위해 React와 함께 또 다른 Library를 사용하거나,
혹은 다른 Web framework와 React를 혼용하야 사용하곤 한다.
React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript Library입니다.“컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.
[출처] https://ko.reactjs.org/tutorial/tutorial.html#what-is-react // React 공식문서 발췌
💡 Framework
원하는 기능 구현에 집중하여 개발할 수 있도록
일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대
ex)
Java 서버 개발에 사용되는 Spring
Python 서버 개발에 사용되는 Django, Flask
안드로이드 앱 개발에 사용되는 Android
아이폰 앱 개발에 사용되는 Cocoa Touch
웹 개발에 사용되는 Angular, Vue.js 등
자바 기반의 JSP를 위한 프레임 워크 Struts
루비로 작성된 MVC패턴을 이용하는 Ruby on Rails
💡 Library
소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임.
특정 기능을 모아둔 코드와 함수들의 집합이며 코드 작성 시 활용 가능한 도구들
ex)
Python pip로 설치한 패키지/모듈 (tensorflow, pandas, beautifulsoup 등등)
C++의 표준 템플릿 라이브러리 (STL)
Node.js에서 npm으로 설치한 모듈
HTML의 클라이언트 사이드 조작을 단순화하는 JQuery
웹에서 사용자 인터페이스 개발에 사용되는 React.js
[출처] https://cocoon1787.tistory.com/745
React의 등장 배경
React, Vue, Angular 와 같은 SPA(Single Page Application)가 나오기 전에는,
UI를 변경하기 위해서 개발자가 직접 브라우저의 돔(DOM)을 건드려야 했었다.
이러한 코드를 잘 관리하지 않으면 프로그램이 커질수록
복잡도가 기하급수적으로 증가한다는 큰 단점이 존재했었죠.
유저와의 상호작용이 중요시 되는 현대의 웹 서비스에서,
잦은 인터렉션의 발생과 이에 따른 UI의 동적인 변화들을 표헌함에 있어서
기존의 방식보다 경제적이고 효율적인 방법을 제시한 것이라고 정리할 수 있다.
React의 특징
💡 Declarative View (선언형 뷰)
State라는 개념을 도입하여, 뷰마다 State를 가지고, 해당 값이 변경되면
새로운 화면을 생성해 화면을 업데이트 한다.
즉, 데이터가 변경 될 때 해당 구성요소만 효과적으로 업데이트하고 렌더링 하는 것을
가능하게 한다.
💡 Component-based (컴포넌트 기반)
컴포넌트란, 재사용 가능한 UI의 묶음(캡슐) 이라고 할 수 있다.
컴포넌트의 로직은 템플릿이 아닌 Javascript로 작성이 되기 때문에,
다양한 형식의 데이터를 App안에서 손쉽게 전달할 수 있다는 장점을 가지고 있다.
💡 Portability (높은 이식성)
기술 스택의 나머지 부분에는 관여하지 않기 때문에,
기존의 코드를 수정하지 않고도 React의 새로운 기능을 이용할 수 있다는 장점을 가지고 있다.
React Native를 사용하여 모바일 앱 또한 개발이 가능하다.
이 외에도 Lifecycle을 가지는 React component, Virtual Dom 등
React를 깊이 파헤쳐보면 다양한 장점들이 있음을 확인 할 수 있었다.
아직 부족한 개발 지식으로 포스팅에 필요한 관련 자료들을 찾으며,
“이게 뭘까” 하는 개념들을 다수 보았기에,
관련 서적과 유튜브를 참고하여 더 공부 해야겠다는 생각이 마구마구 든다.
