서버로 보낸 get 요청이 무한히 전송되는 현상

[머텅]

안녕하십니까 선생님
리액트 강의를 다 들은 후 연습삼아 음식 주문 웹서비스 같은걸 만들고 있는 완강생입니다.
며칠째 해결 못하고 있는, 왜 그런지를 모르겠는 오류가 있어서 염치불고하고 가져왔습니다.
부디 권위자의 눈으로 왜 그런 것인지 꿰뚫어주셨으면 좋겠습니다... (코드 아래 첨부)
여러 페이지 중 하나의 페이지를 구성하는 jsx 파일입니다.
여기서 axios.get 하는 코드가 있는데
axios.get('/order/history').then((res) => {
    setOrderHistory(copy);
   })
이 코드로 서버에 주문내역을 요청하는데, 그 윗줄에 있는 코드인 console.log('re'); 이게 계속 콘솔에 무한히 반복돼서 찍히길래
이게 무슨 일인가 하고 크롬 개발자도구의 네트워크 탭에 가서 보니까 서버에서 계속 history를 받아오고 있었습니다.
이게 아마 state가 바뀌면 다시 렌더링하니까 코드를 처음부터 다시 읽고... 이 과정을 계속계속 반복하는거 같은데..
분명 선생님과 수업할때 신발 사진을 받아오는 경우에도 저렇게 .then() 안쪽에서 state를 바꿨었고 문제 없었던 거 같은데 
왜 계속 리렌더링 하는 것일까요
제발 한번만 살려주십시오 선생님...

import { useEffect, useState } from "react"
import "./orderHistoryPage.css";
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import {
  MDBCard,
  MDBCardBody,
  MDBCardTitle,
  MDBCardText,
  MDBCardHeader,
  MDBCardFooter,
  MDBBtn,
} from 'mdb-react-ui-kit';
import { Link } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux';
import { setSeeModal } from '../../store';
import axios from "axios";

let clickedCard = {
  menu_nm: 'te',
  orderDateTime: '0000-00-00',
  customerName: 'chan',
  customerAddress: '동대문구',
  option_nm: '옵션',
  req_orderDateTime: '1111-11-11'
}

function OrderHistory() {
  let [orderHistory, setOrderHistory] = useState([1, 2, 3]);
  let [show, setShow] = useState(false);

  function showModal() {
    setShow(true);
  };

  function closeModal() {
    setShow(false);
  }

  console.log('re');
  axios.get('/order/history').then((res) => {
    setOrderHistory(copy);
   })
   
  return (
    <div>
      {show ? <HistoryModal closeModal={closeModal} /> : null}
      <Link to='/payment'>결제화면테스트</Link>
      <h2 className="text-center">주문내역</h2>
      {
        orderHistory.map((a, i) => {
          return (
            <>
              <HistoryCard data={a} index={i} showModal={showModal} />
            </>
          )
        })
      }

    </div>
  )
}

function HistoryCard(props) {
  return (
    <div>
      <div className="d-flex justify-content-center">
        <MDBCard type='button' className="btn m-4 md" id={'card'+props.index} alignment='center' border="primary" style={{ width: '600px' }} onClick={
          (e) => {
            console.log(e.target.value);
            props.showModal();

          }
        }>
          <MDBCardHeader className="" >{props.data.시간}</MDBCardHeader>
          <div className="row">
            <MDBCardBody className="">
              <MDBCardTitle>{props.data.menu_nm}</MDBCardTitle>
              <MDBCardText>{props.data.menu_config}</MDBCardText>
              <MDBBtn className="" href='#'>{props.data.price}</MDBBtn>
            </MDBCardBody>
          </div>
          <MDBCardFooter className='text-muted'>옵션</MDBCardFooter>
        </MDBCard>
      </div>
    </div>

  );
}

function HistoryModal(props) {
  return (
    <div className="black-bg">
      <div className="white-bg">
        <h4>hi</h4>
        <button className="btn btn-danger" id="close" onClick={props.closeModal}>닫기</button>
      </div>
    </div>
  )
}
export default OrderHistory

[codingapple]

컴포넌트가 재렌더링되면 그 안에 있는 코드도 다시읽습니다 
ajax요청은 1회실행되는 useEffect안에서 쓰거나 합시다

[글쓴이]

글