React는 어떤 언어일까?

1. 정의

React는 웹과 네이티브 사용자 인터페이스(UI)를 위한 선언적이고 컴포넌트 기반의 JavaScript 라이브러리입니다. 

 

---

 

2. 등장 배경

React는 Meta(구 Facebook) 와 개발자 커뮤니티에 의해 유지·관리되며, 2013년 5월 공개적으로 첫 릴리즈되었습니다.

 

Facebook은 복잡한 UI 상태 관리와 대규모 SPA 개발에서 기존 MVC 패턴의 한계를 느꼈고, 컴포넌트 기반의 선언적 UI 라이브러리를 내부적으로 개발해 오픈소스로 공개했습니다.

 

2026년 2월 24일에는 Meta가 React를 Linux Foundation 산하의 React Foundation에 기부하며 완전한 오픈소스 거버넌스 체계를 갖추게 되었습니다.

 

 

 

---

 

3. 주요 특징

1. 컴포넌트 기반 (Component-Based)

컴포넌트란 Java의 클래스와 비슷한 개념입니다. 기존 HTML에서는 동일한 형식에, 데이터만 바꾸어 반복했던 구조를 미리 틀(설계도)로 만들어 놓는 것입니다.

<!-- 하나의 거대한 HTML 파일 -->
<div>
  <header>
    <img src="logo.png"/>
    <nav>...</nav>
  </header>
  
  <input type="search" placeholder="검색..."/>
  
  <div class="card">
    <img src="상품1.png"/>
    <h2>상품명</h2>
    <p>가격</p>
    <button>구매하기</button>
  </div>
  
  <div class="card">  <!-- 똑같은 카드를 또 씀 -->
    <img src="상품2.png"/>
    <h2>상품명</h2>
    <p>가격</p>
    <button>구매하기</button>
  </div>
  
  <!-- ... 100개의 카드가 있으면 100번 반복 -->
  
  <footer>...</footer>
</div>

 

// Card.jsx - 카드 "설계도"를 한 번만 정의
function Card({ 상품이름, 가격, 이미지 }) {
  return (
    <div class="card">
      <img src={이미지}/>
      <h2>{상품이름}</h2>
      <p>{가격}</p>
      <button>구매하기</button>
    </div>
  );
}

// 메인 페이지에서 "찍어내기만" 하면 됨
function Page() {
  return (
    <div>
      <Header />
      <SearchBar />
      <Card 상품이름="맥북" 가격="200만원" 이미지="mac.png" />
      <Card 상품이름="아이패드" 가격="100만원" 이미지="ipad.png" />
      <Card 상품이름="에어팟" 가격="30만원" 이미지="airpods.png" />
      <Footer />
    </div>
  );
}

 

---

 

2. 선언형 (Declarative)

선언형은 결과만 말하는 방식입니다. 어떻게 만드는지 하나하나 지시하는 Vanila JS의 명령형 방식과 다릅니다.

// "어떻게" 바꿀지 직접 명령
let count = 0;

document.querySelector('#btn').addEventListener('click', () => {
  count++;
  // DOM을 직접 찾아가서, 직접 텍스트를 바꿔줘야 함
  document.querySelector('#display').innerText = count;
});

개발자가 직접 "DOM 조회 -> 값 추출 -> 수정" 과정을 단계 별로 지시합니다.

 

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>  {/* "count를 여기 보여줘" 라고 선언만 */}
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

개발자는 "count 값이 여기 보이면 돼"라고 선언만 합니다. DOM을 어떻게 업데이트하는지는 React가 알아서 처리합니다.

 

---

 

3. Virtual DOM

React는 브라우저 DOM과 유사한 인메모리 가상 DOM을 생성합니다. 컴포넌트가 렌더링될 때마다 결과를 가상 DOM과 비교하고, 변경된 부분만 실제 브라우저 DOM에 효율적으로 반영합니다. 이과정을 Reconciliation(재조정)이라고 합니다.

[1. 최초 렌더링]
앱 시작
  ↓
Virtual DOM Tree (v1) 생성  ← JS 객체, 메모리 안에 존재
  ↓
실제 DOM에 반영 → 화면에 표시
  ↓
v1을 메모리에 계속 보관 중 (다음 비교를 위해)


[2. state/props 변경 발생 시]
setState() 호출
  ↓
새로운 Virtual DOM Tree (v2) 생성
  ↓
v1 vs v2 비교 → Diffing Algorithm 실행
  ↓
달라진 부분만 파악 → Reconciliation
  ↓
실제 DOM에서 해당 부분만 수정
  ↓
v2가 이제 새로운 "이전 Virtual DOM"이 됨 (v1 자리를 대체)

 

---

 

4. JSX

JSX(JavaScript XML)는 JavaScript 파일 내에서 HTML과 유사한 마크업을 작성할 수 있도록 해주는 JavaScript 구문 확장입니다.

 

웹은 HTML, CSS, JavaScript를 기반으로 구축되었습니다. 오랫동안 웹 개발자들은 콘텐츠는 HTML에, 디자인은 CSS에, 로직은 JavaScript에 작성했는데, 종종 각각 다른 파일에 작성했습니다. 콘텐츠는 HTML 내부에 마크업되었고, 페이지의 로직은 JavaScript 파일에 별도로 존재했습니다.

기존 웹 개발 구조

 

웹이 점점 더 상호작용적으로 변하면서 콘텐츠는 논리에 의해 좌우되는 경우가 많아졌습니다. HTML은 자바스크립트가 담당하게 된 것입니다! 이것이 바로 React에서 렌더링 로직과 마크업이 같은 공간, 즉 컴포넌트에 함께 존재하는 이유입니다.

React 문법 예시

 

각 React 컴포넌트는 React가 브라우저에 렌더링하는 마크업을 포함할 수 있는 JavaScript 함수입니다. React 컴포넌트는 이러한 마크업을 표현하기 위해 JSX라는 구문 확장을 사용합니다. JSX는 HTML과 매우 유사하지만, 좀 더 엄격하며 동적인 정보를 표시할 수 있습니다.

---

 

5. Hooks

2019년 2월 React 16.8 출시와 함께 Hooks가 도입되었습니다. Hooks는 클래스 없이도 함수형 컴포넌트에서 React의 상태(State)와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 함수입니다.

 

"useState", "useEffect", "useContext", "useReducer", useMemo" 등이 내장 Hook으로 제공됩니다.

 

---

 

6. Learn Once, Write Anywhere

React의 철학을 설명하는 슬로건입니다. "한 번 React의 사고방식(컴포넌트 구조, 상태 관리 등)을 배우면, 여러 플랫폼(웹, 모바일 등)에 적용할 수 있다.

 

React는 단순한 웹 라이브러리가 아닌, UI를 구성하는 방식(컴포넌트 중심 설계) 자체를 제공합니다. 이 사고방식을 배우면 웹(React), 모바일(React Natvie), 데스크톱(Electron + React)와 같이 여러 환경에 적용이 가능합니다.

 

---

 

참고 자료

https://ko.react.dev/

React