React component, map, props 이용해서 상품 카드 쭉 넣어보기.

컴포넌트는 자주 사용하는 html을 하나의 <태그/>로 만들어주는 react의 문법.

 

 

컴포넌트 용도

1. 반복적인 html 축약시

2. 큰 페이지들 

3. 자주 변경되는 것들 (성능상)

 

 

우선 3스텝으로 만듬.

1. function만들기

function App()밖에서 만들기.

함수명은 대문자로 시작함.

function Modal() {
  return (
    <div className="modal-background">
      <div className="modal">
        <h4>title</h4>
        <p>date</p>
        <p>content</p>
      </div>
    </div>
  )
}

2. return() 안에 html 담기

3. <함수명></함수명>써서 사용하기.

 

function App() {
  return (
    <div className="App"> 
      중략
      <div className="list">
        <h4>{글제목[2]}</h4>
        <p>2월 17일 발행</p>
      </div>
      
      <Modal></Modal>

    </div>
  )
}

 

주의사항 : 최종 태그는 1개가 되어야함.(<></>fragment사용가능)

 

여러가지 형태 가능함.

function Modal(){
  return ( <div></div> )
}

let Modal = () => {
  return ( <div></div>) 
}

const Modal = function (props){
	return ~~~
    )
}

 

 

 

 

변수 전달은 props로 함.

변수전달하기 props

function List (props){
	return(
    	<div>
        	<h1 className='title'>상품 정보<h1>
            <p>상품명 : {props.title} </p>
            <p>상품정보 : {props.content} </p>
            <p>가격 : {props.price} </p>
        </div>
    )
}

이렇게 할 수도 있지만, 구조분해할당을 이용하면 아래처럼 좀더 편하게 사용도 가능함. 

function List ({title, content, price}){
	return(
    	<div>
        	<h1 className='title'>상품 정보<h1>
            <p>상품명 : {title} </p>
            <p>상품정보 : {content} </p>
            <p>가격 : {price} </p>
        </div>
    )
}

 

Map, Component, Props 이용해서 상품 카드 생성하기.

 

data.js

let a = 10;
let b = 20;
let data = [
    {
        id: 0,
        title: "White and Black",
        content: "Born in France",
        price: 120000
    },

    {
        id: 1,
        title: "Red Knit",
        content: "Born in Seoul",
        price: 110000
    },

    {
        id: 2,
        title: "Grey Yordan",
        content: "Born in the States",
        price: 130000
    }
];

export default { a, b, data };

이걸 app.js에 아래와 같이 가져옴.

import { useState } from 'react';

const { a, b, data } = myData;

function App() {
	let [shoes] = useState(data);
   	console.log(shoes[0]);
    //{id: 0, title: 'White and Black', content: 'Born in France', price: 120000}
    return(
    
    ...
    )
}

 

컴포넌트를 뚝딱 만들어준다.

function Cards(props) {
  return (
    <Col lg={3} md={4} className='col'>
      <Card style={{ width: '18rem' }}>
        <Card.Img variant="top" src={"https://codingapple1.github.io/shop/shoes" + (props.i + 1) + ".jpg"} />
        <Card.Body>
          <Card.Title>{props.shoes.title}</Card.Title>
          <Card.Text>
            {props.shoes.content}
          </Card.Text>
          <Button on variant="primary">{props.shoes.price}</Button>
        </Card.Body>
      </Card>
    </Col>
  )
}

 

그리고 map 함수를 돌린다.

      <Container>
        <Row>
          {shoes.map((a, i) => {
            return (
              <Cards shoes={a} i={i}></Cards>
            )
          })}
        </Row>
      </Container>

 

잘 나온다.