리액트 props 2

import React from "react";

 

class Person extends React.Component {

render(){

return(

<div>

<h1>이름은{this.Props.name}나이는 :{this.Props.age}</h1>

</div>

)

}

}

// <div>

// <h1>이름은{Props.name}나이는 :{Props.age}</h1>

// </div>

// );

 

export { Person };

 

 

es6버전

import React from "react";

 

class Person extends React.Component {

render(){

const {name,age}=this.props;

return(

<div>

<h1>이름은:{name}나이는 :{age}</h1>

</div>

)

}

}

// <div>

// <h1>이름은{Props.name}나이는 :{Props.age}</h1>

// </div>

// );

 

export { Person };

 

 

 

import React from "react";

import { Person } from "./Person";

import "./styles.css";

 

class App extends React.Component {

render() {

return (

<div className="App">

<Person name={"박성준"} age={26}/>

<Person name={"홍길동"} age={10}/>

<Person name={"이순신"} age={35}/>

</div>

);

}

}

 

export default App;