Today Topic : React로 쇼핑몰만들기(1)

🗝 Keywords

✅ react-bootstrap

✅ react에 image 넣기

✅ component 활용

1. react-bootstrap 사용하기

🚀 설치 : 터미널에서 아래와 같이 설치할 것.

🚀 스타일시트 적용하기

• App.js에 직접 적용하기
  
• index.html에 적용하기
  

🚀 컴포넌트 만들기

• 부트스트랩을 통해 만들어진 파일은 모두 컴포넌트이기 때문에 아래와 같이 컴포넌트 import를 해줘야만 실행이 됨
  

🚀 navbar 불러오기

• 위와 같이 navbar 항목에 들어가서 원하는 것을 골라 적용하면 아래처럼 내 페이지에서 적용이 됨
• 이 때 컴포넌트로 생성되어있는 것들은 모두 import를 해줘야만 함
• 커스터마이징이 충분히 가능함.
  

---

2. 이미지 넣기

2-1. 이미지 파일을 src 폴더에 넣어서 css폴더에서 이미지 링크로 연결하기

.main {
  background-image: url(./jpg/main.jpeg);
  background-size: cover;
  background-position: center;
  width: 60%;
  height: 300px;
}

2-2. 이미지 파일을 src 폴더에 넣어서 app.js에서 바로 불러오기

import image1 from './jpg/image1.jpeg'

<Col className="image1" style={{ backgroundImage: 'url('+ image1 +')', width:'80%', height:'200px', backgroundSize:'cover', backgroundPosition:'center'}}>

2-3. app.js에서 링크로 바로 이미지 넣기

<img src="http://th2.tmon.kr/thumbs/image/6d5/848/809/d28d19eba_700x700_95_FIT.jpg" width={'80%'}/>

2-4. 이미지 파일을 퍼블릭 폴더에 넣어서 app.js에서 바로 불러오기

<img src="/image1.jpeg" width={'80%'}></img>

public 폴더에서 파일을 넣을 때 컴포넌트가 바뀌는 경우

- img src= "/추가경로/image1.jpeg"

• 위와 같이 경로를 계속해서 추가해줘야함
• 만약 100개의 이미지가 들어가있다면? 모든 이미지파일에 위와 같이 경로를 추가해주기가 불편함

<img src={process.env.PUBLIC_URL + '/image1.jpeg'}>

• cra 라이브러리에 위와 같이 적용할 수 있는 주소값이 있음. 위와 같이 적용하는 것을 권장함

---

3. 컴포넌트 활용하기

🚀 data.js 파일에 데이터 모아두기

let data = [
  {
    id : 0,
    title : "White and Black",
    content : "Born in France",
    price : 120000,
    image : "/image.0.jpeg"
  },
  {
    id : 1,
    title : "Red Knit",
    content : "Born in Seoul",
    price : 110000,
    image : "/image.1.jpeg"
  },
  {
    id : 2,
    title : "Grey Yordan",
    content : "Born in the States",
    price : 130000,
    image : "/image.2.jpeg"
  }
] 

🚀 data에 있는 항목들 하나씩 가져오기

function App() {
  let [product] = useState(data)
  let navigate = useNavigate()
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={
          <>
            <ComponentNavbar/>
            <MainBanner/>
            <Product product={product}/>
          </>
          }/>

• app.js에서 data를 useState로 전달해주는 product를 만들고 그 product를 자식요소에서 받을 수 있게 선언해줌

🚀 props로 다른 컴포넌트에 있는 데이터 활용하기

export default function Product(props) {
  return (
    <Container>
      <Row>
        <Col className="image1">
          <img
              src={process.env.PUBLIC_URL + "/image.0.jpeg"}
              width={"80%"}
          </img>
          <h4>{props.product[0].title}</h4>
          <p>{props.product[0].content}</p>
        </Col>
        <Col>
         <img
              src={process.env.PUBLIC_URL + "/image.1.jpeg"}
              width={"80%"}
          </img>
          <h4>{props.product[1].title}</h4>
          <p>{props.product[1].content}</p>
        </Col>
        <Col>
          <img
            src="http://th2.tmon.kr/thumbs/image/6d5/848/809/d28d19eba_700x700_95_FIT.jpg"
            width={"80%"}
          />
          <h4>{props.product[2].title}</h4>
          <p>{props.product[2].content}</p>
        </Col>
      </Row>
    </Container>
)}

• 이렇게 되면 각각의 아이템들을 받아올 수 있음

🚀 Map 활용해서 코드 줄이기

export default function Product(props) {
  const cardTotal = props.product.map((a, i) => {
    return (
      <Col id="i">
        <img
          src={process.env.PUBLIC_URL + `${props.product[i].image}`}
          width={"80%"}
</img>
        <h4>{props.product[i].title}</h4>
        <p>{props.product[i].content}</p>
      </Col>
    );
  });
  return (
    <Container>
      <Row>{cardTotal}</Row>
    </Container>
  );
}

• 위처럼 map을 통해서 데이터 갯수만큼 실행하면 코드를 확 줄일 수 있음