기존 바닐라Js와 React의 가장 차이점은 뭘까?

점점 인터넷 문화가 발전돼가며 기존 바닐라Js 개발자들은 유지보수와 여러 과정에서 어려움을 겪었다 이 문제를 해결하기 위해 React가 개발된 것 이다.

 

1.ReactJs와 바닐라Js의 비교

기능	React	바닐라 JS
구조	컴포넌트 기반 구조, UI 컴포넌트 재사용 가능	구조가 존재하지 않는다, HTML, CSS, Js가 섞여서 존재한다
상태 관리	useState, useEffect, zustand, Context API등 사용	수동으로 상태를 관리하고, DOM을 직접 업데이트
UI 업데이트	가상 DOM을 사용해 실제 DOM과 바뀐 부분만 자동 업데이트	DOM을 직접 조작해야한다
성능	가상 DOM으로 리렌더링 최적화	직접 DOM을 수정하므로 성능에 영향을 미치는 경우가 밠생
재사용성	높음 ( 컴포넌트 재사용 가능 )	낮음 ( 수동으로 코드를 모듈화 시켜야함 )
코드 복잡도	복잡한 UI를 간단히 관리 ( Hook 이나 컴포넌트 사용)	모든것을 수동으로 관리해야 하기 때문에 코드가 react에 비해 더 복잡하다
생태계	풍부한 생태계	외부 라이브러리를 추가해야 다양한 기능 구현 가능
학습 곡선	보통 ( React에 대한 리렌더링 관리나 useMemo등 개념 학습이 필요하다)	낮음( 기본 Js만 안다면 거의 다 해결 가능 )

 

위처럼 react와 바닐라Js의 가장 큰 차이를 나열해 비교한 것 이다. 코드로 예시를 다시 들자면

 

React 에서는 컴포넌트 단위로 UI를 관리하고, Hook을 이용해 상태 변화가 자동으로 UI에 반영된다.

React는 가상돔을 이용해 효율적으로 렌더링한다.

•   React는 UI가 변경될 때마다 가상 DOM을 먼저 업데이트합니다. 가상 DOM은 실제 DOM의 가벼운 복사본이기 때문에, 전체 페이지를 다시 렌더링하는 대신, 변경된 부분만 효율적으로 처리합니다.
• 그 후, 실제 DOM과 가상 DOM을 비교하여 최소한의 변경만 실제 DOM에 반영합니다. 이렇게 함으로써, 성능을 최적화하고 불필요한 리렌더링을 방지할 수 있습니다.

function Button() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

 

이 컴포넌트는 버튼을 클릭할 때마다 상태가 변경되지만, React는 상태가 바뀐 부분만 렌더링하여 다른 UI는 그대로 두게 된다. 이로 인해 성능이 크게 향상됩니다.

바닐라 Js 에서는 상태가 변경될때마다 DOM 선택을 하여 직접 업데이트 해야한다.

즉 아래 코드처럼 상태가 변경된다면 DOM을 선택하여 직접적으로 개발자가 UI를 수정하여 업데이트 해야한다.

• 상태가 변경되면 DOM을 직접적으로 업데이트해야 합니다. 즉, 상태가 변할 때마다 DOM을 수동으로 조작하여 UI를 변경합니다.
• UI를 수동으로 업데이트하는 방식이기 때문에, 상태가 변할 때마다 전체 DOM을 다시 그리거나 필요한 부분만 직접 수정해야 합니다. 이 방식은 대규모 애플리케이션에서 성능 문제가 발생할 수 있습니다.

<button id="myButton">0</button>
<script>
  let count = 0;
  const button = document.getElementById("myButton");
  button.addEventListener("click", () => {
    count++;
    button.innerText = count;
  });
</script>

 

여기서는 버튼을 클릭할 때마다 button.innerText로 직접적으로 DOM을 업데이트합니다. 이렇게 직접 DOM을 변경하는 방식은 작은 애플리케이션에서는 문제가 없지만, 상태가 복잡해지면 코드가 복잡하고 성능에 영향을 미칠 수 있습니다.

2. 렌더링 방식의 핵심 차이점

 

기능	react	바닐라 Js
렌더링 방식	가상 DOM을 사용하여 효율적인 렌더링, 변경된 부분만 업데이트	실제 DOM을 직접 수정하여 UI를 업데이트
렌더링 최적화	최소화된 DOM 업데이트, 필요 없는 부분은 렌더링하지 않음	모든 상태 변화마다 직접 DOM을 변경해야 함
성능	가상 DOM 덕분에 대규모 애플리케이션에서도 성능이 뛰어남	DOM을 자주 수정하면 성능 저하가 발생할 수 있음

 

렌더링 최적화 ( React의 장점 )

1. 가상 DOM은 UI의 성능을 최적화하는 핵심입니다. React는 실제 DOM을 바로 수정하지 않고, 변경 사항을 가상 DOM에 먼저 반영한 후, 실제 DOM과 비교하여 최적의 업데이트 방법을 선택합니다.
2. 이 과정에서 불필요한 렌더링을 방지하고, 애플리케이션이 커져도 성능 저하를 최소화할 수 있습니다.

요약

• React: 컴포넌트 기반 구조를 사용해 UI를 쉽게 관리하며, 상태 변화에 따른 UI 업데이트를 자동으로 처리합니다. 가상 DOM을 활용해 성능을 최적화하고, 상태가 변경될 때 필요한 부분만 업데이트하여 효율적으로 렌더링합니다. 대규모 애플리케이션에서도 유지보수성과 확장성이 뛰어나며, 복잡한 UI를 관리하는 데 적합합니다.
• 바닐라 JS: JavaScript만을 사용하여 UI를 직접 조작하고, 상태 변화 시 실제 DOM을 직접 수정해야 합니다. 작은 프로젝트나 간단한 애플리케이션에 적합하지만, 코드가 복잡해질 수 있고, 상태 변화에 따른 UI 업데이트를 수동으로 관리해야 하므로 성능 저하나 유지보수가 어려워질 수 있습니다.