JSX

 

JS의 확장 문법 중 하나로, React에서 UI를 작성하기 위해 사용된다.

JSX는 XML 또는 HTML과 비슷한 문법을 가지고 있어서 React 요소를 더 쉽게 작성하고 이해할 수 있게 도와준다.

XML은 태그(Tag)로 이루어진 문서 구조를 가지고 있다. 태그는 여는 태그와 닫는 태그로 구성되며, 그 안에 데이터가 들어간다. 간단히 말해, XML은 데이터를 계층적이고 태그로 감싸인 구조로 표현하는 마크업 언어이다. 이는 다양한 종류의 데이터를 저장하고 전송하는 데에 유용하게 활용된다.

 

1. 구조적 유사성 :

JSX는 HTML과 유사한 문법을 가지고 있어 React에서 UI를 작성하는 데 편리함을 준다.

const hello = <h1>Hello JSX! </h1>;

 

이 코드에서 `element`는 JSX로 작성된 React 요소이다. 이것은 HTML의 <h1> 태그와 유사하지만, 실제로 React 컴포넌트이다. 

 

2. JSX의 표현식 사용 :

JSX 안에서 중괄호(`{ }`)를 사용하면 JS표현식을 삽입할 수 있다. 이를 통해 동적인 값을 JSX에 포함시킬 수 있다.

const name = '설민';
const element = <p>Hello, {name}. </p> // Hello, 설민.

 

3. JSX의 속성 : 

JSX태그에는 속성을 부여할 수 있다. 이 속성은 HTML태그의 속성과 유사하게 동작한다.

<img src="이미지주소" alt="" />

 

4. JSX의 조건문과 반복문 사용 가능 :

const isLoding = true;
   const element = (
      <div>
         {isLoding ? <p>Welcome, 설민</p> : <p>Loading...</p>}
         {['apple', 'banana', 'tomato'].map((fruit, index) => (
            <li key={index}>{fruit}</li>
         ))}
      </div>
   );

 

5. JSX의 이벤트 처리 :

const handleClick = () => {
      alert('버튼 클릭됨');
};

<button onClick={handleClick}></button>

 

6. JSX의 클래스와 스타일

const element = <h1 className='클래스명' style={{ color: 'red'}}>hello, 설민.</h1>