실습하기

함수 / 클래스 컴포넌트

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 파일에서 불러오기

App.js

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

index.js

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

import App from './App'

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

React 요소를 랩핑할 때 [] 배열을 이용할 수 있다.

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

<div>로 묶어줄 수 있다.

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

<></>로 묶어 줄 수 있다. 이는 React.Fragment의 별칭이다.

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

App.js

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 :)"
    })
  ];
}

index.js

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

import App from './App'

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

렌더링 결과

ReactDOM.render()에 바로 적용

JSX 내부에 React.createElement()를 사용할 때는 {}로 묶어 사용하기

App.js

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;
}

index.js

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")
);

컴포넌트 각 파일로 나누기

App.js

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 :)"
    })
  ];
}

index.js

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

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

Headline.js

import React from "react";

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

Para.js

import React from "react";

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

Stack Blitz 실습