React

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

Web Application 의 발전

우리가 사용하는 사이트에는 보이는 것 (UI: User Interface) 과 할 수 있는 것 (UX: User Experience) 이 많다. 뿐만 아니라 문서 작성, 쇼핑, SNS, 게임 등의 기능을 웹 브라우저에서 이용할 수 있다. 이처럼 사용자가 별도의 응용 소프트웨어 (어플리케이션) 를 설치하지 않아도 웹 브라우저를 통해 응용 소프트웨어의 기능을 이용 할 수 있도록 만든 웹 서비스를 웹 어플리케이션 ( Web Application ) 이라고 한다. 이러한 이유로, 현대의 대다수 웹 서비스는 웹 페이지라는 단어보다 웹 어플리케이션이라는 단어가 많이 사용 되고 있다.

과거의 웹 페이지는 UI 가 단순하고 검색어 및 회원정보 입력, 항목 클릭 등 비교적 상호작용이 적었던거에 비해 현재의 웹 어플리케이션은 동적이고 다양한 UI 를 가지며 카테고리 hover 이벤트, 좋아요 및 장바구니 기능 등 유저와의 상호작용이 많아지고 다루어야 할 데이터와 코드가 증가하게 되었다.

이처럼 규모가 커지고 다양한 UI, UX 를 구현하기 위해서는 이전의 방법 (dom 에 직접 접근해서 조작) 으로는 웹 어플리케이션을 개발하고 유지보수하는 것이 어려워졌다.

이를 보안하기 위해 dom 조작을 쉽게 만들어주는 jQuery 라는 자바스크립트 라이브러리가 등장했지만, jQuery 도 결국엔 dom 에 쉽게 접근해서 조작을 가능하게 하는 메서드의 모음이었기 때문에 화면의 무수한 DOM 요소들에 직접 접근해서 조작하고 관리하기란 쉽지 않다.

그래서 규모가 커지고 복잡한 웹 어플리케이션을 개발하며 생산성을 향상시키고, 많은 양의 데이터 관리와 코드 유지보수를 더욱 편리하게 하기 위해 다양한 프론트엔드 Framework 와 Library 가 등장 하게 되었다.

Framework 와 Library 차이점

framework 와 library 는 복잡한 개발을 효율적으로, 편리하게 하기 위해 다른 개발자들이 만들어 둔 코드라는 공통점을 가지고 있다. 둘의 차이점은, Framework 는 다른 사람이 만들어 둔 코드의 정해진 툴 (frame) 속에서만 수동적으로 작업 (work) 해야 하지만 Library 는 개발자가 작업을 진행할 때 필요한 기능을 찾고 (library) 능동적으로 가져와서 사용할 수 있다.

즉, Framework 를 활용한다는 것은 틀이 짜인 작업환경에 개발자가 들어가서 작업을 하는 것이고, library 를 활용한다는 것은 다른 사람이 만들어 둔 도구를 개발자가 작업할 때 가져와서 활용하는 것이다.

이러한 framework 와 Library 중 프론트엔드 에서 가장 많이 쓰이는 세가지가 바로 Angular, Vue, React 이다.

Angular 와 Vue 는 framework 이며, React 는 library 지만 framework 적인 특징을 일부 가지고 있다.

React 를 사용 하는 이유

그렇다면 왜 우리는 모든게 갖춰진 Angular 나 Vue 같은 framework 가 아니라, library 인 React 를 사용 할까?

React 는 자기만의 문법을 가진 Angular 나 Vue 와는 다르게 대부분 JavaScript 의 문법을 그대로 활용한다. 따라서 이미 JavaScript 에 친숙하다면 React 를 잘 활용할 수 있고, 처음 학습하는 사람 입장에서도 React 를 공부하고 활용하면서 자연스레 JavaScript 에 대한 이해도와 활용도를 높일 수 있다.

또한 메타버스의 지속적인 관리와 함께 생태계가 활성화 되어 있어, 사용자가 많고 커뮤니티가 발달해 있어 React 를 활용하면서 마주할 문제들에 대한 해결방안을 쉽게 찾아볼 수 있고, 이는 곧 개발자의 생산성을 향상하는 결과를 가져온다.

그리고 React 를 사용하는 웹 개발자는 React 기반의 React Native 라느 기술을 통해 웹 뿐만 아니라 IOS, Android 기반의 모바일 어플리케이션도 개발 가능하다.