React에 대해서 알아보도록 합시다.(feat. JQuery)

같이보면 좋은 글

• 2020/03/03 - [프로그래밍 언어/Javascript] - 돔(DOM)과 가상돔(Virtual DOM)에 대해서 알아봅시다.

---

요즘 프론트엔드 라이브러리 생태계는 무수한 변화가 이뤄지고 있습니다. 저 또한 프론트엔드에 종사하고 있는 이 시점에서 React를 처음 하고 Class Component 및 Functional Component란 생소한 개념을 이해하며, 많은 난관을 겪었지만, React에 매력에 빠져 현재는 다양한 프로젝트에 React를 적용하고 있습니다. 그렇다면 많은 프론트 엔드 개발자들이 자주 사용하고 있는 React란 무엇일까요? 한번 알아보도록 합시다.

---

React 이전에 Front End 생태계

처음 프론트엔드의 생태계는 모든 것이 JQuery 라이브러리로 이루어져 있습니다. 처음 JQuery가 나오고 10년 동안 독점을 하고 있었으니 말 다했죠. 심지어 이 정도면 거의 프론트엔드는 JQuery로 시작해서 JQuery로 끝난다는 이야기가 있었고, 학원가에선 Javascript를 가르치지 않고 JQuery만 가르쳐서 몇몇 프론트엔드 개발자는 Javascript는 모르지만, JQuery는 알고 있는 특이한 현상이 발생하는 경우도 왕왕 있었습니다.
 
이 JQuery 라이브러리는 처음에는 정말 대단했습니다. 원래는 길었던 javascript 코드를 짧은 Jquery 코드로 구현이 가능할 정도로 쉬운 사용성을 자랑했고, 그 덕분에 많은 프론트엔드 개발자들이 JQuery를 사용하면서 만들어진 거대한 커뮤니티로 인해 많은 초보 프론트엔드 개발자들이 유입되기 쉬운 개발환경을 구축하였습니다
 
하지만 JQuery가 완벽한 슈퍼맨은 아니었습니다. JQuery는 실제 DOM을 조작하기 때문에 많은 속도 이슈 및 성능 이슈가 발생하였고, 개발자마다 다른 구조화된 코드 방식을 가지고 있어서 인수·인계받는 개발자로선 코드를 이해하는 데 시간이 걸리는 문제점이 존재하였습니다. 그래서 구조화된 프레임을 제시하기 위해 Single Page App(SPA)이라는 개념이 나타났으며 이 개념을 도입한 Backbone JS와 Angular JS가 탄생했고 지금에 React까지 오게 되었습니다.

---

 

React JS란?

일단 React는 Facebook에서 만든 프론트엔드 라이브러리입니다. 싱글 페이지 앱(Single Page App)을 차용하고 있으며, JSX라는 문법을 사용하여 Javascript에서도 HTML을 인식할 수 있고, Component 기반으로 돼 있어 초기 개발 공수에 시간을 들이면 나중엔 그냥 레고처럼 가져다 쓸 수 있어서 구조화가 쉽다는 장점이 있습니다.

하지만 이것만으로는 사람들이 JQuery를 버리고 굳이 React로 넘어올 이유가 없습니다. 그러므로 React는 사람들을 끌어모을 하나의 개념을 가져옵니다. 그것이 바로 Virtual Dom입니다. 

(만약, Virtual Dom 또는 Dom에 대해서 이해가 가지 않는다면 아래 포스트를 먼저 보신 후 이어서 보길 추천해 드립니다.)

 

돔(DOM)과 가상돔(Virtual DOM)에 대해서 알아봅시다.

또한, 뛰어난 상태관리 덕분에 데이터가 변경됨에 따라 동적으로 UI를 변경할 수 있으며, Virtual DOM 덕분에 빠른 속도로 UI를 다시 그릴 수 있습니다.

이러한 장점 덕분에 현재 React는 프론트엔드 라이브러리 생태계에 큰 별이며, Vue js 및 Angular js와 어깨를 나란히 할 수 있게 되었습니다. 하지만 React에 장점만 있는 것은 아닙니다. React만으로 웹을 개발했을 경우 해당 웹은 IE8 이하에선 지원하지 않으며, React에 단방향 구조 덕분에 Drilling 현상이 발생하는 경우가 허다하여, 데이터 구조가 복잡해질 수 있습니다. 또한, React는 Learning Curve가 높아, 숙달되려면 꽤 시간이 걸리며, 익숙해지는데도 시간이 걸립니다. 하지만 그런데도 사람들이 React를 쓰는 이유는 많은 기능적 문제 중 큼지막한 것들은 다 라이브러리들이 해결해주며, 거대한 커뮤니티 덕에 지속해서 발전하고 있기 때문입니다.

---

즉 장단점을 정리해 보면 아래와 같습니다.

 

React의 장점

• JQuery의 실제 DOM 조작으로 인한 성능적 이슈를 해결하기 위해 React는 Virtual DOM 개념을 채택하여 문제를 해결했다.

• Component 구조 덕분에 초기 설계에 신경만 잘 쓰면 쉽게 UI를 개발할 수 있다.

• React-Router라는 라이브러리 덕분에 쉽게 Single Page App를 개발할 수 있다.

• Props And State라는 React의 상태관리 기법 덕분에 동적으로 UI 변경이 가능하다.

• React의 거대한 커뮤니티 덕분에 React의 기능적 문제들을 라이브러리를 통해 해결할 수 있다.

React의 단점

• React는 IE8 이하는 지원하지 않는다. (하지만 Babel을 이용하면 해결할 수 있다)

• React의 단방향 구조 때문에 Drilling 현상이 발생할 수 있다. (Redux 또는 Context API를 이용하면 어느 정도 해결이 가능하다)

• Learning Curve가 높아 배우는 데 시간이 걸린다.

---

마치며

오늘은 React에 대해서 알아보았습니다. 현재 많은 프론트엔드 개발자들이 React 또는 Vue를 선호합니다. 이러한 프론트엔드 생태계 덕분에 현재 React는 지속해서 업데이트되고 있고 많은 라이브러리가 생겨나고 있습니다. 만약 이 글을 보는 여러분들 중 아직도 JQuery로 개발하고 계신다면 한 번쯤 차세대 프론트엔드 라이브러리를 접해보는 것은 어떨까요? 그럼 다음에도 더 좋은 글로 찾아뵙도록 하겠습니다.