[React] JSX(JavaScript XML)

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.

https://react.vlpt.us/

---

1.JSX(JavaScript XML)

JSX(JavaScript XML)는 리액트에서 UI를 정의할 때 사용하는 문법 확장입니다. JSX는 JavaScript 코드 안에서 HTML과 유사한 구문을 사용할 수 있게 해주며, 이를 통해 컴포넌트의 구조를 더 직관적이고 읽기 쉽게 작성할 수 있습니다.

 

 

 

2.JSX 특징

2-1.HTML과 유사한 문법

JSX는 XML/HTML과 매우 유사한 문법을 사용하여 UI 구조를 정의합니다.
이를 통해 UI를 정의할 때 더 직관적이고 읽기 쉽게 만들 수 있습니다.

const element = <h1>Hello, world!</h1>;

 

 

2-2.JavaScript 표현식 포함 가능

JSX 안에서는 중괄호 {}를 사용하여 JavaScript 표현식을 포함할 수 있습니다.

const name = 'John';
const element = <h1>Hello, {name}!</h1>;

 

 

 

2-3.JSX는 객체를 반환

JSX 표현식은 React.createElement() 호출로 변환되며,
이는 JavaScript 객체를 반환합니다.
이 객체는 리액트의 가상 DOM(Virtual DOM)에서 사용됩니다.

JSX 예시

const element = <h1 className="greeting">Hello, world!</h1>;​

변환된 JavaScript 코드

const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, world!'
);​

변환된 객체

const element = (
  <div>
    <h1 className="title">Hello, world!</h1>
    <p>This is a paragraph.</p>
  </div>
);​

 

 

 

2-4.JSX 속성

JSX에서는 HTML 속성과 유사한 방법으로 속성을 정의할 수 있습니다.
단, class 대신 className, for 대신 htmlFor와 같이 일부 속성은 JavaScript 예약어와의 충돌을 피하기 위해 다른 이름을 사용합니다.

 

 

2-5.자식 요소

JSX 요소는 다른 JSX 요소를 자식으로 포함할 수 있습니다.

const element = (
  <div>
    <h1>Hello!</h1>
    <p>Welcome to my website.</p>
  </div>
);

 

 

 

 

3.꼭 감싸져야하는 태그

두개 이상의 태그는 무조건 하나의 태그로 감싸져있어야 합니다.

function App() {
  return (
    <>
      <Hello />
      <div></div>
    </>
  );
}

 

 

 

 

 

4.style,className

인라인 스타일은 객체 형태로 작성후 camelCase 형식으로 네이밍한다.(소문자시작, 띄어쓰기 대신 대문자)

 

function App() {
  const style = {
    backgroundColor: 'black',
  }
}