React에 대한 전반적인 이해

우리는 React를 사용하기 전 React가 무엇이고 왜 사용하는가에 대한 이해먼저 할 필요가 있다.

 

다음 순서대로 React에 대한 전반적인 이해를 해보려고한다.

1. React가 무엇인가?
2. React가 왜 등장했는가?
3. React의 주요 특징이 무엇인가?
4. 대체할 수 있는 다른 라이브러리나 프레임워크가 있다면 그 차이는 무엇인가?

---

1. React가 무엇인가?

 

공식문서에서 확인한 React의 개념은 다음과 같다.

React는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리

 

 

즉, 기본적으로 React는 UI 즉 View를 개발하기 위한 프론트엔드 라이브러리이다.

---

2. React가 왜 등장했는가?

React의 등장 배경을 설명하기 위해서는 이전의 프론트엔드(view) 개발에 대한 기본적인 이해가 필요하다.

 

1. 최초의 웹 개발

초기 웹은 정말 간단한 정적사이트 위주로 구성되었다. 따라서 기본적인 Javascript만으로도 충분히 웹을 구성할 수 있었다. (Javascript 역시 이러한 이유로 10일만에 설계, 개발되었다고 한다.) 하지만 Javascript가 웹 표준언어로 채택되고 (ECMAScript) 모든 웹이 Javascript로 구성된다. 또한 웹은 발전을 이루어 규모도 커지고 사용자 인터렉션, 서버와 통신 등의 기능을 요구하게된다. 

 

2. Ajax, jQuery 등장

단순한 언어이지만 웹의 표준 언어이기도한 Javascript는 웹 발전에 따라서 함께 발전해야했다. 특히 기존의 정적인 웹이 동적인 웹으로 구성되게 된다. 이 때문에 Ajax, jQuery가 등장하였다. 

- Ajax
기존에 서버와 통신하여 data를 가져오는 경우 인터렉션 발생으로 인한 데이터 변경 시 전체 페이지를 새로 가져와야했다. 이는 페이지 전체가 변경되기 때문에 사용자 경험(UX)이 떨어진다는 문제가 있다. Ajax는 전체 페이지를 가져오는 것이 아니라 해당 데이터를 사용하는 일부의 DOM 요소만 업데이트 한다. 따라서 리로드가 발생하지 않아 사용자 경험이 향상되며, 전체 페이지를 가져오는 것이 아니기에 네트워크 트래픽, 응답속도 향상이 향상된다.

- jQuery
사용자 인터렉션이 증가하면서 클라이언트 내에서의 DOM조작, 이벤트 처리에 대한 필요성이 대두되었다. 기존의 내장 방식은 이러한 처리를 하는 것에 불편함을 주었으며, jQuery라는 라이브러리가 등장하였다. jQuery는 클라이언트의 복잡한 상호작용을 간단한 API 호출을 통해 가능하게 해준다.

 

Ajax와 jQuery의 등장은 동적이고 반응성 높은 웹 어플리케이션 개발이 가능하도록 도와주었다.

 

3. SPA 어플리케이션의 필요성과 등장

최초 자바스크립트는 MPA(Multi Page Application) 모델을 채택하였다.

과거 PC는 현재 PC 처럼 좋지 못했다. 제한된 메모리, 자바스크립트 처리 및 브라우저 랜더링 성능의 문제가 있었기 때문에 서버에서 페이지를 구성하고 클라이언트에 보내주는 방식(SSR)이 더 적합했다.

SSR 방식을 사용하는 MPA 모델은 페이지 전환시 새로 페이지를 가져오기 때문에 끊기게 보이는 문제가 있다.

 

시간이 지나면서 개인 클라이언트 PC가 비약적인 발전을 이루었다. 또한 크롬브라우저의 v8등의 브라우저 엔진의 발전도 이루게되었다.

 

이러한 발전은 기존 MPA의 끊기는 문제를 해결할 수 있는 SPA 어플리케이션을 등장시킨다.

 

SPA(Single Page Application)는 하나의 HTML로 구성된 어플리케이션이다. 

서버로부터 최초 랜더시 1개의 HTML과 다른 페이지 구성을 위한 Script, css 파일을 모두 다운 받고 이후 클라이언트 처리를 통해 페이지를 구성하는 방식이다.

 

이 방식의 장점은 빠른 페이지 전환을 제공하여 UX를 개선하며, 서버가 아닌 클라이언트에서 상태를 유지하여 인터렉션을 부드럽게 처리할 수 있다.

 

4. Angular의 등장

SPA 어플리케이션 구성을 위해 나타난 웹 프레임워크는 Angular이다.

Google에서 개발한 이 프레임워크 다음과 같은 특징을 가지고 있다.

- 컴포넌트 기반 개발
- MVC 패턴에 기반한 양방향 데이터 바인딩
- 의존성 주입
- 강력한 템플릿 제공
- 모듈 시스템

 

Angular의 등장은 초기 SPA 어플리케이션 개발에 큰 도움을 주었으며, 그만큼 많은 개발자들이 사용하게 되었다.

하지만 Angular의 특징 중 하나인 양방향 데이터 바인딩은 프로젝트의 규모가 커질 수록 데이터의 흐름과 상태를 예측할 수 없게 만들며, 개발 및 유지보수에 불편함을 가져오게 된다.

 

5. React의 등장

페이스북 개발진은 이러한 문제를 해결하기 위해 React라는 라이브러리를 개발하였다. React는 Angular의 한계인 양방향 데이터 흐름을 단방향 데이터 흐름으로 개선하였다. 때문에 규모가 큰 프로젝트에서도 데이터의 흐름을 예측할 수 있으며 떄문에 유지보수성이 크게 증가하였다. 또한 Virtual DOM을 도입하여 효율적인 UI 업데이트를 가능하게 하였다.

---

3. React의 주요 특징은 무엇인가?

- 컴포넌트 기반 아키텍처

컴포넌트 단위의 UI 개발을 통해 재사용성이 극대화 되었으며, state와 props를 통해 컴포넌트의 상태를 관리할 수 있다. 또한 컴포넌트를 통해 UI를 모듈화 하여 사용하기 때문에 유지보수가 용이하다.

 

- 단방향 데이터 흐름

부모 컴포넌트에서 자식 컴포넌트로 데이터(Props)를 전달한다. 따라서 상태의 예측 가능성과 디버깅 용의성이 높다.

 

- Virtual DOM

실제 DOM을 조작하지 않고 간단한 복제본인 Virtual DOM을 사용하여 변경사항을 최소화 한다. 때문에 성능 최적화가 기존 DOM을 직접 조작하는 방식보다 성능최적화를 이룰 수 있다. 또한 변경사항을 가상 DOM에서 먼저 적용 후 실제 DOM에는 변경된 부분만 업데이트하기 때문에 렌더 과정이 더 빠르다.

 

- JSX (Javascript XML)

JSX 라는 HTML과 유사한 문법을 통해 컴포넌트를 정의하기 때문에 러닝커브가 작으며, 코드가독성, 유지보수에 용의하다. 또한 JavaScript 표현식을 사용할 수 있기 때문에 동적 UI 구성에 최적화되어있다.

 

- 컴포넌트 라이프 사이클

컴포넌트의 마운트, 업데이트, 언마운트에 대한 생명주기 메서드(훅)을 제공하여 특정 상황에 따른 유연한 로직 구성이 가능하다.

 

- 확장성

React는 프레임워크가 아닌 라이브러리이기 때문에 수많은 서드파티 라이브러리 도구를 확장하여 사용이 가능하다.

따라서 Redux, React Router 등과 같은 라이브러리와 함께 사용할 수 있다. 추가로 인기있는 SPA 라이브러리이기 때문에 수많은 커뮤니티와 리소스를 이용할 수 있다.

 

- 크로스 플랫폼 개발 (React Native)

React의 패턴을 모바일 개발에 적용시킨 React Native가 등장하였으며, 웹과 IOS, Android 를 하나의 코드베이스로 개발할 수 있다는 장점이 있다.

---

4. 대체할 수 있는 다른 라이브러리나 프레임워크가 있다면 그 차이는 무엇인가?

1. vs. Angular

- Angular는 프레임워크이기 때문에 전체적인 어플리케이션 구조를 제공하며, 다양한 기능을 내장한다.

- MVC 패턴 기반의 양방향 데이터 바인딩을 지원한다.

- Typescript 사용이 강제된다. 

- Virtual DOM이 아닌 실제 DOM 조작과 함께 Zone.js를 사용하여 변경 감지 및 업데이트를 수행한다.

- 러닝커브가 크다.

 

2. vs. Vue

- Vue는 프레임워크이기 때문에 자체적인 템플릿 문법을 사용하며, 여러 고급기능을 제공한다.

- 단방향, 양방향 데이터 바인딩을 모두 제공한다.

- Virtual DOM을 사용한다 (공통점)

- 러닝커브가 적다.

 

3. vs. Svelte

- Svelte는 자체 컴포넌트 문법을 사용하며, 컴파일러를 통한 빌드 타입 최적화를 통해 빠른 런타임을 제공한다.

- 단방향 데이터 바인딩을 따른다.

- 컴파일 시점에 DOM을 업데이트하는 코드를 생성하기 때문에 런타임시 오버헤드(시간 및 메모리 소모)가 적다.

---

지금까지 React에 대한 전반적인 내용을 간단히 정리하였다.

사실 더 많은 내용이 있지만 그 내용은 개별로 정리해도 하나의 포스팅이 나올 것이다.

 

위 정도의 전반적인 내용만 숙지하더라도 조금 더 좋은 React 어플리케이션을 만들 수 있다고 생각한다.

 

좀더 구체적인 내용을 학습하고 싶다면 공식문서를 참고하길 바란다.

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리