[클론코딩]모달을 하면서 생긴 문제점

데이터를 임시로 뿌려주면서 화면에 팝업창 형식으로 한번 더 보여주는 기능이 있다.

근데 문제점은 같은 데이터만 화면으로 보이는 문제가 발생하였다.

모달하면서 생긴 문제점

 

결론부터 말하자면 일단 해결은 되었다.

하지만 왜인지는 모르겠다.

 

수정전 코드

import React, {useState} from "react";
import { MainLayout, SliderStyle, ButtonStyle, HrCenter, DivisionLine } from "./Main.style";
import "antd/dist/antd.css";
import { Row, Carousel, Col, Modal } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import mainsmall1 from "../utils/img/mainsmall1.gif";
import mainsmall2 from "../utils/img/mainsmall2.gif";
import jj1 from "../utils/img/jj1.gif";
import jj2 from "../utils/img/jj2.gif";
import jj3 from "../utils/img/jj3.gif";
import jj4 from "../utils/img/jj4.gif";
import bb1 from "../utils/img/bb1.gif";
import bb2 from "../utils/img/bb2.gif";
import bb3 from "../utils/img/bb3.gif";
import bb4 from "../utils/img/bb4.gif";

const MainContainer = () => {
  const [modalVisible, setModalVisible] = useState(false);
  
  // 슬라이드 제목map
  const sliderHeaders = ['Test1', 'Test2', 'Test3'];
  const sliderHeaderList = sliderHeaders.map(sliderHeader => 
    <SliderStyle>
      <h3>{sliderHeader}</h3>
    </SliderStyle>
  );

  // 슬라이드 map함수
  function SnackList({ snackList }) {
    
    return (
      <Col span={4} style={{textAlign: 'center'}}>
        <p>id: {snackList.id}</p>
        <p>품명 : {snackList.title}</p>
        <p>가격 : {snackList.price}</p>
        <ButtonStyle type="primary" onClick={() => setModalVisible(true)}>
          <SearchOutlined />
        </ButtonStyle>
        <Modal
          title={snackList.title}
          centered
          visible={modalVisible}
          onOk={() => setModalVisible(false)}
          onCancel={() => setModalVisible(false)}
          width={500}
          footer={null}
        >
          <p>품명 : {snackList.title}</p>
          <p>가격 : {snackList.price}</p>
        </Modal>

      </Col>
    );
  }

  // 임시 데이터 입력
  const snackLists = [
    {
      id: 1,
      title: "국희땅콩샌드",
      price: 4800,
    },
    {
      id: 2,
      title: "빼빼로",
      price: 8090,
    },
    {
      id: 3,
      title: "몽쉘 바나나",
      price: 2700,
    },
    {
      id: 4,
      title: "해바라기 초코볼",
      price: 1690,
    },
    {
      id: 5,
      title: "솜사탕 딸기향",
      price: 700,
    },
  ];

  return (
    <>
      <MainLayout>
        <Row>
          <Col span={24}>
            <Carousel autoplay>
              {sliderHeaderList}
            </Carousel>
          </Col>
        </Row>

        <Row
          style={{ margin: "20px 0", height: "280px" }}
          justify="space-around"
        >
          <Col span={12}>
            <img src={mainsmall1} alt="과자 선물세트 무료배송" />
          </Col>

          <Col span={12}>
            <img src={mainsmall2} alt="과자마켓이 준비한 초특가 상품" />
          </Col>
        </Row>

        <HrCenter>초특가 할인</HrCenter>
        <Row justify="space-around">
          {snackLists.map((snackList) => (
            <SnackList snackList={snackList} />
          ))}
        </Row>

        <DivisionLine />
        <Row>
          <Col span={6}>
            <img src={jj1} alt="칙촉 55%할인" />
          </Col>
          <Col span={6}>
            <img src={jj2} alt="롯데 ABC초콜릿 56%할인" />
          </Col>
          <Col span={6}>
            <img src={jj3} alt="롯데 파인애플 65%할인" />
          </Col>
          <Col span={6}>
            <img src={jj4} alt="가나 초보다 55%할인" />
          </Col>
        </Row>
        <HrCenter>베스트 상품</HrCenter>
        <Row justify="space-around">
          {snackLists.map((snackList) => (
            <SnackList snackList={snackList} />
          ))}
        </Row>
        <DivisionLine />
        <Row>
          <Col span={6}>
            <img src={bb1} alt="세트상품" />
          </Col>
          <Col span={6}>
            <img src={bb2} alt="인기상품" />
          </Col>
          <Col span={6}>
            <img src={bb3} alt="신상품" />
          </Col>
          <Col span={6}>
            <img src={bb4} alt="특가상품" />
          </Col>
        </Row>
        <HrCenter>새로운 상품</HrCenter>
        <Row justify="space-around">
          {snackLists.map((snackList) => (
            <SnackList snackList={snackList} />
          ))}
        </Row>
        <HrCenter>특별상품</HrCenter>
        <Row justify="space-around">
          {snackLists.map((snackList) => (
            <SnackList snackList={snackList} />
          ))}
        </Row>
      </MainLayout>
    </>
  );
};

export default MainContainer;

 

수정 후 코드

...
const MainContainer = () => {

  // 슬라이드 제목map
  const sliderHeaders = ['Test1', 'Test2', 'Test3'];
  const sliderHeaderList = sliderHeaders.map(sliderHeader => 
    <SliderStyle>
      <h3>{sliderHeader}</h3>
    </SliderStyle>
  );

  // 슬라이드 map함수
  function SnackList({ snackList }) {
    const [modalVisible, setModalVisible] = useState(false);
    return (
      <Col span={4} style={{textAlign: 'center'}}>
        <p>id: {snackList.id}</p>
        <p>품명 : {snackList.title}</p>
        <p>가격 : {snackList.price}</p>
        <ButtonStyle type="primary" onClick={() => setModalVisible(true)}>
          <SearchOutlined />
        </ButtonStyle>
        <Modal
          title={snackList.title}
          centered
          visible={modalVisible}
          onOk={() => setModalVisible(false)}
          onCancel={() => setModalVisible(false)}
          width={500}
          footer={null}
        >
          <p>품명 : {snackList.title}</p>
          <p>가격 : {snackList.price}</p>
        </Modal>

      </Col>
    );
  }
...

수정은 매우 간단하였다.

변수 위치 변경

아마 전역적으로 변수를 넣어서 값이 하나밖에 나타나지 않은 게 원인으로 생각한다.

사용하고 있는 함수안으로 useState를 넣어서 클릭하는 버튼마다 다른 값을 나오게 하였다.

변수 위치를 변경 후 modal이 잘 되는 모습이다.

이거 때문에 몇번을 모달에 대한 프로젝트를 클론 코딩했는지 모르겠다...

근데 나의 원인은 너무나 허무할만큼의 간단한 거였고, 아직도 왜 이렇게 해야 되는 건지는 사실 근본적인 이유는 잘 모르겠다.

 

혹시 이게 왜 이렇게 해야 잘 되는지 아시는 분계시다면 설명해주시면 필자에게 매우 큰 도움이 될 거 같다.