React_Avatar

 

import "./App.css"

/* Avatar */

function Avatar(props){

  console.log(props);   //  {name: "홍길동", age: 20, addr: "서울"};

  const {name, age, address = "제주"} = props;               //기본값

  return (

    <div>

      이름: {name}

      <br></br>

     

      나이: {age}

      <br></br>

     

      주소: {address}

      <br></br>

     

    </div>

  )

}

function Avatar2({name2 = "강감찬", age2, address2}){

  /* 객체의 분해 할당 */

  return (

    <div>

      이름: {name2}

      <br></br>

      나이: {age2}

      <br></br>

      주소: {address2}

      <br></br>

    </div>

  )

}

function Member({person}){                //JSON: props대신 {person}으로 받음

  const {name, age, address} = person     //props 대신 person

  return(

    <div>

      이름: {name}

      <br></br>

     

      나이: {age}

      <br></br>

     

      주소: {address}

      <br></br>

    </div>

  )

}

function Member2(props){                

  const {person} = props;                 //JSON: props대신 {person}으로 받음

  const {name, age, address} = person     //props 대신 person

  return(

    <div>

      이름: {name}

      <br></br>

     

      나이: {age}

      <br></br>

     

      주소: {address}

      <br></br>

    </div>

  )

}

function App(){

  const addr = "서울";                                        //덮어쓰기

  const chul = {name: "유관순", age: 18, address: "부산"};    //아바타에 대입

  console.log(chul);

  const ages = 10;

  return (

    <div>

      <h1>Avatar</h1>

     

      {/*

          문자열을 제외한 값은 반드시 전달시 중괄호를 사용

          숫자에 ""를 지정하면 문자로 전달됨

      */}

      {/* 지정된 것 없음 -> 초기값인 제주만 입력 */}

      회원0: <Avatar></Avatar>  

      <br></br>

      {/* 이름은 홍길동, 나이는 20, 주소는 const addr인 서울로 지정 */}

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

      <br></br>

     

      {/* 이름, 나이, 주소가 그대로 입력된 const chul을 그대로 대입 */}

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

      <br></br>

      {/* 이름은 이순신, 나이는 20으로 지정, 주소는 초기값인 제주 */}

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

      <br></br>

      회원4: <Avatar2 age2 = {ages} address2="부산"></Avatar2>

      {/*

          객체로 전달 시 반드시 명시적으로 값을 지정

          변수를 지정하기 위해서는 백틱 `$(변수명)` 을 사용함

          JSON 전달 시 이중 {{}}을 사용함

      */}

      Member1: <Member person={{name:"홍길동", age: 20, address: "서울"}}></Member>

      <br></br>

      Member2: <Member2 person={{name:"홍길동", age: 20, address: `${addr}`}}></Member2>

      <br></br>

    </div>

  )

}

export default App;