태그

React - 프론트엔드를 잠식한 라이브러리 React는 어떻게 탄생했을까?


⚛️ 리액트(React)의 역사와 개발 배경 — 누가, 언제, 왜 만들었을까?

리액트(React)는 오늘날 프론트엔드 개발의 표준처럼 쓰이고 있지만,
처음부터 이렇게 대중적인 기술은 아니었습니다.
“누가, 언제, 왜 리액트를 만들었는가?”
6하원칙으로 리액트의 탄생부터 현재까지 한눈에 정리해볼게요 👇

🧑‍💻 1️⃣ 누가(Who): 리액트를 만든 사람과 회사

리액트는 Facebook(현재 Meta) 의 엔지니어 Jordan Walke가 처음 개발했습니다.

  • 개발 주체: Facebook (Meta)

  • 주요 개발자: Jordan Walke (조던 월크)

  • 유지/관리: Meta의 React 팀과 전 세계 오픈소스 커뮤니티

💬 참고:
Jordan Walke는 당시 Facebook의 광고 시스템 UI를 개선하기 위해 React의 원형인 FaxJS라는 실험적 라이브러리를 만들었습니다.
이게 바로 지금의 React의 시작이었죠.

📅 2️⃣ 언제(When): 리액트의 등장 시기와 발전 과정

리액트는 2010년대 초반, 웹 개발 환경이 급격히 복잡해지던 시기에 등장했습니다.

연도 사건
2011년 Facebook 내부 프로젝트로 처음 개발 시작 (FaxJS → React prototype)
2012년 Instagram 웹 버전에 React 도입
2013년 5월 Facebook이 React를 오픈소스로 공개 (MIT License)
2015년 React Native 공개 (모바일 앱 개발용)
2016년 이후 기업과 스타트업 전반으로 빠르게 확산
2018년 React 16.8 버전에서 React Hooks 도입 — 함수형 컴포넌트 시대 개막
2020년 이후 Next.js, Remix 등 SSR 기반 프레임워크들과 함께 현대 프론트엔드의 핵심 기술로 자리잡음

🕐 정리하자면,
React는 2011년 Facebook 내부 개발 → 2013년 오픈소스 공개 → 2018년 Hooks 도입을 거쳐
지금의 “가장 인기 있는 UI 라이브러리”로 성장했습니다.

🌍 3️⃣ 어디서(Where): 리액트가 사용되는 곳

리액트는 현재 웹, 모바일, 데스크톱, TV 앱 등 다양한 환경에서 사용됩니다.

구분 사용 예시
웹(Web) Facebook, Instagram, Netflix, Airbnb, Twitter 등
모바일(Mobile) React Native (iOS, Android 앱 개발)
데스크톱(Desktop) Electron + React 조합 (Slack, VSCode 일부 UI 등)
TV/콘솔 React Native for TV (Netflix TV App 등)

💡 React의 장점은 “한 번 배워서 어디에나 쓸 수 있다”는 점이에요.
웹, 모바일, 데스크톱 모두 같은 컴포넌트 기반 철학으로 개발이 가능합니다.

💡 4️⃣ 왜(Why): 리액트가 만들어진 이유

리액트가 등장한 가장 큰 이유는 Facebook의 복잡한 UI 문제 때문이었습니다.

당시 상황 (2010~2012)

  • Facebook의 뉴스피드나 댓글 UI는 데이터가 매우 자주 바뀌는 구조였음

  • 기존 방식(jQuery, DOM 직접 조작)은 비효율적이고 코드 유지보수가 어려움

  • 데이터가 바뀔 때마다 DOM을 일일이 갱신해야 해서 성능 저하 발생

React의 해결 방법

  1. Virtual DOM 도입 → 변경된 부분만 효율적으로 업데이트

  2. 컴포넌트 기반 구조 → UI를 작은 단위로 나누어 재사용 가능

  3. 단방향 데이터 흐름(One-way Data Flow) → 예측 가능한 데이터 관리

이로써 Facebook은 복잡한 대규모 UI를 빠르고 안정적으로 관리할 수 있게 되었고,
그 기술을 세상에 공개한 것이 바로 React입니다.

⚙️ 5️⃣ 무엇을(What): 리액트가 제공하는 기능

React는 단순한 “라이브러리” 이상의 존재로, 다음과 같은 핵심 기능을 제공합니다.

핵심 기능 설명
컴포넌트(Component) UI를 독립적이고 재사용 가능한 단위로 분리
JSX JavaScript 안에서 HTML을 직관적으로 작성
Virtual DOM 빠르고 효율적인 UI 업데이트
Props / State 데이터 전달과 상태 관리 메커니즘
Hooks 함수형 컴포넌트에서 상태와 생명주기를 제어하는 API

🧠 6️⃣ 어떻게(How): 리액트는 어떻게 동작하나?

리액트는 UI를 렌더링할 때 다음과 같은 과정을 거칩니다.

  1. JSX를 통해 UI 구조를 선언

  2. Virtual DOM 에서 가상 트리를 생성

  3. 데이터가 변경되면 이전 Virtual DOM과 비교(diffing)

  4. 변경된 부분만 실제 DOM에 반영

이 덕분에 React는 빠르고 효율적인 화면 갱신이 가능하며,
복잡한 웹 애플리케이션에서도 안정적으로 작동합니다.

🚀 정리: 리액트의 역사 한눈에 보기

항목 요약
누가(Who) Facebook(현 Meta) / Jordan Walke
언제(When) 2011년 개발 시작 → 2013년 오픈소스 공개
어디서(Where) Facebook, Instagram, Netflix 등 글로벌 웹 서비스
왜(Why) 복잡한 UI와 비효율적인 DOM 업데이트 문제 해결
무엇을(What) 컴포넌트, Virtual DOM, JSX 등 핵심 개념 제공
어떻게(How) Virtual DOM 기반 렌더링으로 효율적인 UI 관리

💬 마무리

리액트는 단순한 UI 라이브러리를 넘어,
“컴포넌트 기반 개발”이라는 새로운 패러다임을 제시한 기술입니다.
2011년 Facebook 사내에서 시작된 작은 실험이
지금은 전 세계 대부분의 프론트엔드 프로젝트에서 사용되는 표준 기술로 자리 잡았죠.



라벨:

댓글

댓글 쓰기

가장 많이 본 글