JSX의 가독성 이슈에도, React를 선택하는 이유는?

React를 사용할 때 HTML과 JavaScript가 분리되지 않아 가독성이 떨어지는 것처럼 보일 수 있습니다. 그럼에도, 여전히 많은 개발자들이 React를 선택하는 이유는 무엇일까요?

JSX란 무엇인가?

JSX(JavaScript XML)는 JavaScript 안에서 XML/HTML과 유사한 문법을 사용할 수 있도록 도입된 React의 특수한 문법입니다. JSX는 JavaScript 코드 안에서 HTML 태그를 직접 작성할 수 있으며, React의 컴포넌트 기반 UI 개발 방식과 잘 맞아떨어집니다.

JSX 예시 (기본적인 React 컴포넌트)

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

위 코드를 보면 JSX 문법을 사용하여 <h1> 태그 안에 {name} 변수를 직접 삽입하고 있습니다. JSX는 HTML과 JavaScript를 조합하여 보다 직관적인 UI를 표현할 수 있도록 도와줍니다.

JSX를 사용하는 이유: HTML + JS의 통합이 가지는 이점

기존 웹 개발 방식에서는 HTML, CSS, JavaScript를 분리하여 개발하는 것이 일반적이었습니다. 예를 들어, HTML에서 id="title"을 부여하고, JavaScript에서 이를 document.getElementById('title')로 찾아서 조작하는 방식이었습니다.

하지만 React는 컴포넌트 기반 개발을 강조하면서 UI 로직과 렌더링을 하나의 파일 안에서 관리하는 것이 더욱 효과적이라고 판단했습니다. JSX의 도입은 이러한 React 철학을 구현하는 중요한 요소 중 하나였습니다.

🔹 JSX의 장점

1. UI와 로직의 일관성 유지
   JSX를 사용하면 UI와 관련된 로직을 한 곳에서 작성할 수 있습니다. 전통적인 방식에서는 HTML이 따로 존재하고, JavaScript에서 DOM을 조작해야 했지만, JSX에서는 한 컴포넌트 안에서 UI를 직접 표현할 수 있습니다.
2. 컴포넌트 기반 개발을 강화
   React의 핵심 철학은 재사용 가능한 컴포넌트 기반 아키텍처입니다. JSX를 활용하면 컴포넌트 내부에서 HTML과 JavaScript 로직을 자연스럽게 결합할 수 있습니다.
3. 직관적인 UI 표현
   JSX는 HTML에 가까운 문법을 유지하면서도 JavaScript의 강력한 기능을 사용할 수 있도록 합니다. JSX 코드가 최종 렌더링될 HTML과 유사하게 보이기 때문에, UI를 설계할 때 직관적으로 이해할 수 있습니다.
4. React의 가상 DOM과 최적화된 렌더링 지원
   JSX는 React의 가상 DOM(Virtual DOM)과 함께 동작하도록 최적화되어 있습니다. 일반적인 HTML을 사용할 경우 DOM 업데이트 시 불필요한 리렌더링이 발생할 가능성이 크지만, JSX와 React는 변경 사항을 효율적으로 계산하여 필요한 부분만 업데이트합니다.
5. JavaScript의 기능 활용 가능
   JSX 내부에서는 map(), filter(), if 조건문 등의 JavaScript 기능을 자유롭게 사용할 수 있습니다. 기존 템플릿 엔진(예: Handlebars, EJS)에서는 제한적인 문법만 지원했지만, JSX는 일반적인 JavaScript 코드처럼 사용할 수 있어 유연성이 뛰어납니다.

JSX가 가독성을 해치는가? (JSX의 단점과 해결 방법)

❌ JSX의 단점

1. HTML과 JavaScript가 혼합되어 있어 가독성이 떨어질 수 있음
   JSX는 HTML과 JavaScript가 한 파일에서 섞여 있는 구조이므로, 코드가 길어지면 어떤 부분이 UI이고, 어떤 부분이 로직인지 구별하기 어려워질 수 있습니다.위와 같은 JSX 코드에서는 HTML 태그(ul, li)와 JavaScript 로직(map, length 조건)이 섞여 있어 가독성이 다소 떨어질 수 있습니다.
2. 긴 JSX 코드가 복잡해지면 유지보수가 어려움
   JSX 내부에서 너무 많은 로직을 처리하면 한눈에 코드를 이해하기 어려워집니다.위 코드도 간단한 예제이지만, ? 연산자와 {} 내부의 로직이 많아지면 가독성이 점점 떨어질 위험이 있습니다.

JSX의 가독성을 개선하는 방법

JSX의 복잡성을 해결하고 더 깔끔한 코드를 유지하는 방법은 다음과 같습니다.

✅ 1. JSX 내부에서 복잡한 로직을 분리하기

JSX 내부에서 if-else, map(), filter() 등의 로직이 복잡해진다면, 이를 컴포넌트 외부 함수로 분리하는 것이 좋습니다.

✔ 리팩토링 전 (가독성이 낮은 코드)

function ProductList({ products }) {
  return (
    <ul>
      {products.length > 0
        ? products.map((product) => <li key={product.id}>{product.name}</li>)
        : <p>No products available</p>}
    </ul>
  );
}

✔ 리팩토링 후 (가독성이 높은 코드)

function ProductList({ products }) {
  if (products.length === 0) {
    return <p>No products available</p>;
  }

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

이렇게 if 문을 활용하여 JSX 내부의 삼항 연산자를 제거하면 더 직관적인 코드가 됩니다.

---

✅ 2. 별도의 UI 컴포넌트로 분리하기

만약 JSX가 길어진다면 서브 컴포넌트로 분리하는 것이 좋습니다.

✔ 리팩토링 후: 컴포넌트 분리

function ProductItem({ product }) {
  return <li>{product.name}</li>;
}

function ProductList({ products }) {
  return (
    <ul>
      {products.length > 0 ? (
        products.map((product) => <ProductItem key={product.id} product={product} />)
      ) : (
        <p>No products available</p>
      )}
    </ul>
  );
}

이제 개별 제품을 렌더링하는 부분을 ProductItem 컴포넌트로 분리하여 가독성이 훨씬 향상되었습니다.

React를 선택하는 이유와 JSX의 가독성 이슈

2022년 Stack Overflow 개발자 설문조사 결과를 보면 Node.js와 React.js가 웹 개발 분야에서 가장 많이 사용되는 기술이며, React는 응답자의 약 42%가 사용하는 것으로 두 번째를 차지했습니다. 그 뒤를 Angular(~20%)와 Vue.js(~19%) 등이 이었습니다. 이처럼 React는 광범위한 인기와 커뮤니티 지원을 가진 프런트엔드 라이브러리 중 하나입니다. 이러한 인기와 더불어 React는 기업(Facebook, 인스타그램, 넷플릭스 등)에서도 널리 사용되고 있으며, 2022년 한 통계에 따르면 전 세계 개발자의 약 40%가 가장 선호하는 웹 프레임워크로 React를 꼽았습니다.

React의 주요 장점과 단점

React의 철학과 구조에서 오는 장점들과 몇 가지 단점을 정리하면 다음과 같습니다:

• 장점:
  • 컴포넌트 기반 구조 – UI를 독립적인 컴포넌트 단위로 개발하여 재사용하고 관리할 수 있습니다. 이러한 모듈식 구조 덕분에 코드가 조직적이며 유지보수가 쉽고, 여러 프로젝트에서 컴포넌트를 공유하여 개발 시간을 단축할 수 있습니다.
  • 가상 DOM(Virtual DOM) – React는 실제 DOM 조작 전에 가벼운 가상 DOM을 사용하여 변경 사항을 비교(diff)한 뒤, 실제 DOM에 최소한의 업데이트를 수행합니다. 이 효율적인 업데이트 방식(reconciliation)을 통해 복잡한 UI에서도 빠른 성능을 보입니다. 특히 변경된 부분만 갱신하므로 전체 페이지를 다시 렌더링하는 기존 방식보다 렌더링 속도가 향상됩니다.
  • 단방향 데이터 흐름 – React는 데이터가 위에서 아래로 흐르는 단방향 데이터 바인딩을 채택하여, 앱의 상태 변화를 예측 가능하고 디버깅하기 쉽게 합니다. 이는 양방향 바인딩의 복잡성을 줄이고, 컴포넌트 간 데이터 흐름을 명확히 파악할 수 있게 해줍니다.
  • 풍부한 생태계와 커뮤니티 – React는 방대한 커뮤니티와 라이브러리 생태계를 자랑합니다. 필요한 기능이 있으면 이미 누군가 만든 npm 패키지나 도구가 존재하는 경우가 많고, 문제 발생 시 커뮤니티로부터 도움을 얻기 쉽습니다. 또한 공식 React Developer Tools 등을 통한 디버깅 지원이 뛰어나 개발 편의성이 높습니다.
  • 유연성 및 확장성 – React 자체는 View 라이브러리로서 핵심만 제공하지만, 필요에 따라 Redux 같은 상태 관리 라이브러리나 Next.js 같은 프레임워크를 자유롭게 조합할 수 있는 유연함이 있습니다. 이로써 소규모 프로젝트부터 대규모 애플리케이션까지 요구 사항에 맞게 React를 확장하여 사용할 수 있습니다.
  • 높은 수요와 취업 기회 – React 개발자는 높은 수요를 갖고 있습니다. React의 넓은 사용층으로 인해 관련 직군도 많으며, 2024년에도 React 숙련자는 다양한 기업에서 선호되고 경쟁력 있는 연봉을 기대할 수 있습니다.
• 단점:
  • 학습 곡선이 가파름 – React와 JSX 문법, 상태 관리(state management), 컴포넌트 생명주기 등에 익숙해지기까지 초보자에게 어려울 수 있습니다. JavaScript 경험이 적은 개발자라면 처음에 개념을 익히는 데 시간이 필요합니다.
  • 빠른 변화 속도 – React 생태계는 매우 빠르게 발전합니다. 빈번한 업데이트와 새로운 기능 도입으로 인해, 개발자가 지속적으로 최신 내용을 따라가야 하는 부담이 있습니다. 이는 장기 유지보수 시 구 버전 코드 업데이트 등의 추가 작업을 초래할 수 있습니다.
  • 뷰(view) 레이어에 집중 – React는 오로지 UI 레이어에만 집중하는 라이브러리이기 때문에, 전역 상태 관리나 라우팅 같은 기능은 내장되어 있지 않습니다. 큰 애플리케이션을 만들 때 Redux, MobX, React Router 등의 추가 라이브러리를 도입해야 하고, 이에 따른 보일러플레이트 코드와 구성 설정이 늘어날 수 있습니다.
  • SEO 및 초기 로딩 – 기본적으로 React는 CSR(클라이언트 사이드 렌더링)로 동작하므로, 검색 엔진 크롤러가 자바스크립트 렌더링을 완전히 하지 못하면 SEO에 불리할 수 있습니다. 이러한 문제를 해결하기 위해 서버 사이드 렌더링(예: Next.js)이나 정적 사이트 생성 등을 추가로 구현해야 하는데, 이는 구현 복잡도를 높입니다.
  • JSX에 대한 거부감 및 초기 가독성 이슈 – HTML과 JS가 한데 섞인 JSX 문법에 거부감을 느끼는 개발자도 있습니다. 초기에는 기존 템플릿 엔진과 다르게 코드에서 UI와 로직이 뒤섞여 보이기 때문에 코드를 읽는 데 혼란을 줄 수 있습니다. (이 부분은 아래에서 자세히 다루겠습니다.)

JSX 방식과 코드 가독성에 대한 논쟁을 더 알아보겠습니다.

React의 JSX는 JavaScript 안에 HTML과 유사한 마크업을 직접 삽입하는 문법입니다. 전통적인 웹 개발에서는 “관심사의 분리” 원칙에 따라 HTML 템플릿과 JS 로직을 파일 수준에서 분리해왔습니다. 반면 React는 “관심사의 분리”를 구현하는 단위가 파일이 아니라 컴포넌트라는 철학을 가지고 있습니다. Facebook의 초기 React 개발자들은 _“템플릿은 관심사가 아니라 *_기술을 분리할 뿐”_이라고 언급하며, 컴포넌트 안에 UI와 로직을 함께 두는 것이 더욱 자연스럽다고 주장했습니다. 즉, *_한 컴포넌트의 JSX와 관련 로직이 한 곳에 있으면 그 컴포넌트의 동작을 한눈에 이해하고 수정하기 쉽다는 것입니다.

이러한 철학 덕분에 JSX를 사용하면 UI 구조를 코드에서 그대로 파악할 수 있다는 장점이 있습니다. JSX의 HTML 같은 태그 문법은 결과 UI를 직관적으로 보여주므로, 코드가 최종 UI 구조를 닮아 있어 읽기 쉽다는 평가도 있습니다. 예를 들어, JSX를 보면 해당 컴포넌트가 렌더링할 HTML 구조가 한눈에 들어오기 때문에 개발자는 UI를 상상하며 코드를 읽을 수 있습니다. 또한 JSX는 완전한 JavaScript이기 때문에, 복잡한 반복이나 조건 로직을 표현력 높은 JS 코드로 구현할 수 있습니다. 템플릿 엔진의 제한된 문법(e.g. ng-repeat, {{#each}} 등) 대신 일반 JS의 map이나 for 문을 사용하여 더 유연한 UI 생성이 가능하며, 개발자에게 익숙한 프로그래밍 방식으로 로직을 제어할 수 있습니다.

반면, JSX의 가독성에 대한 우려도 존재합니다. JSX 내에서 JS 코드와 HTML 마크업이 번갈아 나타나면, 코드가 두 가지 문법을 오가며 작성되어 산만하게 보일 수 있다는 지적입니다. 실제로 객체지향 프로그래밍의 대가인 Robert Martin의 _Clean Code_에서도 서로 다른 언어를 한 파일에서 혼용하는 것을 악취(smell)로 언급하고 있죠. 예를 들어, JSX 안에 복잡한 로직이 섞이거나, 너무 많은 nested JSX 구조가 있으면 코드를 따라가기가 어렵다는 피드백을 받기도 합니다. 이러한 경우에는 일부 UI 조각을 별도 컴포넌트로 분리하거나, JSX 안의 표현식을 간결하게 유지하여 가독성을 개선할 수 있습니다.

정리하면, JSX가 가독성에 미치는 영향은 개발자에게 익숙함과 코드 구조에 따라 달라질 수 있습니다. JSX 자체는 HTML과 비슷해 직관적이지만, 설계에 따라서는 복잡도가 증가할 수 있습니다. React 커뮤니티에서는 _“관심사의 분리는 파일별이 아니라 컴포넌트별”_이라는 공감대가 형성되어 있으며, 적절한 컴포넌트 분리와 코드 스타일 가이드로 JSX 코드도 충분히 깨끗하게 유지할 수 있다고 보고 있습니다. 결국 JSX는 생산성을 높이는 도구이지만, 코드를 깔끔하게 유지하는 것은 개발자의 몫이라고 할 수 있습니다.

React를 사용하는 주요 이유 (성능, 유지보수성, 생산성, 개발 경험)

이제 React가 많은 개발자들에게 선택되는 구체적인 이유들을 성능, 유지보수성, 생산성, 개발자 경험 측면에서 살펴보겠습니다:

• 성능: React가 빠른 성능을 내는 핵심 비결은 앞서 언급한 가상 DOM 및 효율적인 렌더링입니다. 변경 사항을 가상 DOM에서 계산한 후 실제 DOM 업데이트를 최소화하여, 화면을 자주 다시 그리는 애플리케이션에서도 부드러운 UI를 제공합니다. 특히 SPA(Single Page Application)에서 데이터 변화에 따라 부분적인 화면만 갱신하므로, 전체 페이지를 다시 로드하지 않고도 사용자 경험을 향상시킬 수 있습니다. 또한 React 18부터 도입된 Concurrent Features(동시성 기능) 등으로 더욱 개선된 성능 최적화를 지원하여, 복잡한 앱도 프레임 드롭 없이 처리할 수 있도록 발전하고 있습니다.
• 유지보수성: React의 컴포넌트 기반 아키텍처는 유지보수성을 크게 높여줍니다. 애플리케이션을 작은 컴포넌트로 나누면 각 컴포넌트를 개별적으로 이해하고 수정하기 쉬워집니다. 한 컴포넌트의 변경이 다른 부분에 직접 영향을 주지 않으므로 기능 수정이나 확장이 용이합니다. 또한 단방향 데이터 흐름과 명시적인 상태 관리로 인해 데이터 변화를 추적하기 쉬워, 디버깅과 테스트에 유리합니다. 필요하면 Context API나 별도 상태 관리 라이브러리(Redux 등)를 사용해 애플리케이션 상태를 일원화할 수 있고, 이는 팀 개발 시 코드 일관성을 유지하는 데 도움을 줍니다.
• 생산성: React는 개발 생산성을 높이는 여러 요소를 제공합니다. 재사용 가능한 컴포넌트 덕분에 한 번 만든 UI 조각을 애플리케이션 곳곳에서 활용할 수 있어 중복 코딩을 줄입니다. 예를 들어, 버튼이나 폼같이 반복되는 UI는 공통 컴포넌트로 만들어 쓰고, 수정도 한 곳에서 처리할 수 있습니다. 또한 방대한 생태계 라이브러리(차트, 에디터, 지도 등 수많은 React용 패키지)를 활용하면 복잡한 기능도 빠르게 구현할 수 있습니다. 더불어 Create React App, Next.js 같은 도구들은 개발 서버, 핫 리로드(hot reload) 등의 편의 기능을 제공하여, 코드 변경 시 즉각적으로 결과를 확인하면서 개발 속도를 높여줍니다. 이런 이유로 비교적 대규모 프로젝트에서도 React를 사용하면 개발을 체계적으로 진행하면서도 생산성을 유지할 수 있습니다.
• 개발자 경험(DX): React는 현대적인 개발 경험을 제공합니다. 먼저, JSX 문법은 웹 개발자에게 친숙한 HTML 형태로 UI를 작성하게 하여 진입 장벽을 낮춥니다. 또한 강력한 개발자 도구(React Developer Tools)를 통해 브라우저에서 컴포넌트 구조, 상태, props를 손쉽게 모니터링하고 디버깅할 수 있습니다. TypeScript와의 호환도 뛰어나, 대규모 프로젝트에서는 정적 타입을 통해 버그를 줄이며 개발할 수 있습니다. React는 커뮤니티 주도로 발전해왔기 때문에, Stack Overflow나 GitHub 등에서 축적된 지식이 방대하고 문제 해결이 수월합니다. 최근 도입된 Hooks API는 함수형 프로그래밍의 이점을 가져와 코드량을 줄이고 로직 재사용성을 높였으며, 이것이 개발자들에게 깔끔한 코드 작성과 개선된 경험을 안겨주었습니다. 요약하면, React 환경에서 개발하면 도구 지원, 커뮤니티, 언어적 유연성 측면에서 편리함을 느낄 수 있습니다.

다른 프레임워크와의 비교: React vs. Vue vs. Angular

마지막으로 React를 다른 인기 프론트엔드 프레임워크와 비교해보겠습니다. 각 기술마다 철학과 장단점이 있으므로, 상황에 따라 다른 선택이 될 수도 있습니다:

• React vs Angular: Angular는 구글에서 만든 풀스택 프런트엔드 프레임워크로, React보다 더 무겁고 기능이 풍부합니다. Angular는 프로젝트에 의존성 주입, 폼 유효성 검사, HTTP 통신, 라우팅 등 여러 기능을 내장하고 있고, TypeScript를 기본 언어로 사용합니다. 이러한 종합적인 기능 제공 덕분에 대규모 엔터프라이즈 애플리케이션에서 일관된 구조로 개발하기 좋지만, 초기 학습 곡선이 가파르고 보일러플레이트 코드가 많아 개발 초기 속도는 느릴 수 있습니다. React는 그에 비해 가벼운 UI 라이브러리로 시작해서 필요한 것만 선택해서 쓰는 유연함이 있으며, 초기 셋업이 비교적 가볍지만, 큰 앱을 만들 때는 개발자가 구조를 잡고 추가 도구들을 조합해야 합니다. 성능 면에서는 Angular도 빠르지만 변경 탐지(Change Detection) 방식과 실제 DOM 조작을 사용하므로, 많은 데이터 업데이트가 있는 경우 Virtual DOM을 활용하는 React가 유리하다는 평가가 있습니다. 요약하면 Angular는 전범위 솔루션, React는 자유도 높은 뷰 라이브러리로 구분되며, Angular는 규모와 구조, React는 유연성과 커뮤니티를 강점으로 갖습니다.
• React vs Vue: Vue.js는 React보다 늦게 등장한 진보적인 프레임워크로, 경량화와 간결함을 강조합니다. Vue는 템플릿 문법을 사용하여 HTML, CSS, JS를 단일 파일(.vue 파일) 내에서 섹션으로 구분해 작성하는데, 이는 기존 웹 개발자들이 쉽게 적응할 수 있도록 한 설계입니다. React의 JSX와 달리 HTML 템플릿과 JS 로직을 분리하는 느낌을 주기 때문에, 작은 규모에서는 가독성이 좋고 빠른 개발이 가능합니다. Vue는 양방향 바인딩과 반응형 데이터 시스템(Reactivity) 덕분에 폼 입력 같은 UI 상호작용을 손쉽게 구현할 수 있고, 규모가 커지면 Vuex를 통해 일방향 흐름으로 관리하는 등 유연합니다. 학습 난이도 측면에서 Vue는 비교적 쉬운 편이며, 작고 중간 규모 프로젝트에 적합하고 초기 개발 속도가 매우 빠릅니다. 하지만 아주 대규모 애플리케이션이나 특수한 요구사항에서는 React만큼 방대한 생태계나 도구 지원이 부족할 수 있고(예: 일부 라이브러리는 React 우선 개발), 전 세계적으로 React에 비해 채택률이나 구인 수요가 조금 낮은 편입니다. 반대로 Vue는 커뮤니티가 꾸준히 성장 중이며, React의 장점을 많이 흡수하면서도 Angular의 좋은 점(예: 디렉티브)을 적절히 결합한 균형 잡힌 프레임워크로 평가받고 있습니다.
• 공통점 및 기타: 세 프레임워크 모두 SPA를 구축하고 컴포넌트 기반 개발을 한다는 점에서는 유사합니다. 또한 필요에 따라 SSR(서버 사이드 렌더링)을 지원하여 초기 로딩 성능과 SEO를 개선할 수 있다는 공통점이 있습니다. React와 Vue는 가상 DOM을 활용하고 필요에 따라 점진적으로 적용할 수 있다는 면에서 유연성이 높습니다. Angular는 완결된 프레임워크로서 팀원 간 명확한 규칙 하에 개발할 때 장점이 있습니다. React vs Angular vs Vue의 선호도는 해마다 변하고 있지만, React는 여전히 가장 널리 쓰이고 선호도도 높으며, Vue와 Angular가 그 뒤를 따르는 추세입니다. 선택은 프로젝트 규모, 팀 역량, 요구사항에 따라 달라지지만, React는 성능, 재사용성, 생태계 측면에서 무난한 선택지로 많은 사랑을 받고 있습니다.

결론

정리하면, React를 사용하는 개발자들이 많은 이유는 뛰어난 성능, 컴포넌트 기반의 높은 유지보수성, 재사용을 통한 생산성 향상, 풍부한 생태계와 개발자 도구로 인한 우수한 개발 경험 등으로 요약될 수 있습니다. 비록 JSX 문법으로 인해 HTML과 JS가 한 곳에 섞이는 방식에 처음에는 거부감이나 가독성 논쟁이 있지만, React 철학에 익숙해지고 올바른 패턴을 따르면 충분히 깔끔하고 이해하기 쉬운 코드를 유지할 수 있습니다. 또한 React는 방대한 사용자 커뮤니티와 기업의 지원으로 지속적으로 발전하고 있어, 최신 웹 개발 트렌드와 요구를 충족시키는 데 유리합니다. Vue나 Angular 등 다른 프레임워크와 비교해서도 React는 균형잡힌 선택지로서, 앞으로도 많은 프로젝트에서 활용되는 이유가 여기에 있습니다.

각 프레임워크는 장단점이 있으므로 절대적인 우열을 가리기보다는, 프로젝트 상황에 맞는 도구를 선택하는 것이 중요합니다. 하지만 현재까지의 추세와 개발 경험을 종합해 볼 때, React는 그 특유의 개발 철학과 실용성으로 인해 많은 개발자들에게 “가독성을 조금 희생하더라도 얻을 이점이 더 큰” 기술로 받아들여지고 있습니다. 이러한 이점들이 결국 React의 지속적인 인기를 뒷받침하는 핵심 요인입니다.

감사합니다.