웹/Javascript

JSX 문법 정리

hihijh826 2025. 3. 19. 11:44
728x90
반응형
SMALL
반응형
  • JSX란 Javascript + XML 의 약자로써 자바스크립트와 XML이 합쳐진 문법이다.
  • JSX는 React에서 UI를 정의하기 위해 사용되는 문법 확장
  • JSX를 사용하면 JavaScript 코드 안에서 태그 기반의 구문을 통해 React 엘리먼트를 직관적으로 정의할 수 있으며, 이를 통해 동적인 UI를 쉽게 구현할 수 있음

❓ XML이란?

  • XML(eXtensible Markup Language) 은 HTML과 같은 마크업 언어이지만, HTML은 데이터를 표현하는 마크업 언어라면, XML은 데이터를 기술하는 언어이다.
  • 예를 들어 HTML에서는 h1, p 같은 이미 만들어진 태그를 사용해야 하지만, XML은 정의된 부분을 제외하고는 사용자가 태그를 임의로 만들 수 있다.
  • 엄밀히 말하자면 XML은 마크업 언어라기 보다 마크업 언어를 정의하기 위한 언어라고 할 수 있다.

 

기존 바닐라 JS는 HTML에서 마크업된 부분을 확인하면서 해당 DOM에 접근하고 Event Listener를 부착하는 등 HTML과 JS는 긴밀하게 연결되어 있음

 

반면

 

JSX는 HTML과 JS 로직을 하나의 JS 파일 안에서 모두 처리한다

작성한 코드는 브라우저에서 동작하기 전에 Babel이라는 transcompiler를 통해 일반 JS 코드 형태로 변환된다

 

 

1. 태그와 속성

  • HTML 태그 사용: JSX에서는 기본적으로 HTML 태그를 사용할 수 있음. 소문자로 시작하는 태그는 HTML 요소로 인식됨.
  • 속성 표기법: HTML 속성은 camelCase로 작성됩니다. 예를 들어, 기존 HTML class는 className, for는 htmlFor로 사용됨.
  • 태그 닫기: 모든 태그는 닫혀야 하며, 닫히지 않는 태그는 self-closing 태그로 작성해야 함.
  • <div> <h1>Hello, React!</h1> <img src="image.png" alt="example" /> </div> //className import './App.css'; function App() { return ( <div className="App"> <div className='black-nav'> <h4>블로그</h4> </div> </div> ); } export default App;
  • 컴포넌트 사용: 대문자로 시작하는 이름의 self-closing 태그로 컴포넌트를 사용할 수 있음.
  • <Header />

 

2. 최상위 엘리먼트

  • JSX는 반드시 하나의 최상위 엘리먼트만 반환해야 한다. 여러 개의 최상위 엘리먼트를 반환하려면 Fragment (<> </>)를 사용함.
// Bad
const Greetings = () => {
	return (
		<h1>Hehllo!</h1>
		<h2>Wellcome!</h2>
	);
}

// Good
const Greetings = () => {
	return (
		<div>
			<h1>김개발님!</h1>
			<h2>위코드에 오신 걸 환영합니다!</h2>
		</div>
	);
}

 

 

  • Fragment : <></>는 <Fragment></Fragment>의 줄임말

최상위를 감싸고 있는 태그에 특별한 의미나 스타일이 없다면 불필요한 요소를 생성하게 됨.

이때 사용되는 것이 React.<Fragment>로 Fragment는 추가적인 DOM element를 생성하지 않고 하나의 컴포넌트 안에 여러 요소(자식)를 간단하게 그룹화 할 수 있는 기능임

// <React.Fragment>
const Greetings = () => {
	return (
		<React.Fragment>
			<h1>김개발님!</h1>
			<h2>위코드에 오신 걸 환영합니다!</h2>
		</React.Fragment>
	);
}

// 축약형 <>...</>
const Greetings = () => {
	return (
		<>
			<h1>김개발님!</h1>
			<h2>위코드에 오신 걸 환영합니다!</h2>
		</>
	);
}

 

3. 중괄호({})와 표현식

  • JSX에서는 {}를 사용해 JavaScript 표현식을 삽입할 수 있다. 이를 통해 동적으로 값을 렌더링하거나 로직을 처리할 수 있다.
export default function App() {
  const name = "React";
  const imageUrl = "https://example.com/image.png";

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <img src={imageUrl} alt="example" />
    </div>
  );
}

 

4. 조건부 렌더링

  • JSX는 자바스크립트를 확장한 문법이므로, 자바스크립트의 조건문을 그대로 사용할 수 있다

 

  • 삼항 연산자: 조건에 따라 다른 JSX를 반환합니다.
    • isLoggedIn이 true이면 "환영합니다!"를, false이면 "로그인을 해주세요."를 표시한다.
    {isLoggedIn ? <p>환영합니다!</p> : <p>로그인을 해주세요.</p>}
  • 논리 연산자: 조건이 true일 때만 특정 JSX를 반환합니다.
    • isLoggedIn이 true일 경우 "로그인되었습니다."를 추가로 표시한다.
    {isLoggedIn && <p>로그인되었습니다.</p>}

 

null 반환: JSX에서 null을 반환하면 아무것도 렌더링되지 않는다. 이를 활용하여 특정 조건에서 UI를 숨길 수 있다.

{showMessage ? <p>메시지를 표시합니다.</p> : null}

 

5. 리스트 렌더링

  • 배열의 map() 메서드를 사용하여 리스트를 렌더링 할 수 있다. 각 요소에 고유한 key 속성을 지정해야 한다.
export default function App() {
  const items = ["Apple", "Banana", "Cherry"];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

 

6. EVENT 처리하기

기존 바닐라 JS에서는 해당하는 DOM 요소에 직접 접근하여 이벤트리스너를 부착하는 방식으로 이벤트를 처리했다면

JSX에서는 태그를 작성할 때 이벤트와 이벤트 핸들러(Event Handler)를 부여할 수 있다.

// JS
const title = document.getElementsByClassName('title')[0];
title.addEventListener('click', handleClick);

// JSX
<h1 className="title" onClick={handleClick}>Welcome to Wecode!</h1>
  • 이벤트 앞에 on을 붙여 camelCase로 작성
  • 문자열이 아닌 함수로 이벤트 핸들러 전달

 

7. 스타일링  style = {{ style} }

  • style 속성은 JavaScript 객체로 전달해야 하며, 객체의 속성 이름은 camelCase로 작성한다 (fontSize) .
  • style 속성은 camelCase를 요소로 가지는 JS 객체를 받기 떄문에 중괄호를 두 번 겹쳐서 쓰는 형태로 사용한다.
<div style={{ color: "blue", fontSize: "20px" }}>Styled Text</div>

 

8. 주석

  • JSX에서 주석을 작성하려면 {/* */}를 사용한다.
{/* 이 부분은 주석입니다 */}

 

9. XSS 방어

  • JSX는 기본적으로 XSS(크로스 사이트 스크립팅) 공격을 방어한다. HTML을 포함한 값을 출력할 때도 안전하게 처리된다.
//HTML
<h1 style="color:red;background-image:yellow">Welcome to Wecode!</h1>

//JSx
<div>{userInput}</div> // 문자열 그대로 렌더링됨

 

10. JSX의 변환

  • JSX는 빌드 과정에서 Babel에 의해 React.createElement() 함수로 변환된다. 이는 브라우저에서 HTML로 렌더링된다.
// JSX
<h1>Hello</h1>

// 변환 후
const element = React.createElement("h1", null, "Hello");

JSX로 마크업 작성하기 – React

 

JSX로 마크업 작성하기 – React

The library for web and native user interfaces

ko.react.dev

 

 

728x90
반응형
LIST