1주차 과제 장바구니(1) - css 구현하기

[1주차 과제 장바구니 사이트] (2023-01-13 ~ 2023-01-18 약 일주일)

React App

• 1주차 과제 장바구니(1) - css 구현하기
• 1주차 과제 장바구니(2) - 장바구니에 추가, 삭제, 수량 조절, 전체가격 표시
• 1주차 과제 장바구니(3) - 장바구니 비우기, 금액초과 경고, 입력값 검사
• 1주차 과제 장바구니(완료) - 모달창 다음 단계로, 드래그 기능

 

 

---

API로 데이터를 받아와 렌더링하기

객체에 담긴 데이터

const PRODUCT_DATA = [
  {
    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,
  },
];

API 데이터

  // ----- 데이터 불러오기 -----
  const [shoesData, setShoesData] = useState(PRODUCT_DATA);

  useEffect(() => {
    axios.get(`https://codingapple1.github.io/shop/data${2}.json`).then((result) => {
      setShoesData([...shoesData, ...result.data]);
    });
  }, []);
  // ----- 데이터 불러오기 -----

=> axios를 이용하여 불러온 API와 객체 데이터를 합친 뒤에 useEffect로 최초에 1회 페이지를 렌더링한다.

 

추가 목표
서버를 통해 데이터를 DB에 저장한다.
모든 데이터를 DB에서 불러오도록 한다.

---

모달창 띄우기

 

1. 구매하기 버튼을 클릭하면 모달창이 나타나도록 한다.

  const [isModalVisible, setIsModalVisible] = useState(false);

=> 모달창을 클릭하였을 때 나타날 수 있도록 state를 만든다. 

 

2. 구매하기 버튼을 클릭하면 state를 false에서 true로 바뀌게 만든다.

    <Button onClick={() => setIsModalVisible(true)} variant="primary">
      구매하기
    </Button>

 

3. state가 true가 되면 className에 visible 클래스가 붙게 된다.

            <div className={`modal show infoModal ${isModalVisible ? "visible" : "invisible"}`} ref={refModal}>

 

4. css의 display 속성으로 모달창을 나타나게 한다.

.visible {
  display: block;
}
.invisible {
  display: none;
}

---

모달창 바깥 클릭하면 모달창을 끄기

1. useRef로 모달창을 선택한다. 

  const refModal = useRef();

            <div className={`modal show infoModal ${isModalVisible ? "visible" : "invisible"}`} ref={refModal}>

 

2. 모달창이 나타나 있을 때, 클릭한 지점이 모달창을 포함하고 있지 않다면 창을 끈다.

  // ----- 모달창 visible -----
  const [isModalVisible, setIsModalVisible] = useState(false);
  const refModal = useRef();

  useEffect(() => {
    // 모달이 열려 있고 모달의 바깥쪽을 눌렀을 때 창 닫기
    const clickOutside = (e) => {
      if (isModalVisible && !refModal.current.contains(e.target)) {
        setIsModalVisible(false);
      }
    };
    document.addEventListener("mousedown", clickOutside);

    return () => {
      // Cleanup the event listener
      document.removeEventListener("mousedown", clickOutside);
    };
  }, [isModalVisible]);
  // ----- 모달창 visible -----

 

      if (isModalVisible && !refModal.current.contains(e.target)) {

        setIsModalVisible(false);

      }

=> e.target은 useRef가 가리키는 모달창 객체

=> contains 함수로 해당 객체가 클릭했을 때 존재하지 않으면 setVisible(false)로 바꾼다.

 

    return () => {

      // Cleanup the event listener

      document.removeEventListener("mousedown", clickOutside);

    };

=> 동작 수행이 끝났다면 mousedown 이벤트를 없앤다.