JSX (JavaScript XML)

📌 JSX(JavaScript XML) 란?

React에서 사용하는 자바스크립트의 확장 문법

주로 React 컴포넌트를 작성하는 데 사용된다. JSX는 HTML과 매우 유사한 구조를 가지고 있어서, 기존에 익숙한 HTML 태그와 속성을 사용하여 React 컴포넌트를 작성할 수 있게 해준다.

📌 JSX 문법 특징 8가지

1. JSX element

JSX 문법을 사용하여 p 태그 안에 "Hello, World!" 텍스트를 갖는 JSX element를 생성한다.

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

2. JS 표현식

JSX 안에서 중괄호({})를 사용하여 JS 표현식을 출력할 수 있다. 아래 예시에서는 name 변수를 출력하고, 결과로 <h1>Hello, John!</h1>이 생성된다.

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

3. JSX attribute(속성)

JSX에서 태그의 속성은 camelCase로 작성한다다. 따라서, class 대신 className을 사용해야 한다.

const App = () => {
  return <div className="container">Welcome to React!</div>;
}

4. Event 처리하기

JSX에서 이벤트 핸들러를 부여하는 방법은 onClick과 같이 이벤트 이름에 on을 붙이고 camelCase로 작성하며, 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.

const Button = () => {
  const handleClick = () => {
    alert('Button Clicked!');
  };
  
  return <button onClick={handleClick}>Click Me</button>;
};

5. Inline Styling

JSX에서 스타일을 적용할 때는 객체 형태로 작성해야 하기 때문에 중괄호를 두 번 겹쳐서 쓰는 형태로 사용한다.
바깥의 { }는 JSX 문법을 의미하고 안쪽의 { }는 JS 객체를 의미한다.
하지만, inline styling은 css보다 성능이 낮고 우선순위가 높아 동적으로 계산하여 스타일링 하는 경우 이외에는 사용을 지양하는 것이 좋다.

<h1 style={{ color: "red", backgroundImage: "yellow" }}>
  Hello, Jihye!
</h1>

6. Self-Closing Tag

<img>와 같이 하나의 태그가 요소인 경우, 항상/으로 끝내줘야 한다.

const Image = () => {
  return <img src="example.jpg" alt="Example" />;
};

7. Nested JSX

반드시 최상위를 감싸고 있는 태그가 하나 있어야 한다.

const App = () => {
  return (
    <div>
      <h1>Hello</h1>
      <p>World!</p>
    </div>
  );
};

8. React.Fragment

최상위를 감싸고 있는 태그에 특별한 의미나 스타일이 없다면 불필요한 요소를 생성하게 된다.
이때 사용하는 것이 <React.Fragment>인데, Fragment는 추가적인 DOM element를 생성하지 않고 하나의 컴포넌트 안에 여러 요소(자식)를 간단하게 그룹화 할 수 있는 기능이다. <> </> 으로 축약해서 사용할 수 있다.

const List = () => {
  return (
    <React.Fragment> // <>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </React.Fragment>  // </>
  );
};