# 실습하기

## 함수 / 클래스 컴포넌트 

```javascript
import React from "react";
import ReactDOM from "react-dom";

// Functional Component
const App = () => {
   return (
     <div>
       <h1>Hello StackBlitz!</h1>
       <p>Start editing to see some magic happen :)</p>
     </div>
   );
 };

// Class Component
class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello StackBlitz!</h1>
        <p>Start editing to see some magic happen :)</p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

```

## App.js 파일에서 불러오기&#x20;

{% tabs %}
{% tab title="App.js" %}

```javascript
import React from "react";
import "./style.css";

export default function App() {
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
};

```

{% endtab %}

{% tab title="index.js" %}

```javascript
import React from "react";
import ReactDOM from "react-dom";

import App from './App'

ReactDOM.render(<App />, document.getElementById("root"));

```

{% endtab %}
{% endtabs %}

React 요소를 랩핑할 때 `[]` 배열을 이용할 수 있다.&#x20;

```javascript
export default function App() {
  return ([
      <h1>Hello StackBlitz!</h1>,
      <p>Start editing to see some magic happen :)</p>
  ]);
};
```

`<div>`로 묶어줄 수 있다.&#x20;

```javascript
export default function App() {
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}
```

`<></>`로 묶어 줄 수 있다. 이는 `React.Fragment`의 별칭이다.&#x20;

```javascript
export default function App() {
  return (
    <>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
    </>
  );
}

```

{% tabs %}
{% tab title="App.js" %}

```javascript
import React from "react";
import "./style.css";

function Headline(props) {
  return <h1>{props.children}</h1>;
}

function Para(props) {
  return <p className={props.className}>{props.children}</p>;
}

export default function App(props) {
  return [
    <Headline children="Hello StackBlitz!" />,
    React.createElement(Headline, { children: "Hello StackBlitz!" }),
    <Para
      className="paraNode"
      children="Start editing to see some magic happen :)"
    />,
    React.createElement(Para, {
      className: "paraNode",
      children: "Start editing to see some magic happen :)"
    })
  ];
}
```

{% endtab %}

{% tab title="index.js" %}

```javascript
import React from "react";
import ReactDOM from "react-dom";

import App from './App'

ReactDOM.render(<App />, document.getElementById("root"));

```

{% endtab %}

{% tab title="렌더링 결과 " %}
![](/files/-MSr02wOeVw25pIsREKZ)
{% endtab %}
{% endtabs %}

## ReactDOM.render()에 바로 적용&#x20;

{% hint style="warning" %}
JSX 내부에 React.createElement()를 사용할 때는 `{}`로 묶어 사용하기&#x20;
{% endhint %}

{% tabs %}
{% tab title="App.js" %}

```javascript
import React, { Component } from "react";
import "./style.css";

export function Headline(props) {
  return <h1>{props.children}</h1>;
}

export function Para(props) {
  return <p className={props.className}>{props.children}</p>;
}

export default function App(props) {
  return props.children;
}
```

{% endtab %}

{% tab title="index.js " %}

```javascript
import React from "react";
import ReactDOM from "react-dom";
import App, { Para, Headline } from "./App";

ReactDOM.render(
  <App>
    <Headline children="Hello StackBlitz!" />
    {React.createElement(Para, {
      className: "paraNode",
      children: "Start editing to see some magic happen :)"
    })}
  </App>,
  document.getElementById("root")
);

```

{% endtab %}
{% endtabs %}

## 컴포넌트 각 파일로 나누기&#x20;

{% tabs %}
{% tab title="App.js " %}

```javascript
import React, { Component } from "react";
import { Para } from "./Para";
import { Headline } from "./Headline";

export default function App() {
  return [
    <Headline children="Hello StackBlitz!" />,
    React.createElement(Para, {
      className: "paraNode",
      children: "Start editing to see some magic happen :)"
    })
  ];
}

```

{% endtab %}

{% tab title="index.js " %}

```javascript
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

```

{% endtab %}

{% tab title="Headline.js " %}

```javascript
import React from "react";

export function Headline(props) {
  return <h1>{props.children}</h1>;
}

```

{% endtab %}

{% tab title="Para.js " %}

```javascript
import React from "react";

export function Para(props) {
  return <p className={props.className}>{props.children}</p>;
}

```

{% endtab %}
{% endtabs %}

## Stack Blitz 실습&#x20;

{% embed url="<https://stackblitz.com/edit/react-sdy7ny?file=src%2Findex.js>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shhn0509.gitbook.io/react/react-study/start/jsx-react/undefined.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.