JSX 문법 및 React 컴포넌트의 개념

JSX(JavaScript XML)는 React에서 UI를 표현하기 위한 문법입니다. JSX는 JavaScript의 확장 문법으로, HTML과 유사하지만 JavaScript 코드로 작성할 수 있습니다. JSX를 사용하면 React 엘리먼트를 효과적으로 작성하고 가독성을 높일 수 있습니다.

JSX 문법:

1. React 엘리먼트 생성:
   • JSX를 사용하여 React 컴포넌트의 UI를 작성할 때는 각 요소를 HTML 태그처럼 사용합니다.

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

2. JavaScript 표현식 삽입:
   • 중괄호 {}를 사용하여 JavaScript 표현식을 JSX에 삽입할 수 있습니다.

const name = "World";
const element = <p>Hello, {name}!</p>;

3. 속성과 이벤트 처리:
   • JSX에서는 HTML과 유사하게 속성을 사용할 수 있으며, 이벤트 처리도 가능합니다.

const handleClick = () => {
  alert("Button Clicked!");
};

const element = <button onClick={handleClick}>Click me</button>;

4. 조건부 렌더링:
   • 삼항 연산자나 논리 연산자를 사용하여 조건부로 요소를 렌더링할 수 있습니다.

const isLoggedIn = true;

const element = (
  <div>
    {isLoggedIn ? <p>Welcome User!</p> : <p>Please log in</p>}
  </div>
);

React 컴포넌트의 개념:

React 컴포넌트는 UI를 작성하는 독립적인 모듈로, 재사용 가능하고 구조적으로 나눌 수 있는 단위입니다.

1. 함수형 컴포넌트:
   • 함수형 컴포넌트는 JavaScript 함수로 정의되며, return 문을 통해 JSX를 반환합니다.

import React from 'react';

const MyComponent = () => {
  return <h1>Hello, Functional Component!</h1>;
};

export default MyComponent;

2. 클래스형 컴포넌트:
   • 클래스형 컴포넌트는 React.Component 클래스를 상속하고, render 메소드를 통해 JSX를 반환합니다.

import React, { Component } from 'react';

class MyClassComponent extends Component {
  render() {
    return <h1>Hello, Class Component!</h1>;
  }
}

export default MyClassComponent;

3. 프롭스 (Props):
   • 컴포넌트에 데이터를 전달할 때 사용되는 개념으로, 함수형 컴포넌트의 매개변수처럼 사용됩니다.

const Greet = (props) => {
  return <p>Hello, {props.name}!</p>;
};

// 사용 예시
<Greet name="John" />;

4. 상태 (State):
   • 클래스형 컴포넌트에서 사용되는 상태 관리 개념으로, 컴포넌트의 내부 상태를 저장하고 업데이트할 수 있습니다.

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

export default Counter;

React 컴포넌트를 사용하면 재사용성과 유지보수가 용이하며, JSX를 통해 선언적이고 가독성 있는 UI를 구현할 수 있습니다.