React 마지막 간단한 프로젝트 2일차- order화면

완성본:https://github.com/qjawns0222/hompage.git

자 이제 시작입니다 두번재로 어렵습니다

나 저번 강의처럼 Buy.module.css Buy.jsx Buycontainer.jsx 세개를 추가해주세요

pages/Buy.jsx

import React from "react";

import Buycontainer from "../container/Buycontainer";

export default function Buy() {

  return (

    <div>

      <Buycontainer />

    </div>

  );

}

작성

Buy.module.css

.orderboxs {

  border: 1px solid black;

  border-radius: 20px;

  background-color: rgb(180, 230, 247);

  min-height: 750px;

  margin: auto;

  margin-top: 2%;

  max-width: 99%;

}

.orderbox {

  display: flex;

  font-size: 28px;

  margin: auto;

}

.orderbox > * {

  margin-top: 1%;

}

.id {

  width: 9%;

  text-align: center;

}

.gim {

  width: 9%;

  text-align: center;

}

.odeng {

  width: 9%;

  text-align: center;

}

.addition {

  width: 50%;

  text-align: center;

}

.date {

  width: 9%;

  text-align: center;

}

.button {

  width: 10%;

  margin: auto;

  margin-top: 1%;

  text-align: center;

}

.line {

  height: 2px;

  background-color: blue;

  border: none;

  width: 99%;

  margin: auto;

  margin-top: 1%;

}

.data > * {

  font-size: 20px;

}

.data > .line {

  height: 1px;

  background-color: brown;

}

@media screen and (max-width: 700px) {

  .orderbox > * {

    font-size: 15px;

    margin-top: 1%;

    font-weight: bolder;

  }

}

작성

그럼 이제 container 가보겟습니다. 이번에는 딱히 특별한게 없어서 container에 있는 함수 부터 설명하겠습니다.

 value.data.map((p) => {

    if (p.addition.length > 15) {

      for (let i = 0; i <= 10; i++) {

        st = st + p.addition[i];

      }

      p.summary = st + "....";

    } else {

      p.summary = p.addition;

    }

    return p;

  });

  const delvalue = (find) => {

    value.data = value.data.filter((p) => {

      if (p.id != find.target.id) return p;

    });

    navigate("/order");

  };

 이렇게 두개의 함수가 있습니다

 value.data.map((p) => {

    if (p.addition.length > 15) {

      for (let i = 0; i <= 10; i++) {

        st = st + p.addition[i];

      }

      p.summary = st + "....";

    } else {

      p.summary = p.addition;

    }

    return p;

  });

위의 함수를 보면 길이가 15개 이상이 되면 실행하는데 앞에 10개의 글자+...이랑합쳐서 summary에 저장하게 되고

15글자 이하이면 summary에 그대로 저장하게 됩니다. 즉 저장소에 저장된 데이터를 활용하여 새로운데이터를 추가해주는 과정입니다. map은 배열의 모든요소를 돌면서 특정한 처리를 해주는 기능입니다.

 

  const delvalue = (find) => {

    value.data = value.data.filter((p) => {

      if (p.id != find.target.id) return p;

    });

    navigate("/order");

  };

 이것은 저장소에 해당 데이터를 지워주는 역할입니다. 즉 클릭한 요소의 id를 찾아내고 filter를 이용해서 그 id와 저장소안에 있는 데이터의 id가 같지 않은것만 다시 넣어주고 같은것은 넣어주지 않게 되어서 삭제가 됩니다.

그리고 마지막으로 다시 order로 창을 이동시켜주어서 다시 rendering되게 만들어주었습니다.

Component/Buy.jsx

import React from "react";

import Form from "./Form";

import style from "./css/Buy.module.css";

import { Link } from "react-router-dom";

 

export default function Buy({ value, delvalue }) {

  return (

    <Form>

      <div className={style.orderboxs}>

        <div className={style.orderbox}>

          <div className={style.id}>순번</div>

          <div className={style.gim}>김밥</div>

          <div className={style.odeng}>오뎅</div>

          <div className={style.addition}>요청사항</div>

          <div className={style.date}>시간</div>

          <div className={style.button}>삭제</div>

        </div>

        <hr className={style.line} />

        {value.data.map((p) => {

          return (

            <div key={p.id} className={style.data}>

              <div className={style.orderbox}>

                <div className={style.id}>

                  <Link to={`/detail${p.id}`}>{p.id}</Link>

                </div>

                <div className={style.gim}>

                  <Link to={`/detail${p.id}`}>{p.gim}</Link>

                </div>

                <div className={style.odeng}>

                  <Link to={`/detail${p.id}`}>{p.odeng}</Link>

                </div>

                <div className={style.addition}>

                  <Link to={`/detail${p.id}`}>{p.summary}</Link>

                </div>

                <div className={style.date}>

                  <Link to={`/detail${p.id}`}>{p.date}</Link>

                </div>

                <div className={style.button}>

                  <button id={p.id} onClick={delvalue} className={style.delete}>

                    삭제

                  </button>

                </div>

              </div>

              <hr className={style.line} />

            </div>

          );

        })}

      </div>

    </Form>

  );

}

Link태그로 클릭시 해당 detailpage로 이동하게 하고  받아온 value라는 데이터를 돌면서  html 요소를 만들어주게 됩니다. 

이런식으로 만들어지게 됩니다.

그럼 내일은 마지막으로 detail을 하고 마무리 지어보겠습니다.