coding develop

고객 데이터

const customers =[{
  'id' :1,
  'image' : 'https://placeimg.com/64/64/1',
  'name' : '이순신',
  'birthday' : '940926',
  'gender' : '남자',
  'job' : '대학생'
}
,
{
  'id' :2,
  'image' : 'https://placeimg.com/64/64/2',
  'name' : '홍길동',
  'birthday' : '951222',
  'gender' : '남자',
  'job' : '대학생'
}
,
{
  'id' :3,
  'image' : 'https://placeimg.com/64/64/3',
  'name' : '장보고',
  'birthday' : '961222',
  'gender' : '남자',
  'job' : '대학생'
}
]

App.js

class App extends Component {
  
  render(){
  return (
    <div>
    <Customer
      id={customers[0].id}
      image={customers[0].image}
      name={customers[0].name}
      birthday={customers[0].birthday}
      gender={customers[0].gender}
      job={customers[0].job}
      
    />

    <Customer
    id={customers[1].id}
    image={customers[1].image}
    name={customers[1].name}
    birthday={customers[1].birthday}
    gender={customers[1].gender}
    job={customers[1].job}
    
  />
  <Customer
  id={customers[2].id}
  image={customers[2].image}
  name={customers[2].name}
  birthday={customers[2].birthday}
  gender={customers[2].gender}
  job={customers[2].job}
  
  
/>
</div>
  );
}
}

Customer.js에게 데이터 전달

데이터가 많아지면 코드가 길어짐

반복문 사용하여 구현!!

react에서는 반복문으로 map 함수 사용

map

{
      customers.map( c => {

        return(
          <Customer
            id={c.id}
            image={c.image}
            name={c.name}
            birthday={c.birthday}
            gender={c.gender}
            job={c.job}
            />

        );
      }

      )

    }

cmd -> 명령 프롬포트

cd C:\workspace\React

npm install -g create-react-app

create-react-app 이름

cd 이름

yarn start