Frontend Academy · 강의

JSX: 문법과 트랜스파일링

JSX를 작성하고 Babel이 이를 React.createElement 호출로 컴파일하는 방식을 이해하며, 루트 요소 하나, className, 자동 닫힘 태그라는 규칙을 적용합니다.

JSX: 문법과 트랜스파일링은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

JSX란 무엇입니까?

JSX(JavaScript XML)는 JavaScript 안에 HTML과 유사한 마크업을 작성할 수 있게 해 주는 구문 확장입니다. 브라우저 기능은 아니며, 실행되기 전에 Babel이나 TypeScript가 JavaScript 함수 호출로 변환합니다.

JSX 변환

Babel은 JSX를 React.createElement() 호출로 변환합니다. 새로운 JSX 변환 방식(React 17 이상)을 사용하면 React를 가져오지 않아도 됩니다. Babel이 필요한 가져오기를 자동으로 삽입하기 때문입니다.

// JSX:
const element = <h1 className="title">Hello</h1>;

// Compiled to (new transform):
import { jsx as _jsx } from 'react/jsx-runtime';
const element = _jsx('h1', { className: 'title', children: 'Hello' });

JSX 규칙: 루트 요소 하나

JSX 표현식에는 루트 요소가 정확히 하나 있어야 합니다. 형제 요소를 <div>로 감싸거나 프래그먼트(<></> 또는 <React.Fragment>)를 사용하여 불필요한 DOM 노드가 추가되지 않게 하십시오.

// Error: adjacent elements need a wrapper
return (
  <h1>Title</h1>
  <p>Body</p>
);

// Use Fragment:
return (
  <>
    <h1>Title</h1>
    <p>Body</p>
  </>
);

className과 htmlFor

JSX 속성에는 camelCase를 사용합니다. class와 for는 JavaScript 예약어이므로 대신 className과 htmlFor를 사용하십시오.

<div className="card active">
  <label htmlFor="email">Email</label>
  <input id="email" type="email" />
</div>

자체 닫는 태그

JSX에서는 모든 태그를 올바르게 닫아야 합니다. 자식이 없는 요소에는 자체 닫는 슬래시를 사용해야 합니다: <img />, <br />, <input />.

JSX의 표현식: {}

중괄호를 사용하면 JSX 안에 모든 JavaScript 표현식을 삽입할 수 있습니다. 변수, 함수 호출, 삼항식, 산술 연산을 모두 사용할 수 있습니다. 문장(if, for)은 사용할 수 없습니다.

const name = 'Alice';
const count = 5;

return (
  <div>
    <h1>Hello, {name}!</h1>
    <p>You have {count} messages.</p>
    <p>Double: {count * 2}</p>
    {isLoggedIn ? <Dashboard /> : <Login />}
  </div>
);

JSX와 문자열

서로 인접한 텍스트와 JSX 표현식은 자동으로 연결됩니다. 요소 안에서 텍스트와 표현식을 자유롭게 섞어 사용할 수 있습니다.

<p>Welcome, {user.name}! You joined on {formatDate(user.createdAt)}.</p>

아무것도 렌더링하지 않기: null과 false

null 또는 false를 반환하면 아무것도 렌더링하지 않습니다. 둘 다 유효한 JSX 값이지만 DOM 출력은 생성하지 않습니다. 조건부 렌더링에 유용합니다.

function Banner({ show }: { show: boolean }) {
  if (!show) return null;  // renders nothing
  return <div className="banner">Important notice!</div>;
}

style 속성 — 객체 구문

JSX의 인라인 스타일에는 문자열이 아니라 객체를 사용합니다. 속성 이름은 camelCase로 작성합니다.

<div style={{ backgroundColor: '#f7fafc', padding: '16px', borderRadius: '8px' }}>
  Styled box
</div>

JSX는 JavaScript입니다

JSX는 JavaScript로 컴파일되므로 JSX를 변수에 넣거나, 함수에서 반환하거나, 속성으로 전달하거나, 배열에 저장할 수 있습니다. React 요소는 일반 JavaScript 객체입니다.

const elements = ['apple', 'banana', 'cherry'].map(fruit => (
  <li key={fruit}>{fruit}</li>
));

return <ul>{elements}</ul>;

TypeScript와 JSX: .tsx 파일

JSX를 포함하는 TypeScript 파일에는 .tsx 확장자를 사용하십시오. TypeScript가 JSX의 타입을 검사하므로 컴파일 시점에 속성 타입 오류와 누락된 속성을 발견할 수 있습니다.

빠른 확인

JSX에서 class 대신 className을 사용하는 이유는 무엇입니까?

복습: JSX

JSX는 React.createElement()를 간결하게 작성하는 구문입니다. 각 표현식에는 하나의 루트 요소나 프래그먼트가 있어야 합니다. 예약어 속성에는 className과 htmlFor를 사용합니다. 비어 있는 요소는 모두 자체적으로 닫습니다. {}를 사용하여 표현식을 삽입합니다. 아무것도 렌더링하지 않으려면 null이나 false를 반환합니다. 인라인 스타일에는 camelCase 객체 구문을 사용합니다. JSX는 JavaScript이므로 값으로 다루십시오.

자주 묻는 질문

“JSX: 문법과 트랜스파일링” 강의는 무료인가요?

네 — “JSX: 문법과 트랜스파일링” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“JSX: 문법과 트랜스파일링”에서 뭘 배우나요?

JSX를 작성하고 Babel이 이를 React.createElement 호출로 컴파일하는 방식을 이해하며, 루트 요소 하나, className, 자동 닫힘 태그라는 규칙을 적용합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“JSX: 문법과 트랜스파일링” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Frontend Academy(으)로 돌아가기