나만의 홈페이지 만들기-06 [파라미터 props 전달하기]

• 하위 컴포넌트에 파라미터를 전달할때 props를 사용한다.
• 이전에 만든 카드리스트를 별도의 컴포넌트 CardList로 만들어서 Row를 props로 전달해보자.

import React from 'react'
import Card from 'react-bootstrap/Card';
import Col from 'react-bootstrap/Col';

export default function CardList({list}) {
    
    return (
        <Col key={list.uuid}>
            <Card >
                <Card.Img variant="top" src={list.displayIcon} />
                <Card.Body>
                    <Card.Title>{list.displayName}</Card.Title>
                    <Card.Text>
                        {list.category}
                    </Card.Text>
                </Card.Body>
                <Card.Footer>
                    <small className="text-muted">Last updated 3 mins ago</small>
                </Card.Footer>
            </Card>
        </Col>

    )
}

• 파라미터로 list를 받는다.
• app.js 에서 아래와 같이 값을 전달한다.

{getResult && getResult.map((r) =>
        <CardList list={r} />
          // <Col key={r.uuid}>
          //   <Card >
          //     <Card.Img variant="top" src={r.displayIcon} />
          //     <Card.Body>
          //       <Card.Title>{r.displayName}</Card.Title>
          //       <Card.Text>
          //         {r.category}

          //       </Card.Text>
          //     </Card.Body>
          //     <Card.Footer>
          //       <small className="text-muted">Last updated 3 mins ago</small>
          //     </Card.Footer>
          //   </Card>
          // </Col>
        )
        }

이렇게 해서 저장하고,

npm start를 실행하면 아래처럼 동일한 리스트가 조회된다.

github :JahvoTrust/myweb (github.com)

GitHub - JahvoTrust/myweb