[React 톺아보기] 0. React가 만들어진 이유(Introducing React)

최근 웹개발의 트렌드는 빠르게 변화하고 있습니다.  그만큼 여러 개발 도구들이 등장하고 발전하고 있는데요, React도 이러한 개발 도구들 중 하나입니다. 어떤 개발 도구나 프레임워크라도 "왜 쓰는지" 혹은 "그 툴의 장점이 무엇인지?"를 알고 쓰는 것이 중요합니다. 이번에는 React를 공부하기에 앞서 왜 React를 써야 하는지 React가 가지는 특징을 중심으로 알아보려고 합니다.

1. React란?

페이스북(현재 메타)에서 개발한 Javascript UI 라이브러리를 말합니다. 

 

2. React의 등장 배경

2000년대 초 Web 2.0과 SPA(Single Page Application)의 등장으로 사용자가 웹페이지에서 정보를 주고받으며 상호작용할 수 있게 되었습니다. 이에따라  많은 웹서비스들이 등장하였고 특히 페이스북이 SNS(Social Network Service)를 비지니스 모델로 크게 성공했습니다. 여기서 페이스북은 문제에 직면했는데요, 웹서비스에서 많은 기능들을 제공하는 만큼 규모가 커져서 1분에 3TB의 정보가 쌓일 정도로 복잡해졌습니다. 지금까지는 없었던 방대한 기능의 웹사이트를 HTML, CSS, Javascript만으로는 운영하기 어려운 상황에 놓이게 됩니다. 

이런 배경에서 페이스북은 기존의 방식보다 빠른 UI 렌더링과 반응성을 향상시키기 위해 2011년 Facebook의 소프트웨어 엔지니어 Jordan Walke의 주도 하에 React라는 새로운 Javascript UI 라이브러리를 개발하게 됩니다.

React로 개발된 대표적인 서비스들

처음에는 페이스북 내부에서만 사용하다가 2013년부터 오픈소스로 공개하였습니다. 이후 AirBnB, Netflix, Dropbox, Twitter, Uber, Discode 등 이름만 들어도 알만한 거대한 기업들도 React로 서비스를 개발하면서 생태계를 확장해 나가며 입지를 점점 키웠고 현재 프론트엔드 개발 도구 2순위까지 자리매김하게 되었습니다.

2023 StackOverflow 선호도 조사

위의 설문조사에서도 알 수 있듯이, React는 프론트엔드 분야에서 입지가 커지며 꾸준히 성장하고 있습니다.

 

3. React의 특징

React의 장점은 매우 많지만 저는 크게 4가지로 정리할 수 있을 것 같습니다. 웹이나 프로그래밍에 대한 지식이 없는 경우라면 위의 내용이 이해가 안될 수도 있습니다. 하지만 React를 배우고 나서 다시 보면 보이는 부분이 많아질 것입니다. 나중에 꼭 돌아와서 다시 한번 보는 것을 추천합니다.

빠른 랜더링 속도

SPA(Single Page Application)을 지원하여 하나의 페이지만 렌더링합니다. 이후  Virtual DOM과의 상태 비교를 통해 변화된 부분만 빠르게 재렌더링합니다. 이러한 방식은 무거운 웹페이지에서 사용자와 상호작용할 때 유용합니다.

 

 

효율적인 코드의 유지 보수

React는 "어떻게" 보다 "무엇"을 강조하는 선언형 문법을 주로 사용합니다. 이는 복잡한 기능들은 숨기고 무엇을 나타내는지 명확히 알 수 있습니다.

또한 React는 사용자 정의 태그들을 캡슐화하여 컴포넌트로 관리합니다. 이렇게 캡슐화된 컴포넌트는 나중에 재사용될 수 있습니다.

마지막으로, UI쪽으로 단방향 데이터 흐름을 가집니다.

이런 점들은 큰 프로젝트에서 코드를 유지, 보수하기에 매우 효율적입니다.

 

거대한 생태계

위에서 언급했듯이, 규모있는 기업들이 React로 서비스를 개발하며 생태계를 확장했습니다. 해외 뿐만아니라 국내에서도  똑같습니다. 그만큼 자료또한 방대하여 자료를 찾아보는 시간이 단축됩니다.

 

뛰어난 호환성

React는 Node 서버에서 랜더링할 수도 있고 React Native를 이용하면 모바일 앱도 개발할 수 있습니다. 따라서 React를 한 번 배우고 나서  서버, 모바일 등 다른 분야에서도 빠르게 개발이 가능합니다.

 

추가적인 내용은 공식 문서의 메인페이지에 구체적으로 설명되어 있으니 궁금하면 읽어보세요

컴포넌트, JSX, SPA, Virtual DOM, 라이브러리, 프레임워크 등은 React를 배우며 자연스럽게 나오는 내용입니다. 이 내용들은 다른 포스팅에서 자세하게 다루어 보도록 하겠습니다.