페이지방식 전체 소스 - 풀스택개발 EastFlag

index.html

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Scoreboard&lt;/title&gt;
  &lt;meta
    name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no"
  /&gt;
  &lt;!--  https://getbootstrap.com/docs/5.0/getting-started/download/ 에서 다운로드--&gt;
  &lt;link rel="stylesheet" href="./bootstrap.css"&gt;
  &lt;link rel="stylesheet" href="./app.css" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="root"&gt;&lt;/div&gt;
&lt;script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"&gt;&lt;/script&gt;
&lt;script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/babel-standalone@6/babel.min.js"&gt;&lt;/script&gt;
&lt;script type="text/babel" src="./app.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Scoreboard</title>

<meta

name="viewport"

content="width=device-width, initial-scale=1, shrink-to-fit=no"

</head>

<body>

</body>

</html>

app.js

const players = [
  {name: 'LDK', score: 30},
  {name: 'HONG', score: 40},
  {name: 'KIM', score: 50},
  {name: 'PARK', score: 60},
];
const Header = (props) =&gt; {
  console.log(props);
  // props는 read only 이다. 아래와 같이 하면 안된다.
  // props.totalPlayers = 12;
  return (&lt;div className="header d-flex justify-content-between align-items-center p-2"&gt;
    &lt;span&gt;Total Score: 0&lt;/span&gt;
    &lt;h1&gt;{props.title}&lt;/h1&gt;
    &lt;span&gt;players: {props.totalPlayers}&lt;/span&gt;
  &lt;/div&gt;)
};
const Player = (props) =&gt; (
  &lt;div className="container"&gt;
    &lt;div className='player row align-items-center'&gt;
      &lt;div className="col-1"&gt;
        &lt;button className="btn btn-danger"
                onClick={() =&gt; props.removePlayer(props.id)}&gt;x&lt;/button&gt;
      &lt;/div&gt;
      &lt;div className="col-8"&gt;
        &lt;span&gt;{props.name}&lt;/span&gt;
      &lt;/div&gt;
      &lt;div className="col-3 counter"&gt;
        &lt;Counter score={props.score} /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
);
class Counter extends React.Component {
  state = {
    score: 0
  };
  incrementScore = () =&gt; {
    console.log(this);
    this.setState(prevState =&gt; {
      return {score: prevState.score + 1}
    });
  }
  decrementScore = () =&gt; {
    this.setState(prevState =&gt; {
      return {score: prevState.score - 1}
    });
  }
  render() {
    return (
      &lt;div className='d-flex justify-content-between align-items-center'&gt;
        &lt;button className='btn btn-info' onClick={this.decrementScore}&gt; - &lt;/button&gt;
        &lt;span&gt;{this.state.score}&lt;/span&gt;
        &lt;button className='btn btn-info' onClick={this.incrementScore}&gt; + &lt;/button&gt;
      &lt;/div&gt;
    );
  }
}
class App extends React.Component {
  state = {
    players: [
      {name: 'LDK', id: 1},
      {name: 'HONG', id: 2},
      {name: 'KIM', id: 3},
      {name: 'PARK', id: 4},
    ]
  };
  handleRemovePlayer = (id) =&gt; {
    this.setState(prevState =&gt; {
      return {
        players: prevState.players.filter(item =&gt; item.id !== id)
      }
    })
  }
  render() {
    return (
      &lt;div className="container p-3"&gt;
        &lt;Header title="My scoreboard" totalPlayers={this.state.players.length} /&gt;
        {/*Players List*/}
        { this.state.players.map(item =&gt;
          &lt;Player name={item.name} key={item.id}
            removePlayer={this.handleRemovePlayer} id={item.id} /&gt;) }
      &lt;/div&gt;
    );
  }
}
ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));

const players = [

{name: 'LDK', score: 30},

{name: 'HONG', score: 40},

{name: 'KIM', score: 50},

{name: 'PARK', score: 60},

];

const Header = (props) => {

console.log(props);

// props는 read only 이다. 아래와 같이 하면 안된다.

// props.totalPlayers = 12;

return (<div className="header d-flex justify-content-between align-items-center p-2">

<span>Total Score: 0</span>

<h1>{props.title}</h1>

<span>players: {props.totalPlayers}</span>

</div>)

};

const Player = (props) => (

<button className="btn btn-danger"

onClick={() => props.removePlayer(props.id)}>x</button>

</div>

<span>{props.name}</span>

</div>

</div>

);

class Counter extends React.Component {

state = {

score: 0

};

incrementScore = () => {

console.log(this);

this.setState(prevState => {

return {score: prevState.score + 1}

});

}

decrementScore = () => {

this.setState(prevState => {

return {score: prevState.score - 1}

});

}

render() {

return (

<span>{this.state.score}</span>

</div>

);

}

class App extends React.Component {

state = {

players: [

{name: 'LDK', id: 1},

{name: 'HONG', id: 2},

{name: 'KIM', id: 3},

{name: 'PARK', id: 4},

]

};

handleRemovePlayer = (id) => {

this.setState(prevState => {

return {

players: prevState.players.filter(item => item.id !== id)

}

})

}

render() {

return (

{/*Players List*/}

{ this.state.players.map(item =>

<Player name={item.name} key={item.id}

removePlayer={this.handleRemovePlayer} id={item.id} />) }

</div>

);

}

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

app.css

/* user defined css */
.header {
  background-color: #733daa;
  color: #ffffff;
}
.player {
  font-size: 1.2em;
  border-bottom: solid 2px #EEEEEE;
  border-left: solid 2px #EEEEEE;
  border-right: solid 2px #EEEEEE;
  letter-spacing: 2px;
  height: 4rem;
}
.counter {
  border-left: solid 2px #DDDDDD;
}

/* user defined css */

.header {

background-color: #733daa;

color: #ffffff;

}

.player {

font-size: 1.2em;

border-bottom: solid 2px #EEEEEE;

border-left: solid 2px #EEEEEE;

border-right: solid 2px #EEEEEE;

letter-spacing: 2px;

height: 4rem;

}

.counter {

border-left: solid 2px #DDDDDD;

}