[React] 리액트 기본 예제 (클래스 선언, 객체할당)

예제 1. 변수 선언해서 뿌리기. (Function Component)

src/App.js

import logo from './logo.svg';
import './App.css';
import { useEffect } from 'react';

function App() {
  let a = 'hello';

  return (
    <div className="App">
       Learn React {a}
    </div>
  );
}

export default App;

출력화면

 

 

예제 2. 클래스 선언 후, 객체 할당해서 웹에 뿌리기

src/App.js

import './App.css';
import {Player} from './player.js';

function App() {
  let p = new Player("HongilDong");

  return (
    <div className="App">
      이름은 : {p.name} <br></br>
      이름은(getName) : {p.getName()} <br></br>
      값은 : {p.a} <br></br>
    </div>
  );
}

export default App;

 

src/player.js

export class Player {
    constructor(name) {
        this.name = name;
        this.a = 3;
    }

    getName() {
        return this.name;
    }
}

출력화면