[React] JSX 사용법

JSX(JavaScript XML)는 JavaScript와 HTML을 혼합하여 사용하는 문법으로, React와 같은 라이브러리에서 주로 사용됩니다. JSX를 사용하면 UI를 직관적이고 간편하게 작성할 수 있습니다. 아래에서는 JSX의 사용법과 주의사항을 예제와 함께 설명해드리겠습니다.

JSX 사용법

예제

jsx

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

export default App;

위 예제에서는 Welcome이라는 컴포넌트를 정의하고, App 컴포넌트에서 여러 번 사용하고 있습니다. Welcome 컴포넌트는 props.name을 통해 전달된 값을 사용하여 인사말을 표시합니다.

사용법

1. JSX 구문 사용: JSX는 HTML과 매우 유사한 구문을 사용하여 직관적으로 UI를 구성할 수 있습니다.
2. jsx

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

3. 자바스크립트 표현식 포함: JSX 내부에서는 중괄호 {}를 사용하여 JavaScript 표현식을 포함할 수 있습니다.
4. jsx

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

5. 컴포넌트 사용: JSX에서는 사용자 정의 컴포넌트도 사용할 수 있습니다. 컴포넌트 이름은 항상 대문자로 시작해야 합니다.
6. jsx

   function Welcome(props) {
     return <h1>Hello, {props.name}</h1>;
   }
   

7. HTML 속성 사용: JSX에서 HTML 속성을 사용하여 요소의 속성을 설정할 수 있습니다.
8. jsx

   const element = <div tabIndex="0"></div>;
   

9. 자식 요소 포함: JSX 태그는 다른 요소를 자식으로 포함할 수 있습니다.
10. jsx

    const element = (
      <div>
        <h1>Hello!</h1>
        <h2>Good to see you here.</h2>
      </div>
    );
    

주의사항

1. 단일 부모 요소: 모든 JSX 표현식은 단일 부모 요소로 감싸야 합니다.
2. jsx

   return (
     <div>
       <h1>Hello, world!</h1>
       <h2>Good to see you here.</h2>
     </div>
   );
   

3. JavaScript와 HTML 혼합: JSX는 JavaScript와 HTML을 혼합하여 사용하므로, 중괄호 {}를 사용하여 JavaScript 표현식을 포함할 수 있습니다.
4. jsx

   const name = 'Sara';
   return <h1>Hello, {name}</h1>;
   

5. HTML 속성: JSX에서는 HTML 속성을 카멜 표기법으로 사용해야 합니다. 예를 들어, class 대신 className을 사용합니다.
6. jsx

   const element = <div className="container"></div>;
   

7. 컴포넌트 이름: JSX에서 컴포넌트 이름은 반드시 대문자로 시작해야 합니다. 소문자로 시작하는 이름은 HTML 태그로 인식됩니다.
8. jsx

   function Welcome(props) {
     return <h1>Hello, {props.name}</h1>;
   }
   

9. Self-closing 태그: 내용이 없는 요소는 반드시 self-closing 태그로 작성해야 합니다.
10. jsx

    const element = <img src="image.jpg" alt="description" />;
    

JSX를 사용하면 UI를 간편하고 직관적으로 작성할 수 있습니다.