[React] JSX 문법

복습

https://shins99.tistory.com/62

[React] JSX (JavaScript XML)

---

JSX과 XML

- XML 문서는 매우 규칙적이고 엄격

- JSX는 XML 구문에 자바스크립트 코드를 결합한 구문을 사용

- JSX 구문을 작성할 때도 XML과 마찬가지로 XML 표준을 엄격하게 준수

 

JSX 구문이 Babel을 통해 자바스크립트 구문으로 제대로 변환되기 위한 규칙

 

1. 요소는 반드시 닫혀야 함

 

- JSX에서는 반드시 요소를 닫아야 오류 발생 안함

export default function App() {
  return (
    <div>
      <h1>Hello, World!
    </div>
  );
}

- (위의 코드처럼 <h1>요소를 닫지 않고 JSX 코드를 저장하면 아래와 같은 오류를 발생)

Console
Cannot assign to read only property 'message' of object 'SyntaxError: /src/App.js: Unterminated JSX contents. (5:10)
 
3 | <div>
4 | <h1>Hello, World!
> 5 | </div> | ^
6 | );
7 | }
8 |'

 

- <img>나 <br>요소와 같은 빈 요소(void elements)도 반드시 슬래시(/)를 사용하여 self-closing을 해 줘야 함

(Self-closing에서 슬래시(/) 기호 앞의 띄어쓰기는 선택사항)

export default function App() {
  return (
    <div>
      <h1>Void Elements</h1>
      <hr />
      <input type="text" name="name" />
    </div>
  );
}

2. 컴포넌트에는 최상위 요소가 단 하나만 존재

 

- 컴포넌트가 여러 개의 요소를 한 번에 반환 위해 React에서 컴포넌트의 최상위 요소가 하나만 존재하도록 강제

<h1>과 <p>요소 이렇게 2개의 최상위 요소가 존재 = 오류 발생export default function App() {
  return (
    <h1>Hello, World!</h1>
    <p>React도 안녕!</p>
  );
}

 

최종 렌더링된 HTML 코드

<div id="root">
    <div>
      <h1>Hello, World!</h1>
      <p>React도 안녕!</p>
    </div>
</div>

- React DOM에 의해 관리되는 모든 요소들은 최종적으로 id 속성값이 root인 <div>요소 안에 렌더링 됨

 (이 <div>요소 =  루트 DOM 노드)

 

Fragment기능

 

- React v16부터 불필요한 <div>요소의 사용을 재고하기 위해 Fragment기능 추가

-  <fragment>요소를 최상위 요소로 사용하면 별도의 요소 추가없이 여러 자식 요소 그룹화 가능

( HTML 페이지에는 실제 렌더링 X = 최종 결과물에 불필요한 요소가 추가 없음)

export default function App() {
  return (
    <fragment>
      <h1>Hello, World!</h1>
      <p>React도 안녕!</p>
    </fragment>
  );
}

최종 렌더링된 HTML 코드

<div id="root">
  <h1>Hello, World!</h1>
  <p>React도 안녕!</p>
</div>

 Fragment 축약형 문법 

 

- 축약형 문법에서는 키(key), 속성(attribute) 사용 불가

export default function App() {
  return (
    <>
      <h1>Hello, World!</h1>
      <p>React도 안녕!</p>
    </>
  );
}

 

3. 자바스크립트 표현식은 중괄호({})로 감싸야 함

 

- JSX 구문에서 자바스크립트 표현식을 사용할 시 반드시 중괄호({})로 감싸야 정상적 컴파일 가능

export default function App() {
  const name = "홍길동";
  return <h1>Hello, {name}</h1>;
}

JSX 주석

 

- JSX 구문에 중괄호({})로 감싸기만 하면 자바스크립트 주석(comment) 사용 가능

export default function App() {
  return (
    <>
      {/* 주석의 내용은 렌더링 X */}
      /* 중괄호로 감싸지 않으면 주석의 내용이 그대로 렌더링됨 */
      <h1>Hello, World!</h1>
      {
        // 한 줄 주석
      }
      <p>React도 안녕!</p>
      {/* 여러 줄
        주석 */}
    </>
  );
}

 

잘못된 코드

export default function App() {
  return (
    <>
      <h1>Hello, World!</h1>
      {// 한 줄 주석}
    </>
  );
}

 

올바른 코드

export default function App() {
  return (
    <>
      <h1>Hello, World!</h1>
      {
        // 올바른 주석 1
      }
      {/* 올바른 주석 2 */}
    </>
  );
}