React 컴포넌트화(Component) 해서 반복문이용, 이미지도 순서반복

위와같은결과물을 만들기위해 간단한 부트스트랩사용이후

 

상품 정보에관한 소스를 컴포넌트화해 반복문으로 출력했다.

 

export default [
  {
    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
  }
]

 

이게 데이터정보

 

import Data from './data.js'

function App() {
	let [shoes,shoes변경] = useState(Data)
	return(
    ...
    <div className="col-md-4"> 
    <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%"></img>
    <h4>{shoes[0].title}</h4>
    <p>{shoes[0].content} & {shoes[0].price}</p></div>

    <div className="col-md-4"> 
    <img src="https://codingapple1.github.io/shop/shoes2.jpg" width="100%"></img>
    <h4>{shoes[1].title}</h4>
    <p>{shoes[1].content} & {shoes[1].price}</p></div>
    <div className="col-md-4"> 
    <img src="https://codingapple1.github.io/shop/shoes3.jpg" width="100%"></img>
    <h4>{shoes[2].title}</h4>
    <p>{shoes[2].content} & {shoes[2].price}</p></div>
    ...
    )}

이와같이 일일이 한걸 컴포넌트화해서 반복문으로 만들기

 

function Sh(props){
  return(
    <>
    <div className="col-md-4"> 
    <img src='https://codingapple1.github.io/shop/shoes1.jpg' width="100%"></img>
     <h4>{props.shoes[props.index].title}</h4>
    <p>{props.shoes[props.index].content} & {props.shoes[props.index].price}</p></div>
    
    </>
  )
}

function Card(props){
  return(
    <>
    <div className="col-md-4"> 
    <img src={'https://codingapple1.github.io/shop/shoes'+(props.i+1)+'.jpg'} width="100%"></img>
     <h4>{props.shoes.title}</h4>
    <p>{props.shoes.content} & {props.shoes.price}</p></div>
    
    </>
  )
}

두가지방식

 

Sh라는이름으로도 만들어보고

Card라는 이름으로도 만들어봤다.

 

두개의차이는 둘다 props를 사용하지만 다르게 내려보낸 차이임

 

{
        shoes.map(function(a,index){
          return (
            <><Sh shoes = {shoes} index = {index}></Sh>             
            </>           
          )
        })
      }
      
      {
        shoes.map((a,i)=>{
          return <Card shoes={shoes[i]} i={i} ></Card>
        })
      }

위에는 그냥 함수, 아래는 화살표 함수로 작성했다. 그것보다도 차이는

 

하나는 자료와 인덱스정보를 props를 넘겼고 아래는 마찬가지로 자료와 인덱스를 넘겼지만

 

위 컴포넌트에서 사용하는 방식이다르다. 결국 밖에서 인덱스를 사용하느냐 컴포넌트안에서 인덱스를 사용하느냐의차이

 

결과는 둘다 같게 나온다.

 

중요한것은

 

반복되는 html코드를 컴포넌트화해서 map함수를이용해 반복하는것이다.

 

 

참고. 파이썬에서는 ``이나 +연산자로 주소같은거를 크롤링 해올때 변수로 사용해서 작성하곤 했는데

js 그리고 리액트에서 문자열 주소를 연사자와 이용하고 싶을때

    <img src={'https://codingapple1.github.io/shop/shoes'+(props.index+1)+'.jpg'} width="100%"></img>

이와같이 사용한다.

 

{} 를 먼저사용해주고 그안에 ''로 덮어 +연산자로 붙여줄 수 있다. 위에는 같은 파일이름에 1,2,3순으로 바뀌어서

 

컴포넌트에서 반복문으로 사용하고싶어 이와같은 방법을 썼다. 중간에 ++ 사이에 (props.index+1)로 감싸주어

 

반복적으로 이미지를 활용할 수 있었다.