[React] 리액트 : #1 React ?

오늘은 리액트가 무엇이고 왜 리액트인지를 알아보는 시간을 가지려고한다.

👨🏻‍🎨

---

리액트 == 자바스크립트 라이브러리

 

React, Angular, Vue 

알지 못하더라도 셋 중 하나 이상은 꼭 들어봤을 것이다.

얘네들을 자바스크립트 라이브러리 / 프레임워크라고 부르는데
자바스크립트로 쉽고 편리하게 개발할 수 있도록 도와주는 공통 목적을 가지고 있다.

 

 

라이브러리 vs 프레임 워크

여기서 라이브러리와 프레임워크의 차이점에 대해 간단히 짚고 넘어가자면 

 

라이브러리

: 개발의 편의를 위한 도구의 모음, '공구'에 비유할 수 있고

프레임워크 

: 기반 구조까지 짜여져있는 거기에 다양한 도구들이 모여있는 공장에 비유할 수 있다.

 

 

 

이 중 리액트는

사용자에게 선택의 여지가 주어지는 자유도가 높은 라이브러리의 성격을 띄고 있다.
리액트는 생태계가 풍부하며 다양한 환경에 접목해서 사용할 수 있다.

 

리액트는 페이스북에서 만든 오픈소스 자바스크립트 라이브러리 중 하나로
현재 가장 인기있고, 많이 사용되는 프론트앤드 라이브러리이다.

정말 수많은 페이지에서 리액트를 사용하고 있는데
내가 방문한 페이지들이 리액트를 사용하여 만들어졌는지 궁금하다면
크롬 익스텐션 설치를 통해서 간편하게 알아볼 수 도 있다.
( 👇🏻 react-detector : 해당 페이지에 방문했을 때 리액트를 사용하여 만들어졌는지 알려주는 익스텐션)

 

react-detector

 

 

리액트 왜 사용하는 걸까?

인스타그램을 노트북으로 사용한 적이 있는데
분명 웹 페이지이지만 상호작용하며
새로고침을 하지않고도 선택한 화면으로 부드럽게 전환이 되여
마치 앱을 사용하는 것과 같은 경험을 받았다.

이렇듯 최근에는 단순한 웹 페이지가 아니라 웹-앱(Web-app)으로 제작된다.
그리고 이런 웹-앱을 쉽게 만들 수 있게 해주는 것들이 React, Angular, Vue와 같은 것이다.

 

 

리액트 사용 장점

• 웹-앱을 쉽게 모바일-앱으로 발행을 할 수 있다.
• 단순 웹 페이지보다는 비즈니스적 강점을 가진다.
• 앱처럼 뛰어난 UX
• 다양하고 쉽게 가져다쓸 수 있는 컴포넌트

 

리액트 특징

• 단방향 데이터 플로우
• 컴포넌트 기반 구조
• Virtual DOM
• Props and State
• JSX

 

 

1. 단방향 데이터 플로우

 

2. 컴포넌트 기반 구조

컴포넌트는 부품의 개념이다.
페이지 단위로 HTML을 작성하는 것이 아니라
필요한 각 부품을 조립하여 하나의 UI로 만든다.

그렇기 때문에
복잡해지더라도 유지보수, 관리의 차원에서 편리하며 컴포넌트는 재사용이 가능하다.
또한 제공하는 리액트의 컴포넌트를 사용하는 것이 
스스로 구현해서 사용하는 것 보다 비교도 안되게 빠르고 쉽게 구현할 수 있다.

 

3. Virtual DOM

리액트는 Virtual DOM을 활용하는 대표적인 자바스크립트 라이브러리이다.
우선 VDOM은 실제 DOM이 아닌 추상적인 개념이다.

VDOM의 개념이 생겨난 이유를 이해하기 위해서는 브라우저 렌더링 과정에 대한 이해가 필요하다.
간단히 하나의 새로운 업데이트가 발생했을 때를 가정하고 비교해보자.

# VDOM이 아닌 실제 DOM의 작동방식 대로라면

하나의 새로운 업데이트가 발생했을 때
업데이트를 추가하기 위해 DOM을 다시 처음부터 렌더링하여 나타내게 된다.
그렇다보니 추가된 작은 부분을 업데이트하기위해
전체의 DOM을 모두 재작성하며 불필요한 연산과정까지 포함하게된다.

#그에 반해 VDOM은

기존 DOM의 상태를 메모리에 넣어두고 변경이 있을 때만 업데이트한다.
즉, VDOM은 화면에 그려지지 않은 상태 아직 메모리에 있는 상태이다.

다시말해 전체 DOM을 재작성하는 것이 아니라
VDOM에서 작성된 것과 업데이트 이전 실제 DOM과 비교해서
바뀐 부분만 실제 DOM에 적용한다.

또한  가상 돔은 실제로 렌더링 되지않기 때문에
연산비용을 최소화할 수 있으며 효율적이라고 표현하는 것이다.

그렇다고 VDOM이 무조건 실제 DOM과 비교해서 성능이 우수한 것이 아니다.
하지만 규모가 큰 SPA 방식의 경우와 같이 사용자 인터렉션이 많을 경우 유리하다.
(업데이트 과정에서 불필요한 브라우저 연산이 많을 경우) 

 

리액트 공식 문서에서는 아래와 같이 표현한다.

Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고
ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다.

 

그리고, React와 Virtual DOM에 관련된 귀여운 동영상이 있어서 가져왔다.

 

 

4. Props and State

 

5. JSX

JSX는 Javascript XML의 약자로
자바스크립트를 확장한 문법으로 XML과 유사하다.
자바스크립트의 공식적인 문법은 아니지만, 리액트에서 UI를 표현할 때 사용하는 문법이다.

HTML 작성과 비슷하기 때문에 쉽고 익숙하게 작성할 수 있다.
브라우저에서 실행되기전에 바벨을 이용하여 노멀한 자바스크립트 코드로 변환한다.

 

 

단방향 플로우와 Props and State는 이해가 안되서 다음 번에 다시 추가해보겠다..,,,!

---

누구든지 하는 리액트 1편: 리액트는 무엇인가 | VELOPERT.LOG

Reactとは