JSX란?

JSX는 JavaScript XML의 약자로, React에서 주로 사용되는 JavaScript 확장 문법입니다. JSX를 사용하면 JavaScript 코드 안에 HTML과 유사한 마크업을 작성할 수 있어, UI 컴포넌트를 더 직관적으로 표현할 수 있습니다.JSX의 주요 특징과 사용법은 다음과 같습니다:

1. HTML과 유사한 문법:
   

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

2. JavaScript 표현식 사용:
   

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

   
   
3. 속성 정의:
   

   const element = <img src={user.avatarUrl} alt="User Avatar" />;

   
   
4. 자식 요소 포함:
   

   const element = (
     <div>
       <h1>Title</h1>
       <p>Paragraph</p>
     </div>
   );

   
   
5. 컴포넌트 렌더링:
   

   function Welcome(props) {
     return <h1>Hello, {props.name}</h1>;
   }
   
   const element = <Welcome name="Sara" />;

JSX의 장점:

1. 가독성 향상: UI 구조를 직관적으로 표현할 수 있습니다.
2. 개발 효율성: JavaScript와 마크업을 한 파일에서 관리할 수 있습니다.
3. XSS 방지: JSX는 값을 자동으로 이스케이프하여 보안을 강화합니다.

주의할 점:

1. JSX는 브라우저에서 직접 실행될 수 없으며, Babel과 같은 도구로 일반 JavaScript로 변환해야 합니다.
2. class 대신 className을 사용해야 합니다.
3. 모든 태그는 닫혀야 합니다 (예: <img />).

JSX는 React 개발을 더 쉽고 효율적으로 만들어주는 강력한 도구입니다. JavaScript의 모든 기능을 활용하면서도 UI를 선언적으로 표현할 수 있게 해줍니다.