![[React] 1. JSX](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-08-20T05%3A39%3A08.618Z-7dd2430d-79a5-49b6-877f-72f6fb8137ae&w=3840&q=75)
JSX
- JavaScript + XML을 합친 JavaScript 확장 문법
- 리액트에서 사용 가능한 확장 문법 : 리액스 Element를 반환해줌
- 브라우저가 바로 이해하는 HTML이 아님
- Babel과 같은 Transpiler가 JSX를 일반 JavaScript로 변환해줌
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 등 여러 스타일링 기법 지원 |
선언 / 명령 | 명령형 프로그래밍 (무엇을 어떻게 해야 한다) | 선언형 프로그래밍 (상태가 이러하니 화면은 이렇다) |
Share article