ReactJS _ JSX란?

 

JSX는 JavaScript XML의 약자로, JavaScript를 확장한 문법입니다. JSX는 React에서 주로 사용되며, HTML과 유사한 문법으로 UI 컴포넌트를 정의합니다. JavaScript 코드 내에서 HTML 태그를 직접 작성할 수 있도록 해주어 코드의 가독성과 유지보수성을 높여줍니다. JSX는 브라우저가 이해할 수 있도록 Babel과 같은 컴파일러를 통해 JavaScript 코드로 변환됩니다.

 

 

JSX의 특징

1. HTML과 유사한 문법

• JSX는 JavaScript 코드 안에 HTML과 비슷한 태그를 작성할 수 있습니다.

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

// 컴파일 시 변환되는 결과물
const element = React.createElement('h1', null, 'Hello, world!');

 

 

2. JavaScript 표현식 사용

• JSX 내부에서는 중괄호를 사용하여 JavaScript 표현식을 삽입할 수 있습니다.

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

console.log(greeting);
// <h1>Hello, John!</h1>

 

 

3. HTML 속성 대신 CamelCase 속성 사용

• JSX는 HTML 속성이 아닌 DOM API 속성명을 사용합니다.
• class 대신 className, for 대신 htmlFor를 사용합니다.

const button = <button className="btn-primary">Click Me!</button>;

 

 

4. 닫는 태그 필수

• 모든 JSX 요소는 닫는 태그가 필요합니다.

<img src="image.png" />

 

 

JSX의 장점과 단점

장점

• 가독성 향상
  HTML과 JavaScript 코드가 하나의 파일에 통합되어 코드가 더 직관적입니다.
  
  
• 컴포넌트 기반
  JSX를 사용하여 UI를 컴포넌트 단위로 나누어 재사용이 용이합니다.
  
  
• 디버깅 편리성
  JSX는 브라우저의 React DevTools와 함께 사용하면 UI 디버깅이 쉬워집니다.

 

단점

• 빌드 과정 필요
  브라우저가 JSX를 바로 실행할 수 없으므로 Babel 같은 컴파일러가 필요합니다.
  
  
• React 종속적
  JSX는 React에 최적화되어, 다른 라이브러리에서는 기본적으로 지원하지 않습니다.
  
  
• 초기 설정 복잡성
  JSX를 사용하기 위해서는 Babel 및 Webpack 설정이 필요할 수 있습니다.

 

예제 코드

1. 간단한 컴포넌트 작성

function Welcome(props) {
    // props를 받아 JSX를 반환
    return <h1>Hello, {props.name}!</h1>;
}

const element = <Welcome name="John" />;
// ReactDOM.render()를 사용해 element를 HTML DOM에 렌더링
ReactDOM.render(element, document.getElementById('root'));

 

2. 조건부 렌더링

function Greeting(props) {
    // isLoggedIn 속성에 따라 다른 메시지를 렌더링
    if (props.isLoggedIn) {
        return <h1>Welcome back!</h1>;
    }
    return <h1>Please sign up.</h1>;
}

const element = <Greeting isLoggedIn={true} />;
ReactDOM.render(element, document.getElementById('root'));

 

3. 반복 렌더링

function ListItems(props) {
    // map() 메서드를 사용하여 배열의 항목을 li 요소로 변환
    // key 속성은 각 항목을 고유하게 식별하기 위해 사용
    return (
        <ul>
            {props.items.map((item, index) => {
                <li key={index}>{item}</li>
            ))}
        </ul>
    );
}

const items = ["Apple", "Banana", "Cherry"];
const element = <ListItems items={items} />;
ReactDOM.render(element, document.getElementById('root'));

 

 

---

 

 

JSX는 JavaScript 코드 내에서 직관적으로 UI를 작성할 수 있도록 도와주는 강력한 문법입니다. 이를 통해 HTML과 JavaScript 코드를 통합하여 React 컴포넌트를 작성할 수 있으며, 코드의 가독성과 유지보수성이 향상됩니다. JSX의 사용법을 잘 이해하면 보다 생산적으로 React 애플리케이션을 개발할 수 있습니다. 그러나 JSX는 컴파일 과정이 필요하므로, 개발 환경 설정에 대한 이해도 중요합니다.