JSX 주요 문법

 

JSX(JavaScript XML)는 JavaScript의 확장 문법으로, React에서 UI를 작성하기 위해 사용됩니다.

JSX는 XML과 유사한 구문을 가지며, React 엘리먼트를 생성하는 데 사용됩니다.

 

아래는 JSX의 주요 문법에 대한 설명입니다.

---

엘리먼트 생성

: JSX를 사용하여 React 엘리먼트를 생성할 수 있습니다.

  JSX에서는 <태그명> 형식으로 엘리먼트를 작성합니다.

  예를 들어, <div>는 HTML에서와 같이 <div></div>로 작성할 수 있습니다.

const element = <div>Hello, World!</div>;

 

JSX 표현식

: JSX에서 중괄호 {}를 사용하여 JavaScript 표현식을 삽입할 수 있습니다.

  이를 통해 변수, 함수 호출, 산술 연산 등을 JSX 내에서 사용할 수 있습니다.

  예를 들어, <div>{count}</div>는 변수 count의 값을 보여 줍니다.

const name = "John";
const greeting = <div>Hello, {name}!</div>;

 

속성(props) 전달

: JSX에서 엘리먼트에 속성(props)을 전달할 수 있습니다.

  속성은 엘리먼트의 특징이나 동작을 지정하는 데 사용됩니다.

  속성은 HTML에서와 같이 태그에 속성명="값" 형식으로 전달합니다.

  예를 들어, <img src="image.jpg" alt="이미지" />는 src와 alt 속성을 가진 이미지 엘리먼트를 생성합니다.

const image = <img src="image.jpg" alt="Image" />;

 

클래스와 스타일 지정

: HTML 클래스와 마찬가지로 JSX에서도 클래스를 지정할 수 있습니다.

  JSX에서는 className 속성을 사용하여 클래스를 지정합니다.

  예를 들어, <div className="container">...</div>와 같이 클래스를 적용할 수 있습니다.

  또한, 인라인 스타일을 지정할 때는 객체 형태로 스타일을 전달합니다.

  예를 들어, <div style={{ color: "red", fontSize: "16px" }}>...</div>와 같이 스타일을 지정할 수 있습니다.

const container = <div className="container">Content</div>;

const styles = {
  color: "red",
  fontSize: "16px",
};

const styledElement = <div style={styles}>Styled Element</div>;

 

조건문과 반복문

: JSX에서는 JavaScript의 조건문(if, 삼항 연산자)과 반복문(map, forEach 등)을 사용할 수 있습니다.

  조건문은 중괄호 {} 안에서 사용하고, 반복문은 JSX 내에서 자바스크립트 코드로 처리하여 엘리먼트를 동적으로 생성할 수 있습니다.

const isLoggedIn = true;

const loginStatus = (
  <div>
    {isLoggedIn ? <p>Welcome, User!</p> : <p>Please login.</p>}
  </div>
);

const numbers = [1, 2, 3, 4, 5];
const numberList = (
  <ul>
    {numbers.map((number) => (
      <li key={number}>{number}</li>
    ))}
  </ul>
);

 

이벤트 처리

: JSX에서 이벤트 처리는 HTML과 유사한 방식으로 이루어집니다.

  이벤트 핸들러 함수를 JSX 내에서 정의하고, 이벤트 이름을 소문자로 사용하여 이벤트와 연결합니다.

  예를 들어, <button onClick={handleClick}>Click</button>와 같이 클릭 이벤트 핸들러 함수 handleClick을 연결할 수 있습니다.

function handleClick() {
  console.log("Button clicked");
}

const button = <button onClick={handleClick}>Click me</button>;

 

위의 내용은 JSX의 주요 문법을 간략히 설명한 것입니다. JSX는 유연하고 표현력이 뛰어나며, React에서 컴포넌트와 UI를 작성하는 데 매우 유용한 도구입니다.