JSX props (body 이용)

import logo from './logo.svg';

import './App.css';

import zzang from './assets/zz.jfif'

 

//자식 컴포넌트

const Avatar = (props)=>{

  console.log(props);

 

  var username = props.username;

  var age = props.age;

  var children = props.children

  // children 안에 h2태그, img 태그 내용이 들어가있음

 

  return (

    <div className="Avatar">

      이름: {username}<br></br>

      나이: {age}<br></br>

      {children}<br></br>

    </div>

  );

};

//부모 컴포넌트

function App() {

 

  const person={username:"홍길동", age:20}

 

  return (

    <div className="App">

      <h1>App 컴포넌트</h1>

 

      <Avatar {...person}>

        <h2>사진</h2>

        <img src={zzang} width="300" height="300" />

      </Avatar>

 

    </div>

  );

}

 

export default App;