어째서 React는 이렇게 많은 인기를 얻고 있는 것일까?

James Dean
A little code never killed nobody
6 min readJun 30, 2018

원본 : Why ReactJS is gaining so much popularity these days

저자 : Thinkwik

React는 높은 수준의 웹 에플리케이션을 최소한의 코드로 빠르고 효율적이게 만드는데 이용하는 Javascript 라이브러리다.

많은 사람들의 React야 말로 웹 개발의 미래다 라고 까지 언급하고 있는 추세다.
이러한 큰 인기의 원인 중 하나를 꼽는 다면 아마 Facebook, Paypal, Uber, Instagam과 같이 거대 기업들이 인터페이스 관련 문제들을 해결하기 위해 React를 채택하였기 때문일 것이다.
이러한 유명세가 많은 사람들을 React로 이끄는데 한목 하였다.

하지만 어째서 모두들 React에 대해 이야기 하고 사용하고 있는 것일까?

React는 무엇이 특별한가?

React의 그 강력함은 각각의 컴포넌트에 무게를 실은 React의 언어적 특성에서 온다.
웹 전체를 두고 작업하는 대신 React는 개발자로 하여금 복잡한 UI를 작은 컴포넌트로 쪼개어 작업 할 수 있게 도와준다.

물론 Angular와 같은 다른 기술도 있지만, 이들은 주로 많은 량의 코딩을 해야 하는 경향이 있다.
그리고 다른 프레임워크를 쓰는 개발자들은 작업을 할 때마다 코드를 새로 작성해야 하는 번거로움이 있다.

언어의 난이도

React는 View layer만을 담당하는 간단하고 가벼운 라이브러리다
Angular나 Ember와 같이 무거운 프레임워크가 아니다.
어느 Javascript 개발자라도 그 기초만 잘 익힌다면 바로 웹 개발에 들어 설 수 있을 만큼 간단하다.
React 가이드에서도 언급 되었듯이 React가 추구하는 방식은 기존의 웹 개발 방식과는 다를지 모르지만
일단 이러한 방식이 익숙해 지고 나면 이 방법 또한 쉽고 자연스러워 질 것이다.

재사용 가능한 컴포넌트

개발자들이 원했던건 복잡한 내용을 별개의 섹션으로 나누어 다시끔 그 코드를 재 사용하여 프로젝트를 완료 할 수 있는 프레임워크였다.

그리고 ReactJS가 개발자들이 찾고 있던 해답을 준 것이다.
오느날 React는 그 단순함과 유연성 덕분에 크게 성공을 거둔 라이브러리가 되었다.

React는 개발자로 하여금 Javascript 내에서 에플리케이션을 만들 수 있게 해준다.
JSX는 React를 쉽게 만들어 줄 뿐만 아니라 재미있게도 만들어 주는 역할을 하는 중요한 React의 특성 중 하나다. 그 특징중 하나가 HTML를 그대로 Javascript 안으로 가지고 들어오는 것이다.

개발자는 컴포넌트를 통해 복잡한 UI를 작은 단위로 쪼개어 나눌 수 있다.
컴포넌트라는 관념 자체가 React를 특별하게 만드는 것이다.
웹 전체를 보기 보단 복합한 UI를 작은 컴포넌트들로 쪼갠다. 그리고 이 작업은 각각의 컴포넌트를 보다 직관적으로 만드는데 필수적인 요소이기도 하다.

Virtual DOM을 통한 빠른 렌더링

또한 React는 Virtual DOM을 통해 에플리케이션을 빠르게 만든다.
React가 처음 고안 되었을 때, 개발자들이 기존 HTML 전부를 업데이트 하는 방식은 좋지 못한 방식이라 생각한 건 올바른 예측이였다.
React는 Virtual DOM을 통해 데이터가 변했을 때 그것을 감지 해낼 수 있으므로 이를 통해 React에게 언제 다시 렌더링을 하고 언제 DOM의 세부 사항들을 무시해도 좋은지 알려주는 것이다.
그리고 그렇게 곧 바로 변화에 반응을 해야하는 UI야 말로 유저 인터페이스를 보강하기 위해 필요한 주요 사항이다.

React Native

React를 공부하면 React Native는 덤으로 따라온다.
React는 한번 만들어서 어디에서든 작동 시킬 수 있다는 말보다 한번 배우면 무엇이든 만들 수 있다는 표현이 더 맞아 떨어질 것 같다.
그렇다, Android, IOS app 모두 React Native를 이용하여 만들 수 있다.
Web에서 사용한 코드를 그대로 사용할 순 없지만 그 방법론과 구조 자체는 같은 것이다.

ReactJS는 훌륭한 프레임워크지만 다른 훌륭한 프레임워크 또한 존재한다.
이들 프레임워크를 두고 잠시 비교해보는 시간을 가져보도록 하자.

런타임 퍼포먼스 : ReactJS와 VueJS 모두 스피드 면에선 뛰어나다. React에서는 컴포넌트가 바뀔 때 마다 전체 컴포넌트 sub-tree 전체가 다시 렌더링 되고
Re-rendering을 원하지 않는다면 PureComponents 사용을 고려해 보시라.
Vue에선 컴포넌트가 렌더링 될 때 자동적으로 추적, 관리된다. 이 말은 State에 변화가 생겼을 때 re-rendering을 필요로 하는 컴포넌트가 뭔지 시스템이 알고 있다는 뜻이다.

HTML와 CSS의 적용 : ReactJs에서 모든것은 순수히 Javascript라 보면된다.
HTML가 모두 JSX를 통해 표현되고 최근에는 CSS역시 JS안에서 관리하는게 추세인듯 하다.
하지만 VueJs는 기존의 웹 개발 방식을 가지고 그것을 기반으로 발전시켜 나간다.

언어의 난이도 : 초급 개발자가 React를 통해 시작 한다면 언어의 난이도는 Angular에 비해서 낮다고 느껴질 것이다.
React의 경우 개발자가 익숙해져야 하는건 JS와 HTML뿐이니까.
하지만 Angular는 그 외에 배워야 하는 것들이 꽤 많아 공부해야 하는 기간이 React에 비해 상당히 길어진다.
그렇기에 경험이 부족한 개발자들은 React에 비해 Angular를 어렵게 느낄 것이다.

비교에서 봤듯이 React가 복잡한 UI를 쪼개어 나누어 개발자로 하여금 각가의 컴포넌트에 집중하게 할 수 있다는 점에서 보다 강력한 프레임워크로 보인다.
그러나 그 경쟁자 Vue.js가 그 뒤를 바짝 쫓아오고 있다.
React가 선두를 유지 할 수 있느냐는 정규 업데이트와 같이 스스로를 어떻게 개선 시켜 나가느냐에 달려있다.

--

--