회사소개페이지에서 사용된 props 예시

목표: 같은 스타일을 가진 카드 4개를 만들어본다.
element로는 이미지, 품목명, 하위 품목명, 버튼을 출력하고 있다.

과정:
1) 먼저 productList라는 배열 안에 4개의 객체를 만들어주었다. 각 객체의
요소를 map을 사용하여 jsx 안에서 반복적으로 출력할 것이기 때문이다.
2) useEffect를 사용하여 화면이 처음 마운트되고 언마운트 될 때 productList를
불러오게 해준다. useEffect는 통신을 위하여 주로 사용되고 이처럼 정적인 데이터를
불러올 때는 필수는 아니지만 연습을 위해 사용하였다. 또한 데이터가 변경될 때 상태도 변경해야 하므로 useState도 사용해주었다.
3) 자식 컴포넌트인 에 props로 내보낸다. 자식컴포넌트는 스타일과 함께
화면에 랜더링을 해주는 역할을 하게 된다.

import React, { useState, useEffect } from "react";
import ViewByCard from "./ViewByCard";
import styled from "styled-components";


const CardList = () => {
  const [list, setList] = useState([]);

  useEffect(() => {
    const productList = [
      {
        id:0,
        img: "",
        productName: "Buckle",
        productDetail1: "Bags",
        productDetail2: "Caps",
        productDetail3: "Clothing",
        productDetail4: "Other Supplies",
      },
      {
        id:1,
        img:"",
        productName: "Button",
        productDetail1: "Clothing",
        productDetail2: "",
        productDetail3: "",
        productDetail4: "",
      },
      {
        id:2,
        img: "",
        productName: "Goods",
        productDetail1: "Shopping Totes Bags",
        productDetail2: "",
        productDetail3: "",
        productDetail4: "",
      },
      {
        id:3,
        img: "",
        productName: "Accessories",
        productDetail1: "Overlock Patches",
        productDetail2: "Others",
        productDetail3: "",
        productDetail4: "",
      },
    ];

    setList(productList);
  }, []);

  return (
    <CardListLayer>
      {list.map((product) => (
        <ViewByCard
          id={product.id}
          img={product.img}
          productName={product.productName}
          productDetail1={product.productDetail1}
          productDetail2={product.productDetail2}
          productDetail3={product.productDetail3}
          productDetail4={product.productDetail4}
        />
      ))}
    </CardListLayer>
  );
};

export default CardList;

이슈:
위의 코드는 이슈를 해결하고 난 뒤에 써준 것이고 처음에 나는 리액트 함수를 쓰는 부분에서 img를 상대경로를 통해서 가지고 왔었다. 하지만 화면에 문자열로 출력할 뿐 사진이 출력되지않았고 내가 아는 방법은 jsx문에 url경로를 써주는 방법 밖에 없었다. 인터넷 검색을 통해 public폴더에 사진을 저장해주고 절대경로를 통해 이를 불러와주는 법 알게 되었다.
그 내용은 다음과 같다. 랜더링을 해주는 부분에 절대경로로 표시해주고 저장한 사진 파일의 제목을 숫자로 표시해준다.

해결 및 완성코드:

import React from "react";
import styled from "styled-components";
import arrow from "../../assets/arrow.png";
import Button from "../../styles/Button";

const ViewByCard = (props) => {
  return (
    <Card>
      <CardLayer>
        <ul className="contents-container">
          <div className="card-image">
            <img src={`/img${props.id + 1}.png`} alt="img" width="55%" />
          </div>
          <li className="product-name">{props.productName}</li>
          <li className="product-detail">{props.productDetail1}</li>
          <li className="product-detail">{props.productDetail2}</li>
          <li className="product-detail">{props.productDetail3}</li>
          <li className="product-detail">{props.productDetail4}</li>
          <div className="button-layer">
            <Button
              style={{
                width: "90%",
                margin: "55px 0px",
                display: "flex",
                flexDirection: "row",
                justifyContent: "center",
                gap: "10px",
              }}
            >
              <h2>View All</h2>
              <img src={arrow} alt="arrow" width={20} />
            </Button>
          </div>
        </ul>
      </CardLayer>
    </Card>
  );
};