React_Avata(외부 데이터 사용 + 스프레드 함수 + Map 함수)

data.js

export const CORE_AVATARS = [

    {

        name: "홍길동",

        age: 20,

        address: "서울"

    },

    {

        name: "이순신",

        age: 50,

        address: "전라"

    },

    {

        name: "강감찬",

        age: 44,

        address: "경기"

    },

]

 

App.js(외부 데이터 사용 + 스프레드 함수 + Map 함수)

import { CORE_AVATARS } from "./data/data"

function Avatar(props){

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

  return (

    <div>

      이름: {name}

      <br></br>

     

      나이: {age}

      <br></br>

      주소: {address}

      <br></br>

    </div>

  )

}

export default function App(){

  console.log(CORE_AVATARS)             //JSON obj 전체

  console.log(CORE_AVATARS[0])          //JSON obj 하나

  console.log(CORE_AVATARS[0].name)     //홍길동

  return (

    <div>

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

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

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

      회원1: <Avatar name={CORE_AVATARS[0].name} age={CORE_AVATARS[0].age} address={CORE_AVATARS[0].address}></Avatar>

      <br></br>

     

      회원2: <Avatar {...CORE_AVATARS[1]}></Avatar>

      <br></br>

     

      회원3: <Avatar {...CORE_AVATARS[2]}></Avatar>

      <br></br>

     

      <hr></hr>

      <h1>Avatar3: Map반복문 이용</h1>

      {CORE_AVATARS.map((row, idx) => {

        console.log(row, idx)

        let num = idx+1

        let name = row.name

        let age = row.age

        let address = row.address

       

        return (

          <div key={Math.random()}>

            회원: {num}<br/>

            이름: {name}<br/>

            나이: {age}<br/>

            주소: {address}<br/>

            <br/>

          </div>

        )

      })}

 

      <h1>Avatar4: Map반복문+스프레드 이용</h1>

      {CORE_AVATARS.map((row, idx) => {

      return (

        <div key={idx}>

          회원: {idx+1}<br></br>

          <Avatar {...row}></Avatar>

          <br></br>

        </div>

      )

    })}

    </div>

  )

};