[React] 웹 개발에서 리엑트를 사용하는 이유

개발 면접을 보면 높은 확률로 프레임워크에 대한 질문이 나온다. 

 

대부분 왜 사용하나요? 가 주를 이루는데, 필자의 지극히 개인적인 생각으론 굉장히 현실과 동떨어진 면접 질문이라고 생각한다.

 

대충 다른 프레임워크와의 차이점과 비교 분석 등을 이야기하면 간단하게 넘길 수 있는 질문이지만,

과연 초보 개발자중에 각종 프레임워크 튜토리얼을 진행하고 비교 분석 후 '아! 나는 이러한 이유로 이 프레임워크를 써야겠어!'라고 생각하는 개발자가 몇이나 있을까. 

 

결국 면접자에게 거짓말을 강요하는 셈이다. 

필자도 거짓말을 했던 사람 중에 한 명이었고 이런 질문을 받을 때마다 거짓말을 해야 한다는 점이 썩 기분이 좋지는 않았다. 

 

그러다 현업에서 프론트엔드 개발자로 업무를 하게 되면서, 코드에 대한 이해도가 아~~주 약간 쬐끔 높아지고 코드에 대한 고민이 깊어짐에 따라 자연스럽게 '왜 페이스북은 리엑트를 만들었고 왜 이것을 어떻게 사용하면 제작자의 의도대로 최대한 활용할 수 있을까?'에 대한 질문이 저절로 떠오르게 되었다. 

 

사실 위 질문에 대한 정확한 답변은 리엑트 공식문서 블로그에 제작자가 남겨놓은 글이 있다. 관련해서는 이후에 다뤄보기로 하고 오늘 포스팅은 해외에 좋은 글을 번역해 옮겨보려고 한다. 

Why You Should Use React.js For Web Development

만약 리엑트가 처음이라면, 왜 이렇게 리엑트의 인기가 높은지 그리고 왜 당신의 애플리케이션에 리엑트를 사용해야 하는지에 대해 궁금할 것이다. 만약 그렇다면 이 블로그에 잘 찾아온 것이다. 

 

무엇이 리엑트를 이토록 훌륭하게 만드는 것인지 그리고 왜 당신의 프로젝트에 리엑트를 사용해야 하는지 한번 알아보자.

 

A Bried History of React.js

2011년 페이스북은 내부적 이용을 목적으로 리엑트를 만들었다. 알다시피 페이스북은 오늘날 세계에서 가장 큰 소셜 네트워킹 웹사이트다. 

 

2012년 페이스북의 자회사 인스타그램에서도 리엑트를 사용하기 시작했다. 

 

2013년 페이스북은 리엑트를 오픈소스로 공개했다. 초기에는 개발자 커뮤니티에서 마크업과 자바스크립트가 한 파일에 있다는 이유로 사용을 거부했었다. 하지만 많은 사람들이 리엑트를 사용해보곤 관심사의 분리를 위해 컴포넌트 기반의 접근 방식을 받아들이게 되었다. 

 

2014년 많은 대규모 회사에서 리엑트를 사용하게 되었다. 

 

2015년 페이스북은 리엑트 네이티브도 오픈소스로 공개했다. 이는 리엑트를 이용해 안드로이드나 iOS 어플을 제작할 수 있도록 하는 라이브러리다.

 

2016년 15버전과 함께 리엑트는 시멘틱 버저닝을 사용하게 된다. 이는 개발자 커뮤니티에 리엑트가 더욱 안정적임을 알리는데 도움이 되었다. 

 

오늘날, 리엑트는 포춘 500의 많은 기업에서 사용되고 있다. 페이스북은 풀타임 리엑트 개발 스태프가 있다. 이들은 정기적으로 버그를 수정하고 기능을 향상하고 블로그 포스팅과 다큐먼트를 작성한다. 

 

Why Should You Use React?

왜 리엑트를 사용해야 하는지 궁금할 것이다. 자바스크립트 사용은 꾸준히 증가해왔고 시장에는 앵귤러와 뷰가 있는데 왜 리엑트인가?

 

리엑트를 사용하는 여섯 가지 이유에 대해 알아보자.

 

React is Flexible

리엑트는 놀라울 정도로 유연하다. 일단 배우고 나면, 다양한 플랫폼에서 높은 품질의 UI를 만들 수 있다. 리엑트는 프레임워크가 아닌 라이브러리다. 라이브러리이기 때문에 이토록 놀라운 툴로 발전할 수 있었다. 

 

리엑트는 단 하나의 목적을 위해 만들어 졌다: 웹 어플리케이션의 컴포넌트 제작. 리엑트 컴포넌트는 버튼, 텍스트, 라벨, 혹은 그리드와 같이 당신의 웹 애플리케이션에서 모든 것이 될 수 있다. 

 

하지만 리엑트의 인기가 커지면서, 생태게 또한 다양한 케이스를 커버하게끔 커졌다. 

 

Gatsby라는 도구를 이용해 정적인 리엑트 웹사이트를 만들 수 있다. 리엑트 네이티브로 모바일 어플을 만들 수도 있다. Electron을 이용하면 맥과 윈도우에서 동작하는 데스크탑용 어플을 만들 수도 있다. 

 

리엑트는 또한 Next.js를 이용해 서버 렌더링도 지원한다. 또한 리엑트 VR을 이용해 가상 환경 웹사이트를 만들고 360도 경험을 제공할 수 있다. 

"Learn React Once and Write Everywhere" - Reactjs.org

기존의 어플에 리엑트를 사용할 수도 있다. 리엑트는 이 점을 염두해 두고 설계되었다. 기존의 어플리케이션의 작은 부분을 리엑트를 이용해서 바꿀 수 있다. 만약 거기에 문제가 발생하지 않는다면 전체 애플리케이션을 리엑트로 바꿔나갈 수 있다. 페이스북이 이와 같은 방식을 이용했다. 

"The main advantage of using a Library over a Framework is that Libraries are lightweight, and there is a freedom to choose different tools. The Framework consists of an entire ecosystem to build an applicaiton, and you don't have an easy way to use any other tools outside the Framework."

 

React Has a Great Developer Experience

만약 리엑트로 코딩을 시작한다면 당신의 팀은 사랑에 빠질것입니다. 빠른 개발 속도와 리엑트의 작은 API 혼합은 환상적인 개발 경험을 할 수 있도록 한다. 

 

리엑트의 API는 배우기 매우 쉽다. 배워야 할 부분이 매우 적다. 여기 리엑트 컴포넌트의 예제가 있다:

 

개발자는 그냥 리엑트 라이브러리를 임포트하면 된다. Message는 props를 받아 JSK를 반환하는 컴포넌트이다. 

 

JSX는 HTML과 같이 보이는 특별한 문법인데 리엑트 API를 호출해 결과적으로 HTML을 렌더링 한다. 

 

앵귤러나 뷰와 같은 전통적인 프레임워크들은 HTML로 동작한다. 전통적인 프레임워크는 자바스크립트를 HTML내에서 사용한다. HTML 특성으로 다른 기능을 수행할 수 있는 특성을 만들어낸다. 

 

이러한 접근방식의 주된 문제점은 새로운 HTML 특성들을 배우거나 항상 공식문서를 참고해야 한다는 점이다. 

 

아래는 앵귤러의 루핑 예문이다. *ngFor 특성을 살펴보라:

아래는 뷰에서의 루핑 예문이다. v-for 특성을 살펴보라:

리엑트는 정반대의 접근법을 이용한다. 리엑트는 HTML을 자바스크립트 안에서 사용한다. 필자는 이런 접근법을 선호하는데 왜냐하면 이런 방식으로 순수한 자바스크립트와 HTML을 이용할 수 있게 된다. 

 

아래는 리엑트의 루핑 예문이다. 

리엑트 컴포넌트 NumberList는 순수한 자바스크립트 코드를 사용한다(map 함수). 또한 JSX에는 다른 어떠한 특성 없이 잘 알려진 간단한 HTML 태그를 사용한다. 렌더 함수는 단순히 NumberList 컴포넌트를 HTML 파일의 루트 엘리먼트에 렌더링 할 뿐이다. 

 

순수한 자바스크립트와 HTML을 이용한 플랫폼과 그럼에도 상호작용이 가능한 UI 이외에 개발자가 또 필요로 할게 무엇이 있겠는가?

 

Note: 여기서 순수 자바스크립트란 바닐라 자바스크립트를 의미하는 것이 아니다. 리엑트는 자바스크립트 라이브러리고 자바스크립트 상에서 동작한다. 하지만 앞서 말했듯이 리엑트 API는 매우 간단하며 배우기 쉽다. 앵귤러와 뷰는 각자의 규칙을 강요한다. 리엑트는 좀 더 개념적이다. 단순히 어떻게 리엑트의 방식대로 바닐라 자바스크립트를 더 잘 이용할 수 있는지 보여줄 뿐이다.

 

리엑트는 또한 create-react-app package를 제공함으로써, 개발을 즉시 시작할 수 있도록 도와준다. 

 

React Has Facebook's Support/Resources

리엑트는 페이스북 앱, 웹사이트, 그리고 인스타그램에서 중요하게 사용된다. 페이스북이 리엑트 개발에 깊숙히 관여한는 이유다. 페이스북은 5만개 이상의 리엑트 컴포넌트를 제품에 사용하고 있다. 리엑트 상위 4명의 기여자는 모두 페이스북 직원들이다. 

 

그리고 리엑트 팀은 블로그를 운영하고 있다. 각 배포마다 자세한 설명을 블로그를 통해 공유한다. 

 

리엑트 개발에 페이스북의 깊은 관여 덕분에 리엑트에 급격한 변경이 발생한다면 페이스북은 변경을 자동화하는 Codemod를 제공한다. 

 

Codemod는 코드베이스의 변화를 자동화하는 명령어 도구이다. 새로운 사양이 리엑트에 추가되면 Codemod는 자동적으로 오래된 컴포넌트를 새로운 사양으로 교체한다. 

 

React Has Broader Community Support, Too

2015년 이후 리엑트의 인기가 높아졌고 엄청난 규모의 커뮤니티를 형성하게 되었다. 깃헙 리포지토리에는 16만 4천개의 별이 붙었다. 깃헙에서 탑 5의 리포지토리가 되었다. 

리엑트의 NPM 패키지는 1주일에 수백만회의 다운로드가 이루어지고 있다. 

Stackshare에 따르면 9천 개가 넘는 회사에서 리엑트를 사용하고 있다. 포춘 500 기업들도 확인 할 수 있다. 

Reactiflux는 리엑트 개발자들을 위해 만들어진 특별한 커뮤니티다. 11만 명이 넘는 커뮤니티 멤버들이 리엑트와 관련된 문제를 푸는데 협력하고 있다. 

 

소프트웨어 개발자들 사이에서 가장 인기가 많은 웹사이트는 스택오버플로우다. 해당 웹사이트에선 25만 개가 넘는 리엑트 관련 질문들이 있다. 

어떤 경우에는 컴포넌트를 따로 생성하지 않아도 된다. 수많은 무료의 완성된 컴포넌트 라이브러리들이 온라인상에 있다. 

 

몇 가지 예로:

• 마이크로소프트는 Fluent UI 컴포넌트 라이브러리를 만들어 UI 개발에 사용할 수 있다. (오피스를 닮았다)
• Material-UI는 구글의 Material UI 가이드라인을 도입한 리엑트 컴포넌트를 제공한다.
• React-Bootstrap은 부트스트랩을 이용한 리엑트 컴포넌트를 제공한다. 
• 또한 Awesome React Components 리스트를 깃헙에서 확인하면 더 많은 리엑트 컴포넌트를 확인할 수 있다. 

이러한 라이브러리와 툴은 중요하다. 왜냐하면 리엑트를 통해 무언가를 만들려고 한다면 많은 부분을 웹상에서 검색하고 방법을 찾아야 하기 때문이다. 

React Has Great Performance

리엑트 팀은 자바스크립트는 빠르지만 DOM을 업데이트하는 것은 느리다는 걸 깨달았다. 따라서 리엑트는 DOM 변경을 최소화한다. 그리고 가장 효율적이고 스마트하게 DOM을 업데이트 하는 방법을 구상했다. 

 

리엑트 이전에, 대부분의 프레임워크와 라이브러리는 새로운 상태변화를 반영하기 위한 DOM 업데이트를 스마트하게 다루지 못했다. 그 결과 상태변화가 페이지의 엄청나게 많은 부분을 변경하게 되었다. 

 

리엑트는 각 컴포넌트의 상태값을 가상 DOM을 통해 관찰한다. 컴포넌트의 상태가 변경되면, 리엑트는 실제 DOM을 새로 어떻게 변경되어야 하는지 비교한다. 그리고 가장 효율적으로 DOM을 변경할 방법을 찾는다. 

 

이는 쉽지 않은 작업처럼 보이는데 리엑트는 이면에서 이 작업을 잘 처리해 준다. 이 방법은 레이아웃 트래싱과 같이 DOM 엘리먼트가 변경되었을 때 모든 컴포넌트의 위치를 다시 계산하는 작업을 방지하는 등 여러 면에서 유용하다.

 

또한 대부분의 애플리케이션이 모바일 기기에서 동작함으로 매우 효율적으로 작동하는 것은 중요하다. 배터리를 아끼거나 CPU 파워를 고려하는 것이 중요하다. 

 

리엑트의 간단한 프로그래밍 모델은 데이터가 업데이트되면 상태를 자동적으로 변경해준다. 이 작업은 메모리상에서 이루어지기 때문에 빠르다. 

 

리엑트의 라이브러리 크기는 또한 작다. 6kb 미만이다(압축되었을 때는 3kb 미만이다.) 다른 경쟁 라이브러리에 비해 매우 작다.

React is Easy to Test

리엑트의 디자인은 테스팅에 매우 친화적이다. 

• 전통적인 UI 브라우저 테스팅은 셋업이 까다롭다. 반면에 리엑트에서는 테스팅을 위할 설정이 필요없거나 거의 필요없다. 
• 전통적인 UI 브라우저는 테스팅을 위해 브라우저가 필요하지만 리엑트 컴포넌트는 노드 커맨드 라인으로 빠르고 쉽게 테스트할 수 있다. 
• 전통적인 UI 브라우저 테스팅은 느리다. 하지만 커맨드 라인 테스팅은 빠르고 한 번에 엄청난 양의 테스트를 진행할 수 있다. 
• 전통적인 UI 브라우저 테스팅은 시간 소요가 많고 유지하기 어렵다. 리엑트 테스트는 Jest & Enzyme을 이용해 빠르게 작성할 수 있다.

웹상에는 리엑트를 테스트하는 데 사용할 수 있는 자바스크립트 테스팅 프레임워크가 많이 있다(자바스크립트 라이브러리이기 때문에). 몇몇 인기 있는 프레임워크로는 Mocha, Jasmine, Tape, QUnit, 그리고 AVA가 있다. 

 

 

 

 

 

출처: https://www.freecodecamp.org/news/why-use-react-for-web-development/

Why You Should Use React.js For Web Development