React 기초 문법

1. JSX: JSX는 JavaScript와 XML을 결합한 문법으로, React에서 UI 구성 요소를 작성하는 데 사용됩니다. JSX는 JavaScript의 확장 문법이며, 컴포넌트의 구조를 선언하는 데 도움이 됩니다. 예를 들면 다음과 같습니다:

 

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>This is a React component.</p>
    </div>
  );
}

 

 

2.컴포넌트: React에서 UI를 작성하는 기본 단위입니다. 컴포넌트는 재사용 가능하며, 독립적으로 동작할 수 있습니다. 컴포넌트는 함수 형태나 클래스 형태로 작성할 수 있습니다.

 

import React from 'react';

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

 

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

 

 

3. State: 컴포넌트 내에서 관리되는 상태 값입니다. state는 컴포넌트의 동적인 데이터를 저장하고, 변경될 때마다 컴포넌트를 다시 렌더링합니다. 클래스형 컴포넌트에서만 사용할 수 있습니다.

 

 

import React, { Component } from 'react';

class MyComponent 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>
    );
  }
}

 

 

4. 이벤트 처리: React에서는 이벤트를 다룰 때 일반적인 JavaScript와 유사한 방식을 사용합니다. 이벤트 핸들러 함수를 작성하고, 이벤트를 처리할 요소에 등록하는 방식입니다.

 

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}