[React] 😇 React.js란?

이번 포스팅에서는 React가 무엇인지, 탄생 배경과 특징 그리고 정의를 구분지어 간단하게 정리해보려고 한다.

✔️ 1. React란?

리액트(react.js)란 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다.

1) 3세대 웹, 프레임워크? 라이브러리?

시간에 따라 자연스럽게 기술이 발전하는 것이 아니라 해결해야 하는 문제의 복잡성이 증가함으로 인해 기술이 발전한다. 그렇다면 웹에서 문제의 복잡성은 무엇을 의미하는 걸까? 사용자들이 원하는 기능들이 점점 많아지고 개발자들이 처리해야 하는 유저의 interaction 또한 점점 늘어나게 된다. 이런 상황에서 프론트 엔드 개발자들은 기존의 기술에 한계를 느끼게 되고 새로운 기술을 개발하게 된다. 그 기술들이 Front-end Framework라고 통칭되고 있는 기술들이다.

그렇다면 웹이 발전함에 따라 프론트엔드 기술들은 어떤 변환들을 거쳐 현재의 프레임 워크가 나온 것일까?

📌 1세대 기술

• HTML / CSS
• JavaScript
• DOM
• Event

📌 2세대 기술

• jQuery

📌 3세대 기술

• Angular(Framework)
• Vue(Framework)
• React(Library)
  
  

✔️ 2. React / Vue / Angular

1) Framework와 Library의 차이?

📌 공통점

• 다른 사람들이 만들어둔 코드이다

📌 차이점

• 프레임워크는 다른 사람들이 만들어둔 틀 속으로 내가 들어가는 것이지만 라이브러리는 내 작업에 다른 사람들이 만들어둔 코드를 가져와서 사용하는 것이다
• 내가 불려가면 프레임워크, 내가 부르면 리액트!
  
  

2) React / Vue / Angular

📌 Angular

• 2010년 구글에서 개발한 프레임워크
• TypeScript 기반으로 매우 안정적이고 잘 설계된 구조 안에서 개발이 가능
• 프레임워크 답게 다양한 기능기 내장되어 있다
• 무겁고 배우기 어렵다는 단점이 있다

📌 Vue

• 2014년 Even You라는 개인이 개발한 프레임워크
• Angular와 마찬가지로 Vue만의 문법과 규칙이 있다
• 프레임워크 답게 다양한 기능이 내장되어 있다
• 러닝커브가 낮다

📌 React

• 2013년 페이스북에서 개발한 라이브러리
• '지속적으로 데이터가 변화하는 대규모 애플리케이션을 구축하는' 목표로 개발
• Angular, Vue 등의 다른 프레임워크와는 달리 리액트는 오직 View만 담당하는 라이브러리
• 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리(ex. React-Router, Redux)를 함께 사용한다
  
  

3) 왜 리액트를 사용할까?

• 리액트는 자바스크립트의 문법을 그대로 활용하기 때문에 편리성을 가지고 사용할 수 있다
• 페이스북의 지속적인 관리와 함께 생태계가 활성화 되어있다
• 리액트는 오픈소스 프로젝트이다. 즉, 누구나 코드를 볼 수 있고 수정 또는 새로운 기능을 제한할 수 있다
• 페이스북에서 관리하기 때문에 퀄리티를 유지하고 있다
• Angular나 Vue에 비해 컴포넌트가 단순하고 간단하게 정의되어 있다
  
  

✔️ 3. React의 특징

• 선언적
• Virtual-dom
• Node & NPM
• CRA
• Component
• JSX
  
  

1) 선언적인 개발이란?

개발 방식을 크게 두가지로 나누면 선언적 방식, 절차적 방식으로 나눌 수 있다. 아래 청소를 예시로 각각의 특징을 살펴보자

📌 절차적(HOW?)

• 청소기를 돌린다
• 빨래를 한다
• 걸레질을 한다
• 쓰레기를 버린다
  => 목적을 이루기 위해 어떻게? 라는 측면에 중점을 두고 하나하나 절차를 밟으면서 진행한다

📌 선언적(WHAT?)

• 깨끗해진 방의 모습을 상상해서 그림을 그린다
• 로봇에게 그림을 전달한다. 만들어줘~ (여기서 로봇은 리액트)
  => 무엇이 되면 되는지? 원하는 최종적인 결과를 선언하면 된다

📌 디버깅 하는 과정

• 절차적: 모든 절차를 되짚어보면서 문제가 무엇인지 확인해야 한다. 프로그램이 복잡해질수록 유지보수가 어렵다
• 선언적: 우리가 선언한 모습이 우리가 기대한 모습과 어떻게 다른지 파악을 해보면 된다. 즉, 내가 그린 그림이 내가 실제 기대한 그림과 어떤 부분이 다른지 확인한 다음 그 부분만 고치면 된다. 그렇기 때문에 유지보수가 쉽다
  
  

2) Virtual-dom

virtual-DOM은 가상의 DOM(Document Object Model)을 말한다. DOM은 HTML 문서를 제어할 수 있는 API 트리 자료구조다. react에서 사용하는 가상 DOM 또한 실제 DOM에 기반하여 만들어진다.

react가 가상 DOM을 사용하는 이유는 가상 DOM을 만들어 이벤트가 새로 발생할 때마다 실제 DOM과 비교하여 최소한의 변경사항만 반영하기 위함이다. 또한 실제 DOM에는 브라우저가 화면을 표현하는데 필요한 정보가 모두 들어있어 실제 DOM을 이용하여 작업을 하기엔 무거우며 속도가 느리다. 그래서 가상 DOM을 이용해 효율성과 속도를 개선할 수 있다.

virtual-DOM은 리액트가 화면을 업데이트 하는 과정을 조금 더 효율적으로 수행하기 위한 구조이다.

3) Node & NPM

📌 Node란?

노드는 자바스크립트 실행 환경이다. 우리가 작성하는 자바스크립트는 단순한 텍스트의 내열이다. 이러한 텍스트들이 실제 의미를 가지려면 자바스크립트를 읽어 실제로 실행시키는 도구들이 필요하다. 이들을 자바스크립트 실행환경이라 부른다. 가장 유명한 실행환경은 브라우저이다.

웹개발 시장이 점점 커짐으로 브라우저가 아닌 다른 환경에서도 자바스크립트를 이용한 개발을 하려는 니즈가 생겨났고 이런 니즈속에서 탄생한것이 노드이다. 노트는 브라우저 바깥에서도 자바스크립트를 실행할수있도록 만들어주는 자바스크립트 실행환경이다.

우리는 왜 노드를 알아야 하고 필요로 할까?

• 우리는 리액트를 이용해서 프로젝트를 만든다. 그런데 우리가 프로젝트를 진행할 때는 실제 웹브라우저 안에서 작업을 하는 것이 아니라 우리의 컴퓨터 안에서 작업을 한다. 이 때 리액트를 구성하기 위해서는 리액트와 그 외에 자바스크립트로 구성된 여러 패키지들을 필요로 한다.
• 실제로 리액트는 UI를 구성할 때 필요, 최신의 자바스크립트 문법을 모든 브라우저가 읽고 해석할 수 있는 과거의 문법으로 변환시켜주는 Babel, 작성한 자바스크립트 파일을 분석하여 분할하고 합쳐주는 역할을 하는 WebPack 또한 필요하다.
• 이 외에도 수많은 패키지들이 프로젝트를 원할하게 진행하기 위해서 요구된다. 이런 여러 패키지들의 작업환경인 컴퓨터를 돌리기 위해서 우리의 컴퓨터에서도 자바스크립트를 실행할 수 있는 노드를 설치해야 한다.
  
  

📌 NPM이란?

NPM은 Node Package Manager의 약어이다. 여기서 말하는 패키지란 무슨 의미일까?

패키지는 노드로 실행할 수 있는 하나하나의 프로그램이다. 우리가 배우는 리액트, 위에서 언급한 Babel, WebPack 패키지이다. 결과적으로 노드를 실행할 수 있는 여러 패키지들을 다운로드 받고, 업데이트 하고 삭제할 수 있는 매니저의 역할을 하는 도구가 바로 NPM이다.

4) CRA

Create React App의 약어이다. CRA는 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구이다.(toolchain) 그렇다면 우리는 왜 CRA를 필요로 할까?

• 리액트는 UI 기능만을 제공하는 라이브러리다. 그러나 실제 온전한 웹사이트를 구축하기 위해서는 UI 구성 외에도 여러가지 다른 도구들이 필요하다. 그래서 리액트로 프로젝트를 진행하기 위해서는 필요한 도구들을 toolchain이라고 부른다
• CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공한다.
• CRA를 이용하면 하나의 명령어로 리액트 개발환경 구축이 가능하다.

nax create-react-app

5) Component

Component는 재사용이 가능한 UI 구성 단위이다. Component를 사용했을 땐 여러 장점이 발생하는데 아래를 살펴보자

• 코드 재활용성 증가 -> 우리가 컴포넌트 하나를 만들어 계속해서 재사용하고 있다는 것을 의미한다
• 코드 유지보수가 용이해진다. 만약 백개의 형태를 변경해야한다는 가정하에, 하나의 컴포넌트를 사용했다면 원본이 되는 컴포넌트 구성만 바꾸면 모두가 바뀐다.
• 해당 페이지가 어떻게 구성되었는지 파악하기 쉽다.
• 컴포넌트는 단일 개념이 아디나. 또 다른 컴포넌트를 포함한다(부모 컴포넌트 - 자식 컴포넌트)

6) JSX

JavaScript Syntax Extension의 약어이다. 말 그대로 자바스크립트 확장 문법이다. 형태는 자바스크립트와 html을 합쳐놓은 듯한 문법이다. 또한 마크업을 편리하게 작성하기 위한 문법이며 JSX로 작성한 코드는 실제 자바스크립트가 인식할 수 없는 문법이기에 Babel이라는 패키지를 이용해서 변환해줘야 한다. 아래 특징과 장점을 함께 살펴보자.

특징

• 모든 태그들은 하나의 부모태그로 감싸져 있어야 한다.
• 모든 태그가 셀프 클로징이 가능하다.
• 모든 property들은 camelCase로 사용해야 한다.
• 자바스크립트 동작이 가능하다.

장점

• HTML 태그를 그대로 사용하기 때문에 사용감이 익숙하다.
• HTML 마크업과 자바스크립트 로직을 같이 구현할 수 있다
• 자바스크립트 문법을 이용해서 HTML을 생성할 수 있다. 별도의 HTML 파일이 필요하지 않다.