[React] 쇼핑몰 프로젝트 (0) - React시작, Map함수

 

축구선수를 장바구니에 담는 쇼핑몰을 만들어보자

 

우선 서버와 DB는 다룰줄 모르기 때문에 (node.js 후딱 배워야겠네)

데이터는 객체로 구성된 배열을 자바스크립트 파일에 저장 해두었다

 

이 데이터를 자유자재로 다룰 수 있어야 다음에 서버와 연동했을 때도 수월하게 작업할 수 있을 것이다

 

그동안 수강했던 코딩애플 센세의 강의를 토대로 내가 재밌게 즐길만한 쇼핑몰을 만들어보자

 

let data = [


  {
    id : 0,
    name : 'Mohamed Salah',
    age : '1992년 6월 15일',
    position : 'Right-wing'
  },
  {
    id : 1,
    name : 'Sadio Mane',
    age : '1992년 4월 10일',
    position : 'False-nine'
  },
  {
    id : 2,
    name : 'Luis Diaz',
    age : '1997년 1월 13일',
    position : 'Left-wing'
  }

 

[객체로 구성된 배열 데이터]

import data from './route/data.js'
let [player, setplayer] = useState(data);

 

우리가 실행할 메인 App.js 파일상단에서

data.js파일을 불러오고

State를 이용해 불러온 data배열을 저장한다

 

data는 player라는 변수명으로 바꾼다

 

  {
    player.map(function(a,i) {
      return (
        <List player={player[i]} i={i}/>
        )
      })
    }

 

원하는 위치에 List라는 컴포넌트를 map함수를 사용하여 배치한다.

그리고 a와 i 파라미터를 전달한다

 

여기서 a는 .map앞에 있는 데이터를 직접 보여주고

i는 0부터 1씩 증가하는 자연수를 반환한다.

const List = (props) => {
  return (
  <div className="col-md-4">
  <Nav.Link href={'detail/'+props.i} style={{display:'inline-block'}}>
  <img src={process.env.PUBLIC_URL + '/' + props.i + '.png'} width="70%" height="200px"/>
  </Nav.Link>
  <h4>{props.player.name}</h4>
  <p>{props.player.age}</p>
  <p>{props.player.position}</p>
</div>
  )
}

 

List 컴포넌트에 props를 img와 h4태그 p태그로 불러온다

(navbar와 백그라운드 이미지 코드는 생략했다)

 

 

 

 

이렇게 만들었을 때

 

 

 

 

 

 

짠~

 

내가 원하는 비주얼이다. 흡족하다

이게 메인페이지이고 다음 장 부터는

데이터를 정렬하거나 Route를 이용해 페이지를 이동하는 등의

간단한 기능을 하나씩 추가해보겠다.