[Web] 프론트엔드 React 개념

프론트엔드 React 라이브러리

 

🟦 React 개념

웹사이트를 만들기 위해서는 사실 프론트엔드 라이브러리의 도움 없이도 만들어낼 수 있습니다.

 

단순히 정적 페이지를 만드는거라면 자바스크립트 없이도, 그냥 HTML과 CSS를 사용해서 만들면 됩니다. 거기에 자바스크립트를 더해주면, 유저의 행동 흐름에 따라서 동적으로 화면을 보여줄 수 있습니다.

 

하지만, 요즘의 웹은 단순히 웹 페이지가 아니라 웹 애플리케이션입니다. 브라우저 상으로도 정말 자연스러운 흐름으로 매우 많은것들을 할 수가 있죠. 

 

sample.html

  <div>
    <h1>Counter</h1>
    <h2 id="number">0</h2>
    <button id="increase">+</button>
  </div>

 

위의 Html 코드에서 버튼을 눌러서 숫자 값("0")을 변경하려면 각 DOM(Document Object Model(문서 객체 모델) sample.html) 앨리먼트에 대한 레퍼런스를 찾아야 되고, 해당 DOM에 접근하여 작업 진행해야 합니다.

 

var number = 0;
var elNumber = document.getElementById('number'); // DOM 앨리먼트 레퍼런스
var btnIncrease = document.getElementById('increase'); // DOM 앨리먼트 레퍼런스

btnIncrease.onclick = function() {
  number++;
  elNumber.innerText = number;
}

※ JQuery를 사용한다면, document.getElementById 대신에 $('#number')로 DOM을 불러오면 됩니다.

 

 

웹 개발을 하게 될 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화하고, 오직 기능 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중할 수 있도록 하기 위해서 정말 여러 라이브러리들 혹은 프레임워크들이 만들어졌습니다.

 

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

 

여기서 React만 알아보도록 하겠습니다.

 

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

데이터를 넣으면 우리가 지정한 유저 인터페이스를 조립해서 보여줍니다. 페이스북 개발자들이 라이브러리의 성능과 개발자 경험을 개선하기 위해 많은 연구를 합니다.

---

여기서 페이스북 개발자는 왜 React를 만들었을까요?

기존의 프레임워크들의 모델들은 양방향 바인딩을 통하여 모델에 있는 값이 변하면, 뷰에서도 이를 변화시켜줍니다. 여기서 핵심적인 부분은 변화시켜준다는 부분입니다.

 

Mutation(변화)는 복잡한 작업으로 특정 이벤트가 발생했을때, 모델에 변화를 일으키고, 변화를 일으킴에 따라 어떤 DOM 을 가져와서 어떠한 방식으로 뷰를 업데이트 해줄 지 로직을 정해줘야 합니다.

 

이때 페이스북 개발자들은 Mutation을 하지 않고 데이터가 바뀌면 뷰를 날려버리고 새로 만들기로 합니다.

 

그래서 사용하는 Virtual DOM 은 가상의 DOM 입니다. 변화가 일어나면, 실제로 브라우저의 DOM 에 새로운걸 넣는것이 아니라, 자바스크립트로 이뤄진 가상 DOM 에 한번 렌더링을 하고, 기존의 DOM 과 비교를 한 다음에 정말 변화가 필요한 곳에만 업데이트를 해줍니다.

 

이 Virtual DOM 을 사용함으로서, 데이터가 바뀌었을 때 더 이상 어떻게 업데이트 할 지를 고려하는게 아니라, 그냥 일단 바뀐 데이터로 일단 그려놓고 비교를 한다음에, 바뀐 부분만 찾아서 변경을 합니다.

 

※ Virtual DOM 은 DOM 변화를 최소화 시켜주는 역할을 합니다. 이 횟수를 최소화 시키는것은 성능적으로 매우 중요한 이슈입니다.

---

🟩 React 특징

1. 엄청난 생태계

리액트 라이브러리도 정말 많이 만들어집니다. jQuery, 혹은 일반 자바스크립트로 만들어진 라이브러리들도 React로 포팅되어 작성되고 있습니다. 뿐만 아니라, 그냥 단순히 특정 기능을 구현하기 위한 라이브러리 (예: 폼, 캐로절, 애니메이션, UI)가 아니라, 프로젝트의 구조와 강하게 묶여있는 라우터, 상태 관리 라이브러리들도 매우 다양합니다.

 

2. 사용하는 곳이 많다.

Airbnb, BBC, Cloudflare, Codecademy, Coursera, Dailymotion, eBay, Twitch, Walmart, Yahoo등 많은 곳에서 사용되고 있습니다. 하지만, 리액트의 사용률이 가장 높다고는 할 수 없습니다. 왜냐하면, 기존에 만들어진 프로젝트들중에서 이미 jQuery, Angular, Ember 등으로 만들어진 프로젝트들이 꽤 있기 때문입니다. 하지만, 새로 만들어지는 프로젝트, 혹은 리뉴얼되는 프로젝트에서 정말 많이 사용됩니다.

 

3. 한번 사용해보면, 좋아하게 된다!!!

리액트를  한번 사용해본 사람들 대부분은 리액트를 다시 사용 할 의향이 있다고 합니다.

생태계가 엄청 넓고, 사용하는 곳도 많습니다. HTTP 클라이언트, 라우터, 심화적 상태 관리 등의 기능들은 내장되어있지 않습니다. 따로 공식 라이브러리가 있는 것도 아니어서, 개발자가 원하는 스택을 맘대로 골라서 사용할 수 있습니다.

 

---

 

참고 글: 누구든지 하는 리액트 1편: 리액트는 무엇인가

https://velopert.com/3612