React_외부파일 js를 사용한 Avatar

App.js

import Avatar, {Avatar2} from "./components/Avatar"      //외부 파일 Avatar

import Member from "./components/Member"                 //외부 파일 Member

export default function App(){

  const addr = "서울";

  const chul = {name: "유관순", age: 10, address: "부산"};

  return (

    <div>

      {/* 문자열을 제외한 모든 값을 전달할 때는 반드시 중괄호 사용 */}

      <h1>외부 파일 Avatar</h1>

      {/* jsx주석: 매개변수에서 직접 분해 가능 */}

      회원0: <Avatar></Avatar>

      회원1: <Avatar name="홍길동" age={20} address={addr}></Avatar>

      <br></br>

     

      회원2: <Avatar {...chul}></Avatar>

      <br></br>

     

      회원3: <Avatar name="이순신" age={50}></Avatar>

      <br></br>

     

      Avatar2: <Avatar2 name="aaa" age={20} address="bbb"></Avatar2>

      <br></br>

      Member: <Member person={{age: 20, address: addr}}></Member>

      <br></br>

    </div>

  )

};

 

Avatar.js

function Avatar(props){

    const {name, age, address="제주"} = props;

    return (

        <div>

            이름: {name}

            <br></br>

            나이: {age}

            <br></br>

            주소: {address}

            <br></br>

        </div>

    )

}

export function Avatar2(props){

    const {name, age, address="제주"} = props;

    return (

        <div>

            이름: {name}

            <br></br>

            나이: {age}

            <br></br>

            주소: {address}

            <br></br>

        </div>

    )

}

export default Avatar;

 

Member.js

 

/* export default function Member({person}){

    const {name="홍길동", age, address} = person;

    return (

        <div>

            이름: {name}

            <br></br>

            나이: {age}

            <br></br>

            주소: {address}

            <br></br>

        </div>

    )

} */

export default function Member(props){

    const {person} = props

    const {name="홍길동", age, address} = person;

    return (

        <div>

            이름: {name}

            <br></br>

            나이: {age}

            <br></br>

            주소: {address}

            <br></br>

        </div>

    )

}