React - 왜 React 입니까?

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 10개월에 걸친 학원 수강 이후에, 제가 가지고 있는 두가지 궁금증을 풀어보고, 이를 풀어보면서, JavaScript 의 기초, 그리고 대중적으로 가장 널리 사용되는 라이브러리(라고 저는 확신합니다) 중 하나인 React 에 대해서 풀어보려고 합니다.

 

몇가지 개인적인 사견이 강하게 들어가 있을 수 있으므로, 생각이 다른 경우에 댓글로 알려주시면

다시한번 고찰을 가질 수 있을거 같아서 많은 의견 주시면 감사하겠습니다.

 

시작해보도록 하겠습니다.

 

1. Why React ?

 

React는 Facebook 으로 잘 알려진 Meta 에서 주도하는 오픈소스 입니다.

단, 공식 홈 페이지에서 React 를 소개하는 요약글은

" 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리(The library for web and native user interfaces) " 

라고 표기하고 있습니다.

 

 그렇다면 공식홈페이지 대로 React 는 라이브러리 일까요?

이 대답은 Yes No 모두 틀리지 않았다고 생각합니다. 즉, 프레임워크라고 불리기도 하고, 라이브러리라고 불리기도 합니다.

 

먼저 React 의 슬로건을 살펴보면 한가지 연상되는 것이 있습니다.

React 의 슬로건은 아래와 같습니다.

 

Learn Once, Write anywhere

즉, React 는, 한번 배우면, 모든 곳에서 사용할 수 있습니다. 라는 슬로건을 가지고 있습니다.

React 는 전통적인 웹에서 사용되는 Frontend 에서 사용됩니다.

하지만 여기서 파생된 Reacat Native 라고 하는 , React 에서 하나의 파생된 기술인 이 ReactNative 를 이용하면, 가장 뜨겁고 대중화된 시장이기도 한 Mobil Application (iOS, Android) 와 같은 모바일 Application 을 개발할 수도 있습니다.

 

즉, React 하나만으로는 하나의 라이브러리라고 구성할 수 있습니다.

하지만 이후에 다루게 될 React 에서 같이 사용하는 CRA(CreateReactApp) 에 포함되는 여러가지 구성사항으로 포함되는 것들을 종합하면 프레임워크로도 볼 수 있다고 생각합니다.

 

CRA 를 구성하는 요소는 아래와 같이 이루어지기 때문입니다.

 

• 프로젝트 설정, 빌드 도구 설정( WebPack, Babel)
• 테스트 환경 설정 (Jest)

 

이러한 요소들을 종합하여 개발자가 손쉽게 개발에 집중할 수 있도록 돕는 이러한 CRA 는 Boilerplate(보일러플레이트) 혹은 Starter-kit(스타터 킷) 으로 묘사하기도 합니다.

프레임워크, 라이브러리의 핵심적 요소는 바로, "제어 흐름" Control Flow 에 대한 소유권이 누구에게 있는지라고들 이론적으로 정의를 합니다.

 

하지만 React 는 기본적으로 React 자체만으로는 라이브러리 이지만 React 와 같이 사용하는 다양한 라이브러리와 더블어, 이후에 제가 개인적으로 다루게 될 프레임워크와 조합하면 React 는 프레임워크로서의 모습이 더 강하게 보일수 있기 때문입니다.

 

• React 의 Component 구조
  • React 는 잘 아시다시피, 컴포넌트 기반의 설계를 바탕으로 합니다. 즉 요소요소를 하나의 Component 로 만듬으로써, 각각의 Component 는 모듈화(Module) 가 이루어지게 됩니다.
  • 이러한 모듈화는 재사용이 가능하고, 다양하게 조합하여 사용할 수 있습니다.
• React 생태계의 라이브러리
  • React 와 함께 사용되는 다양한 Library 는 이를 프레임워크처럼 보이도록 구성할 수 있습니다. 예를 들어, React-router-dom, Redux, Recoil, React-Query  와 같이 다양한 라이브러리와 함께 사용하면, Application 의 상태 관리, 라우팅, Data Fetching 을 처리하는 구조를 갖게 되며, 이는 라이브러리보다는 프레임워크에 가깝게 동작하는 구조를 띄게 됩니다.
• React 생태계 위에서 동작하는 프레임워크
  • React 생태계 위에서 동작하는 프레임워크중에는 유명한 프레임워크들이 다수 존재합니다. 대표적으로 Frontend 에서 설명하는 프레임워크에는 이후에 다루게 될 Netx.js 가 존재합니다. 그 외에도 Gatsby,m RedwoodJS, Blitz.js 와 같은 다양한 프레임워크들도 존재합니다. 
  • 이러한 React 생태계 위에서 동작하는 프레임워크들은 React 의 Component 구조를 기본적으로 채용하지만, 각 프레임워크 별 특정 기능 및 규칙을 제공함으로써, 이를 프레임워크로 동작하도록 구현합니다.

 

이러한 구조를 본다면 정답은 없다고 생각합니다.

하지만 적어도 이러한 구조적 특징을 안다면, React가 무엇인가? 에 대한 답변을 자신의 생각을 바탕으로 자신있게 설명할 수 있을 것입니다.

 

단순하게 사전적 의미만으로는 해결되지 않는 정의가 너무 많습니다.

제 개인적으로는 React 는 공식적으로는 라이브러리라고 하지만, 실제 사용환경에서는 프레임워크와 다를 바 없이 사용하고 있는것이 현실이라고 생각합니다.

 

단순히 React 하나만 사용하기 보다는 ReactRouterDom 을 이용해 Routing 을 구성하고, Recoil, Redux 와 같은 다양한 전역 상태 관리를 이용하여 상태를 관리하고, ReactQuery 와 같이 DataFetching 을 처리할 뿐 아니라, Webpack, Babel 과 같은 도구 까지 결합이 됨으로써, 프레임워크로써의 역활도 가능하다고 할 수 있습니다.