[React] 반복되는 부분 컴포넌트로 옮긴 후 map 사용하기!!!(중요)
이미 내 코드는 다 바꿔서 강사님꺼 강의과정이랑 비교해서 설명!
일단 위와 같이 반복되는 코드들이 있다.
이렇게 데이터를 작성해서 export 한 값들을 가져와
강의에선 shoes[1]
내 코드에서도 data로 가져와서
shoes에 담아뒀다.
(export Default 로 보낸 데이터는 작명이 자유로움)
Card 라는 컴포넌트를 만들고 이를 부모 컴포넌트에 포함시켜 준다
이렇게 포함시키면 Card 컴포넌트에 shoesData 의 데이터를 prorps 로 전달이 가능해진다.
이렇게 카드에 shoes의 데이터 값을 보내준다!
이렇게 데이터를 보내고 난 후에
props 의 데이터 값들을 보낼 수 있게 된다.
여기서 난 한가지! 이미지의 url 주소부분을 외부 data 의 array 객체 리터럴에 포함시켜 두었다!
그것도 그냥 url 말고 public에 포함시켜서 나중에 오류 안나게 하려는 문구도 포함해서!!
process.env.Public_URL+ '이미지 이름'
전 강의에서 배운 PUBLIC에 이미지만 넣어놔도 그대로 이름으로 가져다 쓸수 있는 개꿀 방법!
이걸 넣어서 주소 역시 한번에 불러올 생각이다.
컴포넌트를 만들고 이렇게 재활용을 통해서 화면을 구성할 수 있다.
다만 데이터 값이 동일해서 하나의 제품사진이 반복적으로 보인다!
이때 이용할 수 있는게 가져온 data가 array 마다 다른 정보를 가지고 있음을 이용이 가능하다!
하지만 이미지 url 을 바꿔주지 않은 강사님 화면에서는 제품 이름이나 가격은 바꼈으니 이미지가 동일하다.
이땐 이미지에 입력된 숫자를 변경함으로써 화면을 다르게 출력이 가능하다. 그 숫자를 변경하기위해 마찬가지로 props를 통해서 데이터를 전송해 준다.
이렇게 구성되어 있는 url 이미지 가르키는 코드에서 해당 값을 문자자료로 바꾸기 위해서는
중괄호를 넣어주고 넣고싶은 공간 양 옆을 분리시켜서 + + 로 이어주고 그 사이에 원하는 데이터 값을 넣어주면 된다.
그러면 이를 통해서 원하는 사진들인 의도대로 나온다.
반복되는 컴포넌트를 map 을 이용해서 정리를 해보자
일단 이용할 데이터인 shoes.map 으로 이용하고 안에는 function() or ()=>{} 이렇게도 이용가능하다.
파라미터 a(각 배열의 데이터 값) , i(0에서부터 1씩 증가하는 정수값) 을 넣어주고
화면에 보여줄 부분을 위해 return 을 넣어주고 i 를 이용해서 데이터를 뽑아주는데
이때 i는 0,1,2,3 등 이렇게 증가하므로 원한는 1,2,3 데이터를 얻기위해서 +1을 해준다.
최종 완성 코드!(객체리터럴에 public 에 넣은 사진 가져오는 주소 넣은 것)
import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Navbar, Container, Nav } from 'react-bootstrap';
import { useState } from 'react';
import data from './data.js';
function App() {
let [shoes] = useState(data);
console.log(shoes);
console.log(shoes[0].price);
return (
<div>
<Navbar bg="primary" variant="dark">
<Container>
<Navbar.Brand href="#home">KongDol's Shop</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#features">Cart</Nav.Link>
<Nav.Link href="#Guest Book">Guest Book</Nav.Link>
</Nav>
</Container>
</Navbar>
<div className='main-bg'>
</div>
<div className="container">
<div className="row">
{
shoes.map((a,i)=> {
return (
<Card shoesData={shoes[i]}></Card>
)
}
)
}
</div>
</div>
</div>
);
}
function Card(props) {
return (
<div className="col-md-4">
<img src={props.shoesData.shoesImg} width={"80%"}></img>
<h4>{props.shoesData.title}</h4>
<p>{props.shoesData.content}</p>
<p>{props.shoesData.price}</p>
</div>
)
}
export default App;
출처 : 코딩애플 React 강의입니다.
스스로 생각해서 코드를 직접 짜보게끔 많이 유도해주시고 강의 설명도 이해가 쉽게 설명해주십니다.