FrontEnd

왜 지금도 React를 사용할까?

J3SUNG 2025. 4. 11. 11:43
728x90

서론

프론트엔드 개발을 처음 접했을 때는 JavaScript만으로도 UI를 만들 수 있다는 사실이 흥미로웠습니다. 버튼 클릭이나 입력값에 따라 화면이 바뀌는 간단한 동작들은 Vanilla JS만으로도 충분히 구현할 수 있었고, 그 자체만으로도 재미있었습니다. 하지만 점점 기능이 늘어나고, UI 요소와 상태가 복잡해질수록 "이걸 매번 수동으로 관리해야 하나?" 하는 생각이 들기 시작했습니다. 코드가 늘어나면서 버그도 자주 발생했고, 유지보수는 갈수록 어려워졌습니다.

이런 JavaScript의 한계를 극복하기 위한 시도로 다양한 프레임워크와 라이브러리들이 등장했습니다. Angular는 가장 먼저 등장해 MVC 구조 기반의 복잡한 앱 설계를 가능하게 했고, 이후 등장한 React는 상태 기반의 선언형 UI라는 새로운 접근을 제시하며 많은 주목을 받았습니다. 이후 Vue, Svelte, Solid 같은 도구들도 저마다의 방식으로 더 나은 개발 경험을 추구하며 생태계를 넓혀가고 있습니다.

이처럼 선택지는 많아졌지만, 오히려 그래서 더 고민이 많아지기도 합니다. "무엇을 써야 하지?"라는 질문에 딱 떨어지는 정답은 없지만, 저는 그중에서도 React를 먼저 익히고 사용해왔습니다. 이 글은 React에 대해서 정리하고, 다른 프레임워크들과 비교하면서 어떤 차이점이 있는지를 정리해보고자 합니다.

React란?

React는 Facebook(Meta)에서 개발한 사용자 인터페이스 라이브러리로, 웹 애플리케이션에서 사용자와 상호작용하는 UI를 효율적으로 구축할 수 있도록 도와줍니다. 초기에는 단순한 View 계층을 담당하는 라이브러리로 소개되었지만, 현재는 풍부한 생태계를 기반으로 복잡한 프론트엔드 애플리케이션 전반을 책임질 수 있는 핵심 기술로 자리잡았습니다.

컴포넌트라는 추상화를 통해 UI를 구성하고, 상태에 따라 UI를 선언적으로 표현할 수 있게 해줍니다. 이는 복잡한 로직이나 사용자 흐름에서도 예측 가능한 결과를 보장하고, 유지보수성을 높이는 데 큰 역할을 합니다.

https://velog.io/@niboo/React-React.js%EB%9E%80

 

React의 특징

선언형 UI

React는 선언형 프로그래밍 방식을 따릅니다. 상태에 따라 화면이 어떻게 보여야 하는지를 선언하면, React가 이를 기준으로 UI를 자동으로 갱신합니다. 이 방식은 명령형으로 직접 DOM을 조작하던 기존 방식보다 코드의 흐름이 단순하고 예측 가능하다는 장점이 있습니다. 복잡한 화면일수록 선언형 구조는 유지보수성과 안정성 측면에서 유리합니다.

컴포넌트 기반 구조

React는 UI를 기능 단위의 컴포넌트로 분리하여 개발할 수 있도록 합니다. 각 컴포넌트는 독립적인 역할과 상태를 가지며, 이를 조합해 전체 UI를 구성합니다. 이러한 구조는 재사용성과 코드 관리에 용이하고, 대규모 프로젝트나 협업 환경에서도 명확한 책임 분리가 가능하다는 장점을 가집니다.

가상 DOM(Virtual DOM)

React는 Virtual DOM을 통해 실제 DOM 조작을 최적화합니다. 상태 변화 시 전체 UI를 다시 렌더링하는 대신, 메모리 상의 가상 DOM에서 변경 사항을 먼저 계산하고, 실제 DOM에는 최소한의 변경만 적용합니다. 이 과정은 렌더링 성능을 개선하고, 사용자 경험을 안정적으로 유지하는 데 효과적입니다.

풍부한 생태계와 도구

React는 상태 관리(Redux, Zustand), 서버 상태 처리(React Query), 라우팅(React Router) 등 다양한 기능을 보완할 수 있는 도구들이 잘 갖춰져 있는 생태계를 가지고 있습니다. 또한 TypeScript, Jest, Storybook 등과의 호환성도 뛰어나며, 다양한 개발 환경에 유연하게 적용할 수 있는 확장성을 제공합니다.

순수 JavaScript와의 차이점

순수 JavaScript로 UI를 구성할 때는 다음과 같은 어려움이 생깁니다.

  • DOM 상태와 데이터 상태를 일일이 동기화해야 합니다.
  • 이벤트 처리 로직과 상태 변경 로직이 흩어져 있어, 코드 흐름을 추적하기 어렵습니다.
  • 코드가 많아질수록 복잡도와 버그 발생 가능성이 함께 증가합니다.

반면 React는 다음과 같은 방식으로 문제를 해결합니다.

  • 상태를 기준으로 UI가 자동으로 갱신되기 때문에, UI를 직접 업데이트할 필요가 없습니다.
  • 컴포넌트를 기준으로 상태, 이벤트, 렌더링을 하나의 함수 또는 파일 내에서 관리할 수 있어 코드 응집도가 높아집니다.
  • React의 선언적 프로그래밍 방식은 애플리케이션의 동작을 예측 가능하게 만들어줍니다.

예를 들어 버튼 클릭 시 텍스트를 변경하는 UI를 만든다고 가정해보겠습니다.

JavaScript 방식은 다음과 같이 요소를 직접 선택하고, 이벤트를 추가하고, DOM을 조작해야 합니다.

const button = document.querySelector('button');
const text = document.querySelector('p');

button.addEventListener('click', () => {
  text.textContent = '변경되었습니다';
});

React 방식은 상태 기반으로 다음과 같이 구성됩니다.

function App() {
  const [text, setText] = useState('기본 텍스트');

  return (
    <div>
      <p>{text}</p>
      <button onClick={() => setText('변경되었습니다')}>변경</button>
    </div>
  );
}

React에서는 상태만 변경하면 자동으로 화면이 갱신되므로, 데이터와 UI가 항상 일치하는 구조를 유지할 수 있습니다.

다른 프레임워크와의 비교 (Vue, Svelte, Solid, Angular)

Vue

  • 문법 특징: 템플릿 기반 선언형 문법 사용. HTML, CSS, JS를 분리해 구성.
  • 장점: 직관적인 문법과 양방향 바인딩(MVVM 구조), Composition API 지원.
  • 적합한 규모: 소~중규모 프로젝트. 입문자 친화적.
  • 주의사항: 구조가 유연해 대규모 프로젝트에선 아키텍처 설계가 중요. 라이브러리(Vuex, Router) 사용 시 Vue 특유의 문법 이해 필요.

Svelte

  • 문법 특징: 빌드 타임 컴파일 방식. 선언형 문법으로 코드량 최소화.
  • 장점: 빠른 성능, 적은 번들 크기, 간결한 코드.
  • 적합한 규모: 퍼포먼스가 중요한 소형~중형 프로젝트.
  • 주의사항: 생태계와 도구가 제한적. 실무 자료와 사례가 부족함.

Solid

  • 문법 특징: JSX 기반 문법 사용. React와 유사한 문법 구조.
  • 장점: Fine-grained 반응성 기반의 고성능 렌더링. 낮은 런타임 비용.
  • 적합한 규모: 성능 최적화가 중요한 애플리케이션.
  • 주의사항: 비교적 생소한 프레임워크. 자료와 커뮤니티가 작음.

Angular

  • 문법 특징: TypeScript 기반. 의존성 주입(DI), 모듈 시스템 내장.
  • 장점: 정형화된 구조, 풍부한 내장 기능, 일관된 대규모 개발 가능.
  • 적합한 규모: 엔터프라이즈급 대형 프로젝트.
  • 주의사항: 초기 설정 복잡, 러닝 커브 높음.

React

  • 문법 특징: JSX 기반. 선언형 UI, 컴포넌트 단위 설계.
  • 장점: 유연한 구조, 방대한 생태계(Redux, Router, Query 등).
  • 적합한 규모: 소형부터 대형까지 범용적으로 사용 가능.
  • 주의사항: 자유도가 높은 만큼 설계 기준 없이 사용할 경우 유지보수에 어려움.

React를 선택하게 되는 이유들

기술적으로는 후발주자들이 더 정제된 구조나 성능 향상을 제공하기도 하지만, 실무에서는 다음과 같은 현실적인 이유들이 함께 고려됩니다:

  • 생태계의 안정성: 다양한 라이브러리, 툴, 커뮤니티 지원이 이미 잘 구축되어 있음
  • 인력 수급의 용이성: 많은 개발자가 이미 React를 사용하고 있어 팀 빌딩이나 협업에 유리함
  • 자료와 사례의 풍부함: 문제 해결을 위한 레퍼런스를 쉽게 찾을 수 있음

마무리

지금까지 JavaScript와 React, 그리고 다양한 프레임워크들을 비교하며, 각각의 기술이 어떤 방식으로 개발에 접근하고 문제를 해결하는지 살펴보았습니다. 프레임워크마다 지향하는 철학과 구조, 생태계 차이가 있기 때문에, 절대적인 우위를 가리기보다는 상황에 맞는 선택이 중요합니다.

React는 다양한 기능과 도구가 잘 정비되어 있어 실무에서 폭넓게 활용되고 있으며, 복잡한 애플리케이션부터 간단한 인터페이스 구성까지 유연하게 대응할 수 있는 장점을 가지고 있습니다. 다만 프로젝트의 목적, 팀의 기술 수준, 향후 확장성 등을 함께 고려해 Vue, Svelte, Angular, Solid와 같은 다른 프레임워크를 검토해보는 것도 적절한 판단이 될 수 있습니다.

저작자표시