React의 장점 - 빠른 렌더링? 개발자 관점에서의 효율성

들어가며

React를 처음 배울 때 "빠른 렌더링과 성능 최적화"라는 말을 자주 듣게 됩니다.
그러면 React가 순수 JavaScript보다 빠른 걸까요?
이 글에서는 React의 장점을 개발자 관점에서 정확하게 정리해보겠습니다.

---

React가 "빠르다"는 말의 진짜 의미

React는 JavaScript를 기반으로 동작합니다.
즉, React 코드는 결국 JavaScript로 변환되어 실행됩니다.
그러므로 "React가 JavaScript보다 빠르다"는 표현은 정확하지 않습니다.

React 코드 (JSX)
      ↓  Babel 변환
JavaScript 코드
      ↓  브라우저 실행

React의 장점은 실행 속도가 아니라 개발자 관점에서의 효율성에 있습니다.

정확한 표현:
"React는 JavaScript보다 빠르다" (X)
"React는 개발자가 효율적으로 관리하고 유지보수하기 좋다" (O)

---

가상 DOM - 렌더링 최적화

React가 성능 최적화와 관련해 실제로 갖는 장점은 가상 DOM(Virtual DOM) 입니다.
이는 JavaScript가 빠른 것이 아니라, 불필요한 DOM 업데이트를 줄이는 방식입니다.

[순수 JavaScript - 직접 DOM 조작]

상태 변경 발생
      ↓
DOM 직접 수정 → 브라우저가 해당 영역 전체 다시 렌더링
      ↓
변경이 잦을수록 성능 저하


[React - 가상 DOM 사용]

상태 변경 발생
      ↓
가상 DOM에서 변경 전후 비교 (diffing)
      ↓
실제로 바뀐 부분만 실제 DOM에 반영
      ↓
불필요한 렌더링 최소화

// 순수 JavaScript - 변경마다 DOM 직접 조작
document.getElementById("count").textContent = count;
document.getElementById("name").textContent = name;
document.getElementById("status").textContent = status;
// 각각 따로 DOM을 건드림

// React - 상태만 변경하면 필요한 부분만 자동 업데이트
const [count, setCount] = useState(0);
setCount(count + 1); // React가 알아서 필요한 곳만 업데이트

---

React의 핵심 장점 - 컴포넌트

React의 가장 큰 장점은 컴포넌트(Component) 입니다.
UI를 독립적인 조각으로 나누어 재사용성과 유지보수성을 높여줍니다.

---

재사용성 (Reusability)

한 번 만든 컴포넌트를 여러 곳에서 재사용할 수 있습니다.

[순수 HTML - 중복 코드]

memberList.html:
<div class="card">
    <h3>홍길동</h3>
    <p>개발자</p>
</div>
<div class="card">
    <h3>김철수</h3>
    <p>디자이너</p>
</div>

adminPage.html:
<div class="card">    ← 똑같은 코드 반복
    <h3>박영희</h3>
    <p>기획자</p>
</div>

// React - 컴포넌트로 재사용
function MemberCard({ name, role }) {
    return (
        <div className="card">
            <h3>{name}</h3>
            <p>{role}</p>
        </div>
    );
}

// 어디서든 재사용
function MemberList() {
    return (
        <div>
            <MemberCard name="홍길동" role="개발자" />
            <MemberCard name="김철수" role="디자이너" />
            <MemberCard name="박영희" role="기획자" />
        </div>
    );
}

function AdminPage() {
    return (
        <div>
            <MemberCard name="관리자" role="Admin" /> {/* 재사용 */}
        </div>
    );
}

---

유지보수성 (Maintainability)

컴포넌트가 독립적으로 분리되어 있어 수정이 필요할 때 해당 컴포넌트만 변경하면 됩니다.

[순수 HTML - 수정이 어렵다]

카드 디자인을 바꾸고 싶다면?
→ memberList.html, adminPage.html, dashboard.html 등
  모든 파일에서 직접 찾아 수정해야 함


[React - 컴포넌트 수정]

카드 디자인을 바꾸고 싶다면?
→ MemberCard 컴포넌트 하나만 수정
→ 사용하는 모든 곳에 자동 반영

// MemberCard 컴포넌트만 수정하면 모든 곳에 반영
function MemberCard({ name, role }) {
    return (
        <div className="card new-design"> {/* 여기만 수정 */}
            <img src="/default-avatar.png" alt="avatar" />
            <h3>{name}</h3>
            <p>{role}</p>
        </div>
    );
}

---

상태 관리(State) - 화면 자동 업데이트

React는 상태(state)가 변경되면 해당 컴포넌트를 자동으로 다시 렌더링합니다.
순수 JavaScript처럼 DOM을 직접 찾아 수정할 필요가 없습니다.

// 순수 JavaScript - DOM 직접 조작
let count = 0;
document.getElementById("btn").addEventListener("click", function () {
    count++;
    document.getElementById("count").textContent = count; // 직접 찾아 수정
});

// React - 상태만 변경하면 화면 자동 업데이트
function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)}>증가</button>
            {/* setCount 호출 → count 변경 → 화면 자동 업데이트 */}
        </div>
    );
}

---

React의 장점 정리

항목	순수 JavaScript	React
UI 구성	HTML 파일마다 중복 코드	컴포넌트로 재사용
화면 업데이트	DOM 직접 조작	상태 변경 → 자동 렌더링
유지보수	수정 시 여러 파일 변경	컴포넌트 하나만 수정
렌더링 방식	변경마다 DOM 직접 수정	가상 DOM으로 최소 업데이트
코드 구조	파일이 커질수록 복잡	컴포넌트 단위로 분리 관리

---

정리

• React는 JavaScript로 변환되어 실행되기 때문에 "React가 JavaScript보다 빠르다"는 표현은 정확하지 않다.
• React의 진짜 장점은 개발자 관점에서의 효율성이다.
• 가상 DOM을 통해 실제로 변경된 부분만 업데이트해 불필요한 렌더링을 줄인다.
• 컴포넌트로 UI를 분리해 재사용성을 높이고, 수정 시 해당 컴포넌트만 변경하면 되어 유지보수성이 좋아진다.
• 상태(state)가 변경되면 화면이 자동으로 업데이트되어 DOM을 직접 조작할 필요가 없다.