React - Intro

1. Web Application

웹 애플리케이션 또는 웹 앱은 소프트웨어 공학적 관점에서 인터넷이나 인트라넷을 통해 웹 브라우저에서 이용할 수 있는 응용 소프트웨어를 말한다.

일반적으로 특정한 종류의 동적 웹 애플리케이션을 구별하는 것은 불분명하다. 웹사이트는 대개 "웹 애플리케이션"을 가리킬 가능성이 높은데, 데스크톱 응용 소프트웨어나 모바일 앱과 비슷한 기능을 갖추고 있기 때문이다. HTML5는 웹 페이지로 로드되는 애플리케이션을 만들 수 있는 명시적인 언어 지원을 도입하였으나 로컬로 데이터를 저장하여 오프라인 상태에서도 기능할 수 있다.

 

초기의 클라이언트 - 서버 컴퓨터 환경에서 각 응용 소프트웨어들은 저만의 사용자 인터페이스를 가지고 있고 사용자 PC마다 따로 설치해야 했다. 서버 환경이 바뀌면 클라이언트 응용 프로그램도 업그레이드해야 하고 이에 따라 기술 지원 비용은 증가하고 생산성은 떨어지게 됐다. 이와 대조적으로 웹 애플리케이션은 웹 브라우저가 지원하는 HTML/XHTML 같은 표준 형식의 웹 문서 조합을 동적으로 만들어 내는 것이다. 동적 기능을 수행하는 자바 스크립트라는 표준 언어가 클라이언트 동작을 담당한다. 일반적으로 개별 웹 페이지는 정적 문서로 웹 브라우저로 배포되지만, 웹 문서가 연속적으로 전달되고 문서 마크업에 포함된 웹 폼을 통해 정보를 주고받을 수 있기 때문에 사용자에게 인터렉티브 한 경험을 얻게 한다. 웹 브라우저는 웹 문서를 해석하는 기능을 수행한다.

 

요즘에 들어선 애플리케이션의 규모가 점점 더 커지고 다양한 UI/UX를 표현하기 위해서 사용했던 이전 DOM, jquery 등으로는 유지보수 및 개발이 힘들어졌다. 그래서 애플리케이션의 생산성과 유지보수를 쉽게 하기위해 다양한 Framework와 Library등이 등장하게 되는데, 대표적으로는 Angular, Vue, React 등이 있다.

 

---

2. Library와 Framework

라이브러리는 특정 기능에 대한 도구 또는 함수들을 모은 집합이다. 즉, 프로그래머가 개발하는데 필요한 것들을 모아둔 집합이다.(단순 활용이 가능한 도구들의 집합)

 

프레임워크는 애플리케이션 개발 시 필수적인 코드, 알고리즘, 데이터베이스 연동 등과 같은 기능들을 위해 구조(뼈대)를 제공해주는 것이다. 구조 위에 프로그래머가 코드를 작성하여 애플리케이션을 완성시켜야 한다. 어느 정도 뼈대를 제공해주기 때문에 객체 지향 개발을 하면서 부족한 부분 등의 문제를 해결해준다.(소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합)

 

이 둘의 차이는 flow(흐름)에 대한 제어 권한이 어디에 있느냐의 차이이다. 프레임워크는 전체적인 흐름을 자체적으로 가지고 있으며, 프로그래머가 그 안에 필요한 코드를 작성하는 반면, 라이브러리는 사용자가 흐름에 대한 제어를 하며 필요한 상황에 가져다 쓰는 것이다. 

쉽게 정리해보자면, 프레임워크는 전체적인 흐름을 스스로 갖고 있고, 라이브러리는 개발자가 흐름을 만들며 라이브러리를 이용한다고 볼 수 있다. 프레임워크는 개발자의 코드가 프레임워크에 의해 사용되는 것.(제어의 역전), 라이브러리는 필요한 것이 있을 경우 코드를 통해 라이브러리를 이용하는 것.

프레임워크는 차, 비행기 등으로 비유 / 라이브러리는 톱 같이 연장의 개념

사람이 시동 걸고 조종을 해야 함 / 필요하면 자르고 필요하면 붙여 넣는다.

 

---

3. Angular와 Vue와 React

Angular

  - Google에서 개발

  - Framework 성격 강함

  - 무겁고 진입장벽이 높다는 점

 

Vue

  - Evan You라는 사람이 개발

  - Framework 성격

  - 진입장벽 높지 않음, 성장 속도 빠름

 

React

  - Facebook에서 개발

  - Angular, Vue와 다르게 오로지 View만 담당

  - Library의 성격 강함(자바스크립트 기반)

  - 생태계 활성화, 다양한 자료(사용자가 많다는 것)

  - View만 신경 쓰며 third-party 라이브러리 사용(ex. React-router, Redux)

 

---

4. react 특징

Component

component는 UI를 구성하는 개별적인 뷰 단위이다. react로 개발한다는 것은 블록을 만들어 성을 쌓는 것과 같은 느낌이다.

전체 앱은 각 component들이 결합해서 만들어지게 된다. 각 component들은 앱의 다른 부분, 또는 다른 앱에서 쉽게 재사용이 가능하다. 

 

JSX

JSX는 react를 위해 태어난 자바스크립트의 확장 문법으로, 페이스북이 만들었던 PHP의 개량판 XHP에 기원을 두고 있다.

JSX는 보통 선언적이라고 번역되는, Declarative 한 개발을 도와주는 도구이다. 간단하게 말하면 한눈에 이해하기 쉬운 개발을 만들어준다. 유저에게 보여주고 싶은 최종적인 View라고 할 수 있다. 개발자는 JSX를 통해 결과물에 직관적으로 도달할 수 있다. 이는 예측 가능한 개발을 만들어줄 뿐 아니라 유지보수, 협업 등에서도 엄청난 강점을 발휘한다.

 

Virtual DOM

위의 모든 것을 가능하게 만들어 주는 것, react의 가장 큰 특징 바로 Virtual DOM이다. DOM은 웹의 핵심으로써, 브라우저가 화면을 그리기 위한 정보가 담겨있는 문서이다. virtual DOM은 단순한 DOM 조작 도구가 아니라 컴포넌트 단위로 움직이는 declarative 한 개발을 구현하기 위해 도입된 것이다. 컴포넌트 단위의 개발을 구현하기 위해 보다 효율적인 DOM 조작 방식을 도입할 필요가 있었던 것이다. 만약 virtual DOM이 없었다면 react의 컴포넌트 철학은 제대로 구현될 수 없었을 것이다.