리엑트란 무엇이며 왜 사용하는가?

 

 

What is React? 리엑트란 무엇인가?

---

• 리엑트는 facebook에서 만든 자바스크립트 UI라이브러리로써 user interfaces와 프론트엔드 어플리케이션을 만드는데 사용된다.
• 리엑트는 기술적으로는 라이브러리이지만, 이것의 행동과 능력때문에 종종 framework로도 불린다.
• 리엑트는 현재까지 업계에서 가장 인기있는 framework이다. 
• 한마디로 간단히 말하면, 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리이다.

 

 

리엑트는 왜 사용하는가?

---

우리는 html, css만으로도 웹사이트를 만들 수 있다.

그러나 여기에 유저의 행동흐름에 따라서 동적인 화면을 보여주도록 하기 위해서 javascript를 사용한다.

 

그런데 요즘의 웹은 단순히 웹 페이지가 아니라 웹 애플리케이션이다.

브라우저상으로도 정말 자연스러운 흐름으로 매우 많은 것들을 할 수가 있다.

사용자와의 상호작용, user interface를 동적으로 나타내기 위해서는 정말 수많은 상태를 관리해줘야 한다.

 

우리의 프로젝트가 사용자와의 인터랙션이 별로 없다면, 사실상 프론트엔드 라이브러는 필요하지 않다.

하지만! 프로젝트 규모가 커지고, 정말 다양한 유저 인터페이스와 인터렉션을 제공하게 된다면,

그 많은 DOM 요소들을 직접 관리하고 코드정리하는 건 정말 갈수록 힘든 일이 될 것이다.

 

물론, 제대로 된 컨벤션을 가지고 여러 규칙을 세워서 진행을 한다면 불가능한 일은 아니다.

하지만 번거로운 것은 사실이다.

 

웹 개발을 하게 될떄, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화하고,

오직 기능 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중 할 수 있도록 하기 위해서 정말 여러 라이브러리들 혹은 프레임워크들이 만들어졌다. 

 

대표적인것들이 Angular, Backbone, Vue, React 등이 있다.

 

그 중에 '컴포넌트'라는 개념에 집중이 되어있는 라이브러리가 '리엑트'이다. 

컴포넌트는 우리가 추후 더 자세히 배워보겠지만, 미리 간단히 설명하자면, 데이터를 넣으면 

우리가 지정한 유저 인터페이스를 조립해서 보여준다.

 

 

페이스북은 왜 리엑트를 만들게 되었을까?

---

페이스북이 리엑트를 만들기 전에도, 이미 수많은 프레임워크들이 존재했다.

그리고 해당 프레임워크들은 

데이터단을 담당하는 모델(Model), 

사용자의 화면에서 보여지게 되는 뷰(View), 

사용자가 발생시키는 이벤트를 처리해주는 컨트롤러(Controller)로 이루어진 MVC패턴,

그리고 MVC에서부터 파생된 MVVM, MVW 등의 패턴들로 이루어져 있다.

 

여기서 공통점은 바로 모델이다.

방금 언급했던 프레임워크들의 모델은 대부분 어떻게 작동하냐면,

양방향 바인딩을 통하여 모델에 있는 값이 변하면, 뷰에서도 이를 변화시켜준다.

 

여기서 핵심적인 부분은 '변화시켜준다'는 부분이다. 

일단 첫 화면을 보여주고, 변화에 따라 필요한 곳을 바꿔주는 것이다.

 

 

"변화(Mutation)" 라는 것은 상당히 복잡한 작업이다.

특정 이벤트가 발생했을 때, 모델에 변화를 일으키고, 변화를 일으킴에 따라 어떤 DOM을 가져와서

어떠한 방식으로 뷰를 업데이트 해줄 지 로직을 정해주어야 한다. 

페이스북에서는 리엑트를 만들기 전에 이러한 발상을 했다.

 

"그냥 Mutation을 하지 말자. 
그 대신에, 데이터가 바뀌면 그냥 뷰를 날려버리고 새로 만들어버리면 어떨까?!"

 

정말 이렇게 한다면 간단해 지지 않을까?

그런데 브라우저가 무슨 게임엔진도 아니고, 

DOM기반으로 작동하는 이 페이지는 그때 그때 새로 뷰를 만들어버리라고 하면,

성능적으로 엄청난 문제가 있을 것이다.

 

그래서 사용하는 것이 바로 Virtual DOM이다.

 

Virtual DOM은 말 그대로 가상의 돔이다.

변화가 일어나면, 실제로 브라우저의 DOM에 새로운 걸 넣는 것이 아니라, 

자바스크립트로 이뤄진 가상 DOM에 한번 렌더링을 하고, 

기존의 DOM과 비교를 한 다음에 정말 변화가 필요한 곳에만 업데이트를 해주는 것이다.

 

이 Virtual DOM 을 사용함으로서, 데이터가 바뀌었을 때 더 이상 어떻게 업데이트 할 지를 고려하는게 아니라,

그냥 일단 바뀐 데이터로 일단 그려놓고 비교를 한다음에, 바뀐 부분만 찾아서 바꿔주는 것이다.

 

아래의 영상을 참조하면 이해에 도움이 될 것이다. 

 

https://www.youtube.com/watch?v=muc2ZF0QIO4

 

 

 

 

리엑트를 사용하게 됨으로써 앞으로 겪에 될 일들

---

리엑트는 정말 자유도가 높은 라이브러리이다.

예를들어, 라우터, 혹은 상태관리 같은 기능들이 리엑트 자체에 내장되어있지도 않거니와 공식적인 라이브러리도 없다.

 

하지만 써드파티 라이브러리가 존재한다.

 

라우터 쪽을 보자면, React-router, 그리고 Next.js, After.js 같은 라이브러리들이 있다.

상태관리 라이브러리만해도, Redux, MobX 같은 라이브러리들이 있다.

 

그리고 리엑트 컴포넌트 스타일링 할 떄도 한가지 정해진 방식이 있는게 아니라, 수많은 방식으로 할 수 있다.

 

이에 따른 장점은 우리가 맘에 드는 것을 사용하거나 직접 만들어서 사용할 수 있따는 것이고, 

단점은 여러가지 시도해 볼 필요가 있다는 것이다.

 

리엑트는 라이브러리 뷰 쪽만 관리하게하고, 나머지 기능은 써드 파티 라이브러리가 담당하게 함으로써,

리엑트는 리엑트라이브러리 로써 성숙해질 수 있다.

 

 

 

 

 

참조: 생활코딩,

https://velopert.com/3612