JSX 문법

React에서 JSX를 반환할 때는 반드시 하나의 태그로 감싸야 합니다. 여러 개의 태그를 반환하려면, 부모 태그로 감싸야 하며, 빈 태그로 감싸는 것도 가능합니다. 이를 Fragment라고 하며, <>...</> 형태로 사용할 수 있습니다.

 

HTML에서 사용하는 class 속성은 React에서는 className으로 사용해야 합니다. 또한, JSX 내부에 자바스크립트 코드를 삽입하려면 중괄호 {}로 감싸야 합니다.

 

인라인 스타일을 적용할 때는 style 속성에 객체 형태로 값을 전달합니다. 이때, 중괄호 {} 두 개를 사용해야 하는데, 첫 번째 중괄호는 자바스크립트 표현식을 열기 위한 것이고, 두 번째 중괄호는 스타일 객체를 감싸기 위한 것입니다.

 

HTML에서 font-size와 같은 속성은 React에서는 fontSize와 같은 카멜케이스(camelCase)로 작성해야 합니다. 이는 자바스크립트에서 하이픈(-)이 뺄셈 기호로 인식되기 때문입니다.

 

템플릿 리터럴을 사용하여 자바스크립트 변수와 문자열을 결합할 수 있습니다. 예를 들어, `test ${post}` 형식으로 작성하면, post 변수의 값이 test 문자열과 결합됩니다.

 

map 함수를 사용하면 배열을 순회하면서 각 요소에 대해 JSX를 동적으로 생성할 수 있습니다. 이때, 생성된 각 요소에는 고유한 key 속성을 부여해야 React가 효율적으로 요소를 추적할 수 있습니다. 

 

자바스크립트에서 객체 리터럴을 반환할 때는 중괄호 {}를 사용하지만, 이는 코드 블록으로 인식될 수 있습니다. 따라서 객체 리터럴을 반환하려면 중괄호를 괄호 () 로 감싸야 자바스크립트가 이를 코드 블록이 아닌 객체로 인식합니다. (자바스크립트 문법)

 

JSX를 반환할 때 반드시 소괄호로 묶어야 하는 것은 아니지만 여러 줄에 걸쳐 JSX를 작성할 때는 소괄호로 묶는 것이 권장된다.

 

import React from 'react';

function Example() {
  const post = "Hello World";
  const style = {
    backgroundColor: 'lightblue',
    fontSize: '20px'
  };

  const items = ['First', 'Second', 'Third'];

  return (
    <>
      <div className="header">
        <h1 style={style}>{`Welcome to ${post}`}</h1>
      </div>
      <div id="content">
        <img src="https://via.placeholder.com/150" alt="placeholder" />
        <p>{`This is a post: ${post}`}</p>
        <ul>
          {items.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </div>
    </>
  );
}

export default Example;