⚡ 📌 [필독] 바쁜 현대인을 위한 초스피드 요약
- JSX는 JavaScript 확장 문법으로, HTML과 유사하지만 JavaScript 문법도 함께 사용 가능합니다.
- JSX 표현식, JSX 안에서 JavaScript 변수 사용, JSX 조건부 렌더링 3가지 핵심만 알면 됩니다.
- 헷갈리는 JSX, 핵심만 파고들어 React 개발의 자신감을 얻어가세요!
리액트 초보, JSX 개념 3가지 핵심만 쏙! 헷갈림 끝!
2026년의 어느 날, 저녁 9시쯤이었어요. 노트북 화면 가득 펼쳐진 리액트(React) 코드 앞에서 깊은 한숨을 내쉬었죠. 머릿속은 온통 ‘JSX’라는 단어들로 복잡했어요. 이 녀석, 분명 HTML처럼 생겼는데 또 JavaScript 같기도 하고… 도대체 정체가 뭘까요? 리액트 학습 초창기, 많은 분들이 저처럼 JSX 앞에서 길을 잃곤 합니다. “이게 대체 뭘까?” “왜 이렇게 복잡한 걸 써야 하지?” 하는 생각에 앞으로 나아가기 두려워지기도 하고요. 오늘은 이런 헷갈림을 끝내고 JSX와 친해질 수 있는 딱 3가지 핵심만 뽑아 속 시원하게 알려드릴게요.
JSX, 처음엔 나도 낯설었다
처음 리액트 공부를 시작했을 때, 가장 먼저 저를 당황하게 만든 건 바로 JSX였습니다. 마치 HTML처럼 태그를 사용하는데, JavaScript 문법을 그대로 녹여 쓸 수 있다는 점이 신기하면서도 혼란스러웠죠. “분명 프로그래밍 언어인데, 왜 이렇게 디자인 코드처럼 보이지?” 이질감이 느껴졌어요. 특히 웹팩(Webpack)이나 바벨(Babel) 같은 번들러 설정이 익숙하지 않던 시절에는 JSX가 브라우저에서 바로 실행되지 않는다는 점 때문에 더 어렵게 느껴지기도 했습니다. 마치 해외에 처음 나와서 현지 언어와 문화를 익히는 기분이었죠.
“JSX, 그냥 HTML 아니야?” 헛된 희망에 빠지다
초반에는 ‘JSX는 그냥 HTML에 JavaScript 몇 줄 섞어 쓰는 거겠지’라는 안일한 생각으로 접근했어요. 그래서 공식 문서나 여러 튜토리얼을 보면서도 HTML과 비슷한 부분만 눈에 띄게 보고 넘기곤 했습니다. 예를 들어, `
구글링, 유튜브… 쏟아지는 정보 속 길 잃기
혼자 힘으로는 해결이 안 되니 당연히 검색의 힘을 빌리게 됩니다. 구글에서 ‘React JSX’를 검색하면 수많은 블로그 글과 스택 오버플로우 질문들이 쏟아져 나왔죠. 어떤 글에서는 ‘JSX는 JavaScript XML의 약자’라고 설명하고, 다른 글에서는 ‘JSX는 UI를 만들기 위한 문법 확장’이라고 정의했어요. 또 어떤 영상에서는 JSX를 리액트 없이도 사용할 수 있는 것처럼 설명하기도 하고, 또 다른 자료에서는 JSX를 꼭 써야 한다고 강조하기도 했죠. 정보는 넘쳐났지만, 오히려 핵심이 무엇인지, 나에게 필요한 정보가 무엇인지 구분하기가 더 어려웠습니다. 마치 서점에 가서 관련 서적을 전부 다 읽으려고 하는 것처럼, 너무 많은 정보에 압도당해 오히려 무엇부터 시작해야 할지 막막해지는 상황이었죠.
JSX, 왜 헷갈리는 걸까? 근본적인 이유 분석
돌이켜보면 JSX가 헷갈렸던 가장 큰 이유는, 우리가 익숙한 HTML과 JavaScript라는 두 가지 언어의 문법이 섞여 있었기 때문입니다. HTML은 마크업 언어이고, JavaScript는 프로그래밍 언어라는 명확한 구분 속에서 살다가, 둘의 경계가 모호해지는 JSX를 만나니 혼란스러울 수밖에 없었죠. 특히 JSX 안에서 JavaScript 표현식을 사용하거나, 조건부 렌더링을 하는 부분은 HTML만 알아서는 절대 이해할 수 없는 영역이었습니다. 마치 영어 단어와 한국어 단어가 뒤섞인 문장을 보고 당황하는 것과 같았어요.
내가 JSX를 처음 접했을 때, 혼란스러웠던 두 가지 기준은 다음과 같습니다.
- JS 표현식 사용 여부: `{ }` 중괄호 안에 JavaScript 변수나 함수 호출이 들어가는 것을 보고 ‘이게 HTML이야, JS야?’ 하며 혼란스러웠습니다.
- HTML 속성과 JS 문법의 혼용: `class` 대신 `className`, `for` 대신 `htmlFor`처럼 HTML 표준과 다른 속성명을 보면서 ‘왜 이렇게 다를까?’ 의문을 품었습니다.
| 항목 | ❌ 나쁜 예 (Before) | ✅ 좋은 예 (After) |
|---|---|---|
| JSX의 본질 | “HTML과 JavaScript가 섞인 무언가” | “JavaScript를 확장하여 UI를 더 쉽게 작성하기 위한 문법” |
| JS 표현식 사용 | 변수나 함수 호출을 어떻게 써야 할지 몰라 막막함 | `{ 변수 }` 또는 `{ 함수() }` 형태로 자유롭게 사용 가능함을 인지 |
| HTML과의 차이점 | `class`를 `className`으로 바꾸는 것이 어색하고 틀린 것처럼 느껴짐 | JSX는 JavaScript 환경에서 동작하므로 HTML 표준 속성이 아닌 JS 스타일의 속성명을 사용함을 이해 |
JSX, 이것만 알면 헷갈림 끝! 3가지 핵심
이제부터 JSX를 제대로 이해하기 위한 딱 3가지 핵심만 집중적으로 파고들어 보겠습니다. 이 3가지만 확실히 이해해도 JSX 때문에 더 이상 스트레스받을 일은 없을 거예요.
1. JSX 표현식: 중괄호 `{}` 안에 모든 것을 담다
JSX의 가장 큰 특징 중 하나는 바로 중괄호 `{}`를 사용해 JavaScript 표현식을 삽입할 수 있다는 점입니다. 이건 마치 캔버스에 그림을 그릴 때, 붓질 한 번 한 번이 JavaScript 코드 조각이라고 생각하면 쉬워요. 이 중괄호 안에는 변수, 연산, 함수 호출, 심지어 삼항 연산자까지 모든 JavaScript 코드를 넣을 수 있습니다.
- 변수 삽입: `const name = “Alice”;` 와 같은 변수를 `{name}`으로 바로 사용할 수 있습니다.
- 함수 호출: `function getGreeting() { return “Hello”; }` 와 같은 함수도 `{getGreeting()}`으로 호출하여 그 결과를 JSX에 삽입할 수 있습니다.
- 객체 속성 접근: `const user = { name: “Bob” };` 와 같은 객체의 속성도 `{user.name}`으로 가져올 수 있습니다.
예시:
만약 사용자의 로그인 상태에 따라 환영 메시지를 다르게 보여주고 싶다면, 다음과 같이 할 수 있습니다.
const isLoggedIn = true;
const userName = "Charlie";
function App() {
return (
{isLoggedIn ? (
안녕하세요, {userName}님!
) : (
로그인이 필요합니다.
)}
);
}
이처럼 `{}`를 사용하면 동적인 데이터를 HTML처럼 보이는 구조 안에 자연스럽게 녹여낼 수 있습니다.
2. JSX 안에서 JavaScript 변수 사용하기: 변수, 상수, props 모두 OK!
JSX 문법 안에서는 JavaScript 변수, 상수, 그리고 컴포넌트에 전달되는 props까지 모두 자유롭게 사용할 수 있습니다. 이건 마치 레스토랑에서 셰프가 재료(JavaScript 변수)를 가지고 요리(JSX)를 만들어내는 과정과 같아요. React의 핵심은 컴포넌트 재사용인데, 이때 props는 데이터를 전달하는 중요한 통로가 됩니다.
컴포넌트 예시 (부모 컴포넌트):
function ParentComponent() {
const message = "이것은 부모로부터 온 메시지입니다.";
return (
<ChildComponent greeting={message} />
);
}
컴포넌트 예시 (자식 컴포넌트):
function ChildComponent(props) {
return (
<p>{props.greeting}</p>
);
}
여기서 `ChildComponent`는 `ParentComponent`로부터 `greeting`이라는 prop을 받았습니다. 이 `greeting` prop은 `ChildComponent` 안에서 `props.greeting`으로 접근하여 JSX 안에서 사용할 수 있습니다. 마치 스타벅스에서 주문한 음료(props)를 받아들고, 그 음료를 마시기 위해 컵(ChildComponent)을 사용하는 것과 비슷하죠.
주의할 점: 객체나 배열을 JSX에 직접 렌더링하려고 하면 오류가 발생할 수 있습니다. 배열의 경우 `.map()` 메서드를 사용하여 각 요소를 JSX 요소로 변환해야 합니다.
3. JSX 조건부 렌더링: 상황에 따라 다른 UI 보여주기
웹 애플리케이션에서 가장 흔하게 사용되는 기능 중 하나가 바로 조건부 렌더링입니다. 사용자의 로그인 상태, 데이터 로딩 여부, 특정 조건 충족 여부 등에 따라 화면에 보여줄 내용을 다르게 해야 하죠. JSX에서는 이를 위해 여러 방법을 사용할 수 있으며, 가장 대표적인 것이 삼항 연산자와 논리 AND (`&&`) 연산자입니다.
1) 삼항 연산자 (Ternary Operator):
조건 ? 참일 때 보여줄 내용 : 거짓일 때 보여줄 내용
const isLoading = false;
return (
{isLoading ? 로딩 중입니다...
: 데이터 로딩 완료!
}
);
2) 논리 AND 연산자 (`&&`):
조건 && 조건이 참일 때만 보여줄 내용
이 방법은 조건이 참일 때만 특정 요소를 렌더링하고 싶을 때 유용합니다. 조건이 거짓이면 아무것도 렌더링되지 않습니다.
const showError = true;
return (
{showError && <div style={{ color: 'red' }}>오류가 발생했습니다!</div>}
);
미니 케이스:
아이폰 앱 스토어에서 앱 목록을 보여줄 때, 앱이 설치되어 있지 않다면 ‘받기’ 버튼을, 설치되어 있다면 ‘열기’ 버튼을 보여줘야 합니다. 이때 삼항 연산자를 사용하여 사용자 경험을 개선할 수 있습니다.
주의사항: 0을 조건부 렌더링에 사용하면 예기치 않은 동작이 발생할 수 있습니다. JavaScript에서는 0이 참으로 간주되지 않기 때문입니다. 따라서 0을 렌더링해야 하는 상황이라면, 반드시 명시적으로 String(0) 또는 {0}과 같이 감싸주어야 합니다.
마무리하며: JSX, 이제 두렵지 않아요!
JSX의 3가지 핵심, 어떠셨나요?JSX 표현식, JavaScript 변수 사용, 그리고 조건부 렌더링. 이 세 가지 개념만 탄탄히 잡고 나면, JSX는 더 이상 여러분을 괴롭히는 존재가 아니라, 리액트 개발을 더욱 풍부하고 효율적으로 만들어주는 강력한 도구가 될 것입니다. 처음에는 낯설고 어렵게 느껴질 수 있지만, 마치 새로운 언어를 배우듯 꾸준히 사용하고 연습하다 보면 어느새 자연스럽게 익숙해지는 자신을 발견하게 될 거예요.
물론 JSX에는 이 외에도 더 많은 기능과 복잡한 사용 사례들이 존재합니다. 예를 들어, 컴포넌트 안에 직접 함수를 정의하거나, 복잡한 조건부 로직을 처리하는 방법 등등이죠. 하지만 처음부터 모든 것을 알려고 하기보다는, 오늘 알려드린 핵심 3가지부터 확실히 내 것으로 만드는 것이 중요합니다. 마치 아이폰의 기본 기능부터 익히고 나서야 고급 기능들을 탐색하듯이 말이죠.
하나의 예외 상황을 덧붙이자면, 만약 여러분이 아주 기본적인 정적 HTML 페이지를 리액트로 구현해야 하는 경우라면, JSX의 복잡한 기능까지는 몰라도 괜찮을 수 있습니다. 하지만 대부분의 현대적인 웹 애플리케이션에서는 동적인 UI 구현이 필수적이므로, 오늘 배운 JSX의 핵심 개념들은 반드시 알아두는 것이 좋습니다.
이제 JSX 앞에서 망설이지 마세요. 오늘 알려드린 3가지 핵심을 바탕으로 꾸준히 연습하셔서, 리액트 개발 여정에 자신감을 더하시기를 바랍니다!