React – React 시작하기 – 개요 – 2 – React의 등장 배경과 진화

작성자 wooah
React – React 시작하기 – 개요 – 2 – React의 등장 배경과 진화

React – React 시작하기 – 개요 – 2 – React의 등장 배경과 진화

안녕하세요, 여러분! 😊 오늘은 React가 왜, 어떻게 등장하게 되었는지, 그리고 시간이 흐르면서 어떻게 진화해왔는지에 대해 자세히 알아볼게요. 우리가 쓰고 있는 이 멋진 라이브러리가 어떤 고민에서 태어났고, 어떻게 웹의 판도를 바꿨는지 아시면 React에 대한 이해가 훨씬 깊어질 거예요.

웹의 초창기: 정적인 HTML에서 시작하다

웹이 처음 나왔을 때는 단순히 정보를 보여주는 정적인 HTML 페이지가 전부였어요. 마치 벽에 걸린 포스터처럼 한 번 만들어 놓으면 바뀌지 않는 콘텐츠였죠. 사용자는 그저 읽기만 가능했어요.

하지만 시간이 지나면서 사용자의 요구는 점점 다양해졌어요.

  • 버튼을 누르면 다른 내용이 나오게 하고 싶고,
  • 게시글을 실시간으로 보여주고 싶고,
  • 사용자마다 다른 화면을 보여주고 싶어진 거죠.

이때부터 JavaScript가 본격적으로 활약하기 시작합니다!

jQuery 시대: DOM을 자유롭게 다루던 시절

🌐 jQuery의 시대

2006년쯤 등장한 jQuery는 웹 개발자에게 마치 마법의 지팡이 같은 존재였어요. 복잡한 DOM 조작을 간단한 코드로 할 수 있었거든요!

$('#button').click(function() {
  $('#message').text('안녕하세요!');
});

하지만 문제가 있었어요.

  • 많은 이벤트가 엉켜서 어디서 버그가 나는지 알기 힘들고,
  • 복잡한 UI가 생기면 코드가 꼬이기 시작하며,
  • **’스파게티 코드’**라는 별명이 붙을 정도로 구조가 복잡해졌죠.

MVC 프레임워크의 등장

🧱 구조화의 시도 – AngularJS, Backbone.js 등

이 복잡함을 해결하고자 MVC 패턴을 도입한 프레임워크들이 등장했어요. AngularJS, Backbone.js, Ember.js 등이 그 주인공이에요.

이 프레임워크들은 **“모델(Model)이 바뀌면 뷰(View)도 자동으로 바뀌도록 하자!”**라는 개념으로 UI와 데이터를 연결했어요. 한동안은 이 방식이 대세였지만, 또 다른 문제가 생겼죠.

  • 양방향 데이터 바인딩이 복잡해지면서 디버깅이 어려워지고,
  • 성능 이슈가 생기기 시작했어요.
  • 규모가 커지면 관리가 어려워졌죠.

Facebook의 고민: React의 탄생

👶 React의 첫 등장 (2013)

페이스북은 수많은 사용자에게 서비스를 제공하면서, 특히 댓글 시스템에서 큰 고민이 있었어요. 댓글이 달릴 때마다 전체 DOM을 다시 렌더링하니 성능이 떨어지고, 유지보수가 너무 어려웠던 거죠.

이때 Jordan Walke라는 엔지니어가 만든 내부 라이브러리가 바로 React의 시초입니다.

“화면은 상태의 함수다. (UI = f(state))”

이 단순하지만 강력한 아이디어를 기반으로 React는 2013년에 오픈소스화되며 세상에 공개됩니다.

React의 주요 철학

🔍 핵심 개념

개념 설명
컴포넌트 기반 UI를 독립적이고 재사용 가능한 조각으로 구성
단방향 데이터 흐름 부모 → 자식 방향으로만 데이터를 전달, 예측 가능성 향상
Virtual DOM 실제 DOM을 직접 조작하지 않고, 가상의 DOM에서 변경 사항 계산 후 최소한만 반영
선언형 프로그래밍 상태를 선언하면 UI가 자동으로 맞춰짐 (명령형 → 선언형)

React의 진화: 계속 발전하는 생태계

1. React 15 이전: 클래스 컴포넌트 중심

class Hello extends React.Component {
  render() {
    return <h1>안녕하세요</h1>;
  }
}

이때까지만 해도 코드가 다소 무겁고 장황했어요.

2. React 16 (Fiber 도입)

2017년에 등장한 **React 16(Fiber)**는 내부 엔진을 완전히 새로 쓴 버전이에요.

  • 비동기 렌더링 지원으로 부드러운 UI 가능
  • 에러 경계(Error Boundary) 도입
  • Fragments, Portals 지원

3. React Hooks (React 16.8)

2019년, 리액트 개발사 측에서 Hooks를 도입하면서 함수형 컴포넌트의 가능성이 폭발적으로 확장되었어요.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
  • 상태 관리(useState)
  • 생명주기 처리(useEffect)
  • 성능 최적화(useMemo, useCallback)

등등, 이젠 클래스 없이도 대부분의 기능을 구현할 수 있게 되었어요!

4. Concurrent Mode, Suspense, Server Components

React는 계속해서 웹의 미래를 준비하고 있어요.

기능 설명
Concurrent Mode 사용자 인터랙션에 더 부드럽게 반응하도록 지원
Suspense 데이터 로딩 상태를 컴포넌트 단에서 관리 가능
Server Components 서버에서 렌더링된 컴포넌트를 클라이언트로 전송, 초기 로딩 개선

React가 바꾼 웹 생태계

React는 단순한 UI 라이브러리를 넘어서 프론트엔드 개발의 패러다임을 바꾸어 놓았어요.

  • 컴포넌트 중심 개발 문화 확산
  • Redux, Recoil, Zustand 같은 상태관리 도구의 탄생
  • Next.js, Gatsby 같은 React 기반 프레임워크의 등장
  • 대규모 애플리케이션도 관리 가능한 구조화된 개발 환경

주의해야 할 점들

React는 훌륭한 도구이지만, 주의해야 할 부분도 있어요.

주의사항 설명
러닝 커브 React 자체는 간단하지만, 생태계(라우팅, 상태관리, 빌드 등)가 방대해 익힐 게 많아요.
SEO 한계 기본 React는 클라이언트 사이드 렌더링이기 때문에 SEO에 불리할 수 있어요.
과도한 상태관리 필요 이상으로 복잡한 상태관리를 도입하면 오히려 코드가 무거워질 수 있어요.
빠른 업데이트 속도 React의 버전 변화가 빨라서, 따라가지 않으면 구버전에 머물 수 있어요.

마무리하며

React는 단순히 하나의 기술이 아니라 웹 개발의 흐름을 주도하는 철학과 문화라고 할 수 있어요. 처음에는 페이스북의 성능 문제를 해결하기 위한 작은 솔루션이었지만, 지금은 전 세계 수많은 서비스가 React를 기반으로 운영되고 있답니다!

React의 등장은 마치 혼란스러웠던 연극 무대에 한 명의 뛰어난 연출가가 등장해 질서를 잡은 느낌이에요. 🎭

앞으로 우리가 React를 배우며 사용하는 모든 과정은, 그 변화의 역사를 이어가는 여정이 될 거예요. 멋지지 않나요?

다음 글에서는 React의 개발 환경 설정에 대해 본격적으로 알아보겠습니다! 함께 준비해봐요! 🛠️

답글 남기기