🌱 기초 프론트엔드
JSX가 뭔가요?
쉽게 이해하기
한글과 영어를 섞어 쓰는 것처럼, JavaScript 코드 안에 HTML 태그를 자연스럽게 섞어 쓸 수 있게 해주는 거예요. '안녕하세요 my name is 홍길동'처럼 두 언어를 섞듯이, 코드와 마크업을 한 곳에 쓸 수 있죠.
핵심 정리
JSX는 JavaScript 안에서 HTML처럼 보이는 코드를 쓸 수 있게 해주는 문법이에요.
자세히 알아보기
JSX는 JavaScript XML의 줄임말로, React에서 화면을 그릴 때 사용하는 문법이에요. 겉보기에는 HTML과 똑같아 보이지만, 실제로는 JavaScript 코드예요. 브라우저는 JSX를 직접 이해하지 못하기 때문에, 빌드 과정에서 일반 JavaScript로 변환됩니다.
JSX의 가장 큰 장점은 가독성이에요. `React.createElement('div', null, 'Hello')`처럼 함수를 계속 호출하는 대신, `<div>Hello</div>`처럼 직관적으로 쓸 수 있거든요. 특히 복잡한 UI 구조를 표현할 때 훨씬 이해하기 쉽습니다.
JSX 안에서는 중괄호 {}를 사용해 JavaScript 표현식을 넣을 수 있어요. 예를 들어 `<h1>{userName}</h1>`처럼 변수 값을 표시하거나, `{isLoggedIn ? '로그아웃' : '로그인'}`처럼 조건에 따라 다른 내용을 보여줄 수 있죠.
HTML과 다른 점도 있어요. 'class' 대신 'className'을 써야 하고, 모든 태그는 닫혀야 해요(`<br>` 대신 `<br />`). 또 최상위에는 하나의 요소만 있어야 하기 때문에, 여러 요소를 묶을 때는 `<div>`나 빈 태그 `<> </>`로 감싸줘야 합니다. JSX는 React뿐 아니라 Vue(JSX 모드)나 다른 프레임워크에서도 선택적으로 사용할 수 있어요.