[REACT] React를 왜 사용하는 걸까?

 

지금까지 리액트를 잘 사용하고 있었는데 리액트가 왜 등장하게 되었고 왜 사람들이 많이 사용하고 인기있는지가 궁금해졌다. 그래서 이 글에서는 React가 무엇인지, 어떻게 등장을 했는지, 특징이 무엇인지 살펴보자.

 

---

 

 

🏃‍♂️ React란?

- 리액트는 UI 자바스크립트 라이브러리

- 싱글 페이지 애플리케이션의 UI(User Interface)를 생성하는데 집중한 라이브러리

- 리액트는 싱글 페이지 애플리케이션에서 UI를 만드는 자바스크립트 라이브러리이다보니, 싱글 페이지 애플리케이션 제작을 하는 다른 프레임워크에 비해 부족한 부분이 있다

- 페이지 전환 기능을 제공하지 않기 때문에, 리액트를 사용하여 페이지 전환을 해야한다면, react-route와 같은 추가적인 라이브러리를 사용해야 한다.

 

 

🖼 프론트앤드 라이브러리와 프레임워크의 등장 배경

리액트는 정말 인기있는 프론트엔드 라이브러리이다.

그렇다면 프론트엔드 라이브러리가 무엇인가?
일단 우리가 정적인 웹 사이트를 만들기 위해서는 프론트엔드 라이브러리의 도움없이도 만들수 있다.

그런데 요즘은 단순한 웹 페이지를 너머 웹 애플리케이션을 만든다.

유저인터페이스를 동적으로 나타내는 웹 어플리케이션이라는 것이다. 이를 위해서는 수많은 상태관리를 해주어야한다.

규모가 커지고 다양한 유저 인터페이스와 인터렉션을 제공하려면 많은 DOM요소를 직접 관리하고 코드를 정리하는 건 정말 어려운 일 일것이다. 그래서 웹 개발을 하게 될 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화하고, 오직 기능 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중 할 수 있도록 하기위해서 정말 여러 라이브러리들 혹은 프레임워크들이 만들어졌다.

대표적으로 Angular, Ember, Backbone, Vue, React 등이 있다.

 

 

⚽ 라이브러리들의 특징

Angular

- 라우터, HTTP 클라이언트 등 웹 프로젝트에서 필요한 대부분의 도구들이 프레임워크 안에 내장되어 있음

- 만들어진지 오래 됐고, 기업에서 많이 사용이 돼서 사용률이 높은 편

- 앵귤러2의 경우 주로 타입스크립트랑 함께 사용됨

React

- “컴포넌트” 라는 개념에 집중이 되어있는 라이브러리

- 데이터를 넣으면 우리가 지정한 유저 인터페이스를 조립해서 보여줌.

- 생태계가 엄청 넓고, 사용하는 곳도 많음

- HTTP 클라이언트, 라우터, 심화적 상태 관리 등의 기능들은 내장되어있지 않음

- 개발자가 원하는 스택을 맘대로 골라서 사용 할 수 있음

Vue

- 입문자가 사용하기에, 정말 쉬움

- 단순히 CDN 에 있는 파일을 로딩 하는 형태로 스크립트를 불러와서 사용하기가 편함

- HTML 을 템플릿처럼 그대로 사용 할 수도 있음

- 공식 라우터, 상태관리 라이브러리가 존재

 

 

 

🎇 리액트의 특징

Component

컴포넌트는 UI를 구성하는 개별적인 뷰 단위로서, UI를 개발을 레고라고 한다면, 컴포넌트는 블록 역할을 하게 된다.

예를 들어 여러 페이지에 버튼이 필요하면 컴포넌트로 만들어서 필요한 곳에 가져다가 쓰는 것이다.

이러한 특징은 생산성과 유지 보수를 용이하게 한다.

 

 

JSX

리액트에서는 어떻게 뷰를 그릴까?

JSX문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그린다.

HTML을 품은 JS === JSX!

자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰(UI) 작업을 편하게 할 수 있다.

const start_half = <div>
    <h1>안녕하세요!</h1>
    <p>시작이 반이다!</p>
  </div>;

 

 

Virtual DOM

 

DOM은 html 단위 하나하나를 객체로 생각하는 모델이다. 예를 들면, 'div태그'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있는데 이런 구조를 트리 구조라고 한다. DOM이 트리구조라는 것이다.

• DOM 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고, 수정할 걸 찾고, 싹 수정을 한다면? → 필요없는 연산이 너무 많이 일어난다! → 그래서 등장한 게 가상돔!
• 가상돔은 메모리 상에서 돌아가는 가짜 DOM
• 가상돔의 동작 방식: 기존 DOM과 어떤 행동 후 새로 그린 DOM(가상 돔에 올라갔다고 표현한다)을 비교해서 바뀐 부분만 갈아끼워준다. → 돔 업데이트 처리가 정말 간결해짐

 

언제 DOM을 새로그릴까?

- 페이지에 처음 진입했을때

- 데이터가 변했을 때

 

 

 

---

리액트가 이런 이유로 사용이 되고 있었군. 다 아는 내용이었지만 다시 정리하니까 또 새롭다

 

 

도움

https://velog.io/@youthfulhps/React-React%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

https://velopert.com/3612