[React] 1. JSX

문정준's avatar
Aug 20, 2025
[React] 1. JSX

JSX

  • JavaScript + XML을 합친 JavaScript 확장 문법
  • 리액트에서 사용 가능한 확장 문법 : 리액스 Element를 반환해줌
  • 브라우저가 바로 이해하는 HTML이 아님
    • Babel과 같은 Transpiler가 JSX를 일반 JavaScript로 변환해줌
notion image
 

JSX의 특징

  • 실제 HTML 태그가 아닌, JavaScript 객체를 생성해 주는 문법
    • 중괄호 내부에 JS 표현식을 바로 작성 가능
  • 태그의 표현법에 따라 사용이 달라짐
    • 소문자 : 일반 HTML 태그
    • 대문자 : React 컴포넌트
 

React vs HTML/CSS

구분
HTML/CSS
React
UI 업데이트
Dom을 직접 조작 → 수동 화면 갱신 상태가 많으면 관리 복잡
상태 변경 시 자동으로 반영 선언형 방식으로 UI 표현 Virtual DOM을 통해 필요한 부분만 업데이트
구조화 & 재사용
기본으로 정적이며, JS로 동적 변화를 추가 UI 재사용 시 복사/붙여넣기, <template> 태그, JS 함수 등에 의존해야 함 → 유지보수 어려움
컴포넌트 단위로 UI 구분 가능 UI를 하나의 함수로 만들어 재사용 가능 props를 통해 같은 컴포넌트를 다양한 데이터로 활용 가능
데이터 흐름
전역 변수 & DOM 탐색으로 데이터 통신 동기화 문제 발생 가능
단방향(Top → Down) 흐름으로 데이터 전달 상태(state)를 통해 데이터와 UI 연결
렌더링 효율
변화가 생기면 전부 다시 그리거나 수동으로 최적화가 필요 → 비효율적
Virtual DOM을 통한 효율적 업데이트 적용 변화가 필요한 부분만 탐지하여 성능 최적화
스타일링
전역적으로 적용되므로 클래스명이 겹치면 충돌
CSS 모듈, Styled Components, Tailwind CSS 등 여러 스타일링 기법 지원
선언 / 명령
명령형 프로그래밍 (무엇을 어떻게 해야 한다)
선언형 프로그래밍 (상태가 이러하니 화면은 이렇다)
notion image
notion image
 
Share article

sxias