JSX

JSX 구조와 규칙

JSX는 JavaScript XML의 약자로, React에서 HTML을 작성할 때 사용하는 문법입니다. JSX를 사용할 때 몇 가지 중요한 규칙이 있습니다.

단일 루트 요소
JSX에서 반환할 때는 반드시 하나의 최상위 요소가 있어야 합니다. 즉, 여러 개의 HTML 요소를 평행하게 반환할 수 없으며, 하나의 부모 요소로 감싸야 합니다.

// 올바른 예시
return (
  <div>
    <h1>Hello</h1>
    <p>Welcome to React</p>
  </div>
);

// 오류 발생 예시
return (
  <h1>Hello</h1>
  <p>Welcome to React</p>
);

이 규칙을 지키기 위해, div태그 나 section테그 등의 요소로 감싸거나, <></> (빈 Fragment)를 사용할 수 있습니다. Fragment는 불필요한 DOM 요소를 추가하지 않으면서 여러 요소를 그룹화할 수 있습니다.

return (
  <>
    <h1>Hello</h1>
    <p>Welcome to React</p>
  </>
);

class 속성 사용

HTML에서 class 속성은 CSS 클래스를 지정할 때 사용됩니다. 하지만 JSX에서는 class가 JavaScript의 예약어(클래스 정의에 사용)와 겹치기 때문에 className을 사용해야 합니다.

// JSX에서 CSS 클래스 적용
return (
  <div className="my-class">
    Hello
  </div>
);

데이터 바인딩

JSX 안에 JavaScript 변수를 포함하고 싶다면, 중괄호 {}를 사용하여 변수를 삽입할 수 있습니다. 이를 데이터 바인딩이라고 합니다.

let name = 'Kim';
return (
  <div>
    <h1>Hello {name}!</h1>
  </div>
);

속성에 변수 사용

HTML 속성에도 변수를 사용할 수 있으며, 이때도 중괄호 {}를 사용합니다.

let link = "https://google.com";
return (
  <a href={link}>Go to Google</a>
);

인라인 스타일링

JSX에서 스타일을 직접 지정할 때는 style 속성에 JavaScript 객체를 전달합니다. 이 객체는 CSS 속성을 카멜케이스(CamelCase) 형식으로 작성해야 합니다.

return (
  <p style={{ color: "red", fontSize: "40px" }}>
     style
  </p>
);

리스트 렌더링

JSX를 사용하여 배열을 렌더링할 때는 map 함수를 사용하여 각 요소를 JSX로 변환할 수 있습니다.

let fruits = ['Apple', 'Banana', 'Cherry'];
return (
  <ul>
    {fruits.map((fruit, index) => (
      <li key={index}>{fruit}</li>
    ))}
  </ul>
);

조건부 렌더링

조건부 렌더링을 위해 JavaScript의 삼항 연산자나 논리 연산자를 사용할 수 있습니다.

let isLoggedIn = true;
return (
  <div>
    {isLoggedIn ? <p>Welcome!</p> : <p>Please log in</p>}
  </div>
);

또는 AND 연산자 &&를 사용하여 조건이 참일 때만 렌더링할 수도 있습니다.

let showMessage = true;
return (
  <div>
    {showMessage && <p>Hello!</p>}
  </div>
);