react Map으로 객체 연결 이미지 뿌려주기

리액트부트스트랩 사이트

https://react-bootstrap.netlify.app/components

 

react Map으로 객체 연결 이미지 뿌려주기

 

import React from "react";
import Travel from './Travel.js';

const travels = [ 
    {
        id: 1,
        name:'Paris',
        image:'https://cdn.pixabay.com/photo/2018/04/25/09/26/eiffel-tower-3349075_1280.jpg'

    },
    {
        id: 2,
        name:'Niagara Falls',
        image:'https://cdn.pixabay.com/photo/2020/04/16/11/41/waterfall-5050298_1280.jpg'
    },
    {
        id: 3,
        name:'Iceland',
        image:'https://cdn.pixabay.com/photo/2019/11/24/14/00/animals-4649468_1280.jpg'
    },
]



const Travels = () => {
    return (
    <div className="container mt-5">
        <button
        className="btn btn-outline-primary"
        > 
        여행지 데이터 불러오기
        </button>
        <hr/> 
        {
            //여행지 데이터 불러오기
            travels.map( 
                t => 
                    (
                    <Travel 
                    
                    key = {t.id}
                    id = {t.id}
                    name={ t.name} 
                    image={t.image} 
                    
                        />
                    ) 
                )
        }
    </div>
    )
}

export default Travels;

react Map Travels(2)로 연결한 페이지 html 태그로 연결하는 방법

 

import React from "react";

const Travel = () => {

    return(

        <div className="container mt=5">
            <h3>1. Paris </h3>
            <img src="https://cdn.pixabay.com/photo/2018/04/25/09/26/eiffel-tower-3349075_1280.jpg"/>
        </div>
    )
}

export default Travel;

 

 

react Map Travels(2)로 연결한 페이지 리액트객체map 으로 연결하는 방법

 

import React from "react";

const Travel = ( { id, name, image }) => {

    return(

        <div className="container mt-5">
            <h3>{ id }. { name } </h3>
            <img src={ image } width="100%"/>
        </div>
    )
}

export default Travel;

 

 

리액트 머리속 정리 부분Permalink

 

리액트 정리

객체는 {} 다

태그는 </>

연결은 . 이다
객체와 객체 연결은 {id}. {name} 으로 한다.
                //id로 최적화를할수잇다?
                 
선의종료는 <hr/> , <br/>이다

태그를 감싸는건 </div> 앞 /이다.

코드분석
t => ( 
         <Travel name={ t.name} image={t.image}  />
                    )
 
t//이니셜 => ( 
                    <Travel  name={ t.name} image={t.image}  />
             //본체(2)const객체     import 본체(2) import{ name, image }연결
  )

 

 

Youtube 실습내용 첨부