웹 개발의 변화와 React의 등장
처음 웹 개발을 시작하면 화면만 잘 나오면 된 것 아닌가?라는 생각이 자연스럽게 듭니다.
실제로 작은 페이지를 만들 때는 그 접근이 통하지만, 사용자 상호작용이 늘어나는 순간 코드가 빠르게 복잡해집니다.
버튼 하나를 바꿨는데 다른 영역이 깨지거나, 데이터는 바뀌었는데 화면은 그대로인 경험을 한 번쯤 하게 됩니다.
많은 초보 개발자가 이 지점에서 자바스크립트를 더 열심히 쓰면 해결되지 않을까?라고 생각하지만, 문제의 핵심은 문법보다 구조에 있는 경우가 많습니다.
리액트는 바로 그 구조 문제를 풀기 위해 등장한 도구입니다.
이 절에서는 리액트가 어떤 시대적 배경에서 나왔는지, 왜 기존 방식이 한계에 부딪혔는지, 그리고 무엇을 바꾸려 했는지를 맥락 순서대로 설명하겠습니다.
배경을 이해하고 나면 이후 장에서 배우는 컴포넌트, 상태, 렌더링 개념이 단편적인 지식이 아니라 하나의 흐름으로 보이기 시작합니다.
정적인 웹에서 동적인 웹으로
혹시 2000년대 초반의 웹사이트들을 기억하시나요? 당시 웹페이지는 대부분 서버에서 준비된 HTML 파일을 받아 그대로 보여주는 방식이었습니다. 사용자 인터랙션은 많지 않았고, 페이지를 이동할 때마다 전체 새로고침이 일어나는 것이 일반적이었습니다. 이런 형태를 정적인 웹(Static Web)이라고 부릅니다.
하지만 시간이 흐르면서 웹은 정보 열람 도구를 넘어, 상호작용 중심 애플리케이션으로 빠르게 진화했습니다. 브라우저 안에서 설치형 프로그램에 가까운 경험을 제공하는 방향으로 바뀐 것입니다.
예를 들어 페이스북 뉴스피드는 전체 새로고침 없이 새 게시물이 갱신되고, 좋아요나 댓글 같은 동작이 즉시 반영됩니다. 구글 맵도 지도 이동과 경로 탐색이 끊기지 않고 이어지죠. 이처럼 사용자와 계속 상호작용하며 실시간으로 정보를 갱신하는 웹을 우리는 동적인 웹(Dynamic Web), 또는 단일 페이지 애플리케이션(Single Page Application, SPA)이라고 부릅니다.
이러한 동적인 웹 애플리케이션을 구축하기 위해서는 브라우저, 즉 클라이언트 측에서 많은 작업을 처리해야 합니다. 자바스크립트는 이러한 동적인 동작을 구현하는 데 핵심적인 역할을 수행해왔습니다.
라이브러리/프레임워크의 필요성 대두
동적인 웹의 등장은 개발자에게 새로운 도전을 안겨주었습니다. 과거에는 서버가 대부분의 로직을 처리한 뒤 완성된 HTML을 보내면 됐지만, 이제는 클라이언트에서도 복잡한 UI와 비즈니스 로직을 효율적으로 관리해야 했습니다.
순수 자바스크립트(Vanilla JavaScript)만으로 복잡한 SPA를 만드는 일은 쉽지 않았습니다. 코드는 빠르게 커지고, 상태 관리와 화면 갱신은 점점 어려워졌습니다.
예를 들어 특정 데이터가 바뀌면 여러 UI 요소를 동시에 갱신해야 하는데, 개발자가 각 요소를 직접 찾아 수동으로 DOM(Document Object Model)을 조작해야 하는 경우가 많았습니다. 이 방식은 버그를 늘리고 생산성을 떨어뜨리며, 결국 유지보수 비용을 크게 올리는 원인이 되었습니다.
바로 이러한 문제점들을 해결하기 위해, UI 개발을 보다 효율적이고 체계적으로 돕는 다양한 자바스크립트 라이브러리와 프레임워크들이 등장하기 시작했습니다. 이들은 복잡한 DOM 조작을 추상화하고, 데이터 변경에 따른 UI 업데이트를 자동화하며, 재사용 가능한 UI 컴포넌트를 만들 수 있도록 지원하여 개발자들이 오직 핵심 로직에만 집중할 수 있도록 돕습니다.
다만 라이브러리를 쓰면 무조건 쉽다라고 받아들이면 곤란합니다.
도구를 도입하는 순간 학습 비용, 프로젝트 구조의 제약, 팀 규칙 정렬 같은 새로운 과제가 생깁니다.
그래서 좋은 선택은 항상 기능 개수보다 우리 서비스가 자주 바뀌는 화면인가, 상태 동기화가 자주 필요한가, 협업 규모가 어느 정도인가를 기준으로 내려야 합니다.
리액트가 빠르게 표준 도구로 자리 잡은 이유도, 이런 현실 기준에서 비용 대비 이점이 분명했기 때문입니다.
Facebook과 React의 탄생
수많은 웹 기술들이 생겨나고 사라지는 과정 속에서, 2013년 페이스북(Facebook)은 자신들이 직면했던 UI 개발의 어려움을 해결하기 위해 내부적으로 개발하던 라이브러리를 오픈 소스로 공개했습니다. 그것이 바로 우리가 지금부터 함께 배울 리액트(React)입니다.
페이스북은 방대하고 복잡한 애플리케이션을 개발하면서, UI 상태 관리에 대한 어려움을 절감했습니다. 특히, 데이터가 변경될 때마다 수많은 컴포넌트들이 어떻게 효율적으로 업데이트되어야 하는지에 대한 명확한 해답을 찾고 싶었습니다. 이러한 고민 끝에, 리액트는 데이터의 변화에 따라 UI를 어떻게 효율적으로 업데이트할 것인가라는 질문에 대한 강력한 해결책으로 제시되었습니다.
리액트의 등장은 웹 개발 생태계에 큰 반향을 일으켰고, 오늘날 수많은 기업과 개발자들이 리액트를 사용하여 안정적이고 성능 좋은 웹 애플리케이션을 구축하고 있습니다. 이제 우리는 다음 절에서 리액트가 가지고 있는 핵심적인 특징과 강점들에 대해 더 깊이 파고들어 볼 것입니다.