개요

Stackoverflow에서 실시한 투표결과 '2023년에 가장 핫한 프론트엔드 프레임워크'는 React였습니다.

2023년 프론트엔드 프레임워크 트렌드 출처: The Most Popular Front-End Frameworks To Use In 2023

React, 어떻게 탄생해서 지금의 자리에 오르게 됐을까요?

오늘은 React의 역사와 발전 과정을 살펴보면서, 장단점과 꼭 알아둬야 할 팁들을 소개해볼까 합니다.

React의 탄생

React의 탄생 스토리는 페이스북에서 발생한 UI 지옥에서 시작됩니다. 2011년 당시, 페이스북은 급격히 늘어나는 사용자와 복잡한 UI 때문에 골머리를 앓고 있었어요.

페이지가 느려지고, 수정할 때마다 시스템이 무너지며 “여기가 불타는 고구마 창고인가?” 싶을 정도였죠. 사용자는 증가하고 있었지만, 그들의 요구를 충족하기엔 UI 성능이 부족했던 겁니다.

이때, 페이스북 개발자 Jordan Walke가 고군분투 끝에 React의 초기 버전을 만들어냈습니다. 그의 비장의 무기는 바로 컴포넌트 기반 UI와 Virtual DOM이었습니다.

이제 더 이상 무겁고 느린 DOM을 직접 조작할 필요 없어!

React는 페이스북 내부에서 점차 사용되기 시작했고, 그 성능 덕에 내부에서는 마치 구세주처럼 칭송받았습니다.

2013년, 오픈소스로의 대모험

페이스북은 2013년에 React를 오픈소스로 공개합니다. 처음에는 사람들이 React를 두고 의문을 품었죠.

이거 그냥 자바스크립트 아니야?

특히 HTML과 자바스크립트를 섞어 쓸 수 있는 JSX라는 문법이 처음엔 조금 거부감을 일으켰습니다. “HTML 안에 자바스크립트를 넣는다고? 그건 신성 모독이야!” 라고 말하는 사람들도 있었죠.

하지만 컴포넌트라는 혁신적 개념과, 복잡한 UI를 쉽게 관리할 수 있다는 장점이 점점 입소문을 타면서 React는 폭발적인 인기를 얻게 됩니다. 당시 많은 웹 개발자들이 "이게 뭐야?"에서 "이게 내가 원하던 거야!"로 빠르게 태도를 바꾸기 시작했죠.

어라? 이거 재사용도 쉽고, 성능도 좋네?

React 버전 15부터 시작된 이유: 대체 14는 어디로 갔을까?

여기서 흥미로운 점 하나! 많은 사람들은 React가 버전 15부터 시작된 걸 보고 "잠깐, 그럼 14는 어디 갔지?" 라고 생각했을 거예요. 사실 React는 v0.3에서 시작하여 쭉 이어져 오다가, v15로 갑자기 뛰어넘습니다.

왜 그랬을까요?

React 팀은 원래 v0.x에서 v1.0으로 넘어가려 했지만, 중간에 내부 API를 여러 번 크게 바꾸다 보니 버전 숫자를 올리는 게 점점 복잡해졌어요. 결국 "버전 관리의 지옥"에 빠진 거죠.

그래서 "차라리 단순하게 v15로 올려서 맞추자" 는 결론에 이르게 된 겁니다. 버전 15는 사실상 "우리가 충분히 안정화되었다!" 는 선언이기도 했어요.

이와 같은 이유로 React의 버전은 0.x, 14를 건너뛰고 15부터 시작된 거랍니다.

React의 주요 버전과 발전: 진화하는 UI

React의 역사는 버전 업데이트와 함께 계속해서 진화해왔습니다. 중요한 버전별 발전 내용을 간단하게 살펴볼까요?

v0.3 (2013) : 첫 오픈소스 릴리스. 페이스북의 첫 공개로 React의 가능성을 엿볼 수 있던 초기 버전이었습니다.
v15 (2016) : 갑자기 15부터 시작된 버전! DOM 업데이트 최적화와 에러 경계(Error Boundaries) 도입으로 UI의 안정성을 높였습니다. 성능도 크게 향상되었죠. 이 때부터 사람들이 많이 찍먹하기 시작했습니다.
v16 (2017) : Fiber라는 내부 재구축 프로젝트 덕분에 가상 DOM의 성능이 크게 향상되었습니다. 새로운 기능들인 Fragment, Portals 등으로 더 유연한 UI 개발이 가능해졌어요.
v17 (2020) : 큰 기능 추가는 없었지만, 중요한 리팩토링이 이뤄졌어요. React의 앱을 점진적으로 업데이트할 수 있게 만들어, 버전 업그레이드에 대한 부담을 덜어줬습니다.
v18 (2022) : Concurrent Mode가 도입되었습니다. 이제 React는 비동기 렌더링을 지원해 더 나은 성능을 제공하고, 사용자 경험을 크게 향상시켰습니다. 사용자가 앱을 더 부드럽고 빠르게 느끼도록 만들어 주죠.
v19 (2023) : React Compiler를 통한 자동 성능 최적화와 새로운 use() 훅의 도입입니다. 이로 인해 메모이제이션을 직접 처리할 필요가 없어졌고, 비동기 데이터 처리와 컨텍스트 접근이 간편해졌습니다.

특히 19버전에 관한 내용은 추후 다뤄보도록 하겠습니다. 재미있는 내용들이 많더라구요.

React는 이렇게 매 버전마다 발전을 거듭하며, 우리가 사용하는 UI를 더 편리하고 강력하게 만들어 주고 있습니다.

React의 장점

컴포넌트 기반 개발

React의 핵심 아이디어는 컴포넌트. 마치 레고 블록처럼 작은 조각들을 조립해 UI를 만들 수 있어요. 이 방식은 개발을 깔끔하게 하고, 유지 보수도 훨씬 수월하게 해주죠. 복잡한 UI를 각 컴포넌트로 나누어 독립적으로 관리할 수 있으니, 더 이상 무거운 HTML 구조를 고민할 필요가 없습니다.

단방향 데이터 흐름

React는 데이터가 부모 컴포넌트에서 자식 컴포넌트로만 흐르는 단방향 방식을 채택해 데이터 관리가 훨씬 직관적이에요. 예측 가능한 데이터 흐름 덕분에 개발자가 상태를 쉽게 추적할 수 있죠.

가상 DOM (Virtual DOM)

DOM 조작은 생각보다 무겁고 성능을 잡아먹는 작업이에요. 하지만 React는 Virtual DOM이라는 똑똑한 방식을 채택해, 실제 DOM을 직접 변경하지 않고 가상의 DOM을 먼저 수정한 후, 필요한 부분만 실제 DOM에 반영합니다. 이 덕분에 성능이 훨씬 좋아지고, 빠르고 효율적인 렌더링이 가능합니다.

방대한 생태계

React는 페이스북이 지원하는 만큼 엄청난 생태계를 가지고 있어요. 수많은 라이브러리와 도구들이 React와 연동되며, 개발자가 원하는 기능을 손쉽게 구현할 수 있습니다. 예를 들어 Redux는 상태 관리를 도와주고, Next.js는 SEO와 서버사이드 렌더링(SSR)을 쉽게 처리할 수 있게 해주죠.

React의 단점

러닝 커브

React 자체는 간단해 보이지만, 생태계를 함께 사용하다 보면 상태 관리, 라우팅, 테스트 등 여러 가지를 배우고 익혀야 해요. 이게 처음에는 꽤 벅찰 수 있습니다. 특히 상태 관리 도구인 Redux나 Context API 같은 개념을 파악해야 하죠.

빠른 업데이트

React는 꾸준히 발전하고 있죠. 좋은 점이지만, 너무 자주 업데이트가 되다 보니, "또 새 버전 나왔어?" 라는 생각이 들 때도 있어요. 물론 최신 기술을 유지하는 건 좋지만, 간혹 업데이트 속도를 따라가는 것이 부담스러울 때도 있습니다.

SEO 최적화의 어려움

React는 기본적으로 클라이언트 사이드 렌더링(CSR) 을 사용하기 때문에 검색 엔진이 페이지를 잘 크롤링하지 못할 수 있어요. 이를 해결하려면 Next.js와 같은 서버사이드 렌더링(SSR) 지원 도구를 사용해야 합니다.

끝으로...

프론트엔드 라이브러리는 정말 정~말 많습니다. 하지만 Meta(구 facebook)의 자본력과 여러 개발자들의 기여를 바탕으로 React는 아직도 부동의 1위를 달리고 있죠.

저는 Vue로 개발을 시작했는데 'React에는 있는데 Vue에는 아직 없는 기능들' 이 많았고, 라이브러리 풀도 너무 아쉬웠습니다. (실제로 Vue는 React보다 한 템포씩 기능 업데이트가 느렸습니다. 1인 개발의 한계도 있겠죠?)

언제 바뀔지는 모르겠지만, 현재로서는 React가 프론트엔드 개발자라면 꼭 알아야 할 라이브러리라고 생각합니다. 이제 앞으로는 React 공식문서를 함께 보며, 중요한 내용들을 하나씩 짚어보겠습니다.