페이지 새로고침

[김민규]

안녕하세요. 리액트 강의를 듣고 프로젝트 진행에 도움이 많이 되고 있습니다. 
제가 하는 프로젝트는 헬스장 예약 관련 프로젝트입니다. 
이 과정에서, 운동부위를 선택 시, 해당 운동기구와 관련된 예약 현황을 Nginx로부터 받아 출력해주는 코드를 짜고 있습니다.
ReservationPage를 구성하고 있는 Main 컴포넌트는 Sidebar, SelectedMachinesList 컴포넌트로 이루어져 있고, 각 ToggleButton 컴포넌트로 이루어진
Sidebar 컴포넌트에서 특정 ToggleButton 컴포넌트를 클릭할 경우, api 요청을 보내 데이터를 받아오는 형태 입니다. 받아온 데이터는 SelectedMachineList에 저장되어 화면에 보이게 할 계획입니다.
ReservationPage로 넘어오기 전, SelectPage에서 "예약하기" 버튼을 클릭할 경우, useNavigate('/reservation')함수가 호출되어 넘어옵니다. 
그런데, 왜인지 모르게 ReservationPage의 토글 버튼을 클릭할 경우, api get 요청으로 인한 데이터 받아오기는 잘 되지만, 거의 바로 SelectPage로 넘어가는 현상이 발생하고 있습니다.
제 코드는 다음과 같습니다..

1. Main.jsx
function Main({ reservationWaitList, setReservationWaitList, selectedMachines, setSelectedMachines, handleSelectMachines }) {
  
    return (
        <Box
          style={{
            display: "flex",
            flexDirection: "row", // 토글 버튼과 운동기구 목록을 가로로 배치
            flex: "4"
            // overflowY: "auto",
          }}
          >
            <SideBar setSelectedMachines={setSelectedMachines} handleSelectMachines={handleSelectMachines}/>
            <SelectedMachinesList selectedMachines={selectedMachines} reservationWaitList={reservationWaitList} setReservationWaitList={setReservationWaitList} />
        </Box>
    )
}

export default Main;

1-1. SideBar

function SideBar({ setSelectedMachines, handleSelectMachines }) {
    const ExerciseParts = [
        { part : "0", name : "유산소"},
        { part : "1", name : "하체"},
        { part : "2", name : "어깨"},
        { part : "3", name : "가슴"},
        { part : "4", name : "등"},
    ]
    return (
        <Box
            display="flex"
            flexDirection="column" // 토글 버튼을 세로로 배치
            marginLeft="5vh"
        >
            {
                ExerciseParts.map((x) => (
                    <ToggleButton key={x.part} selectedPart={x.part} name={x.name} setSelectedMachines={setSelectedMachines} handleSelectMachines={handleSelectMachines}/>
                ))
            }
        </Box>
    );
}

export default SideBar;

1-1-1. ToggleButton.jsx

function ToggleButton({ selectedPart, name, setSelectedMachines, handleSelectMachines }) {
   
    return (
      <Button onClick={() => handleSelectMachines(selectedPart)}>
        {name}
      </Button>
    );
}

export default ToggleButton;

1-2. SelectedMachinesList.jsx

// SideBar의 토글 버튼 클릭 시 나오는 해당 부위에 대한 예약 현황 리스트
function SelectedMachinesList({ selectedMachines, reservationWaitList, setReservationWaitList }) {
    const currentTime = new Date();
    const HH = parseInt(format(currentTime, 'HH'), 10);
    const MM = parseInt(format(currentTime, 'mm'), 10);

    const segmentInterval = 10;
    const startIndex = HH * 6 + (MM % segmentInterval === 0 ? MM / segmentInterval + 1 : Math.floor(MM / segmentInterval) + 1);
    const endIndex = startIndex + 18;

    return (
      <div style={{ overflowY: 'auto', height: "50vh", marginLeft: "5vh" }}>
        {selectedMachines.length > 0 && (
          <div style={{ display: "flex", flexDirection: "row-reverse" }}>
            <div style={{ display: "flex", flexDirection: "row", alignItems: "center"}}>
              <div style={{width: "10px", height: "10px", border: "1px solid black", backgroundColor: "skyblue"}}></div>
              <span>예약 완료</span>
            </div>
            <div style={{ display: "flex", flexDirection: "row", alignItems: "center"}}>
              <div style={{width: "10px", height: "10px", border: "1px solid black", backgroundColor: "blue"}}></div>
              <span>내 예약</span>
            </div>
            <div style={{ display: "flex", flexDirection: "row", alignItems: "center"}}>
              <div style={{width: "10px", height: "10px", border: "1px solid black", backgroundColor: "white"}}></div>
              <span>예약 가능</span>
            </div>
          </div>
        )}
        {selectedMachines.length === 0 ? (
          <div style={{ display: "flex", textAlign: "center", margin: "auto", fontSize: "30px"}}>운동 부위를 선택해 주세요.</div>
        ) : (
          selectedMachines.map((machineInfo) => (
            <Box key={machineInfo.machineId} m={2} p={2} border={1}
                style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}
            >
              <div style={{ margin: '5vh'}}>
                < img src={process.env.PUBLIC_URL + `images/machines/${machineInfo.machineTypeName}.jpg`} alt={machineInfo.machineTypeName} style={{ width: "150px", height: "150px"}}/>
                <p>{machineInfo.machineTypeName}</p>
              </div>
              <div style={{ margin: '5vh'}}>
                <ReservationStatus
                    reservationWaitList={reservationWaitList}
                    setReservationWaitList={setReservationWaitList}
                    machineInfo={machineInfo}
                    startIndex={startIndex}
                    endIndex={endIndex}
                />
              </div>
            </Box>
          ))
        )}
      </div>
    );
}

export default SelectedMachinesList;

컴포넌트를 나누는 과정에서 코드가 길어져서 너무 많은 정보를 담은 점 죄송합니다. 
이 문제에 대해 며칠 고민해 봤지만, 프론트 담당이 저 뿐이라 해결이 되고 있지 않습니다....ㅠㅠ
답변 주시면 정말 감사드리겠습니다. 항상 재밌고 유익한 강의 감사합니다!

[codingapple]

get요청하는 코드가 이상한게 아닐까요
아니면 get요청하는코드 밑에 state변경이나 페이지 이동하는 코드가 있나봅니다

[김민규]

답변 감사드립니다. 우선, get 요청 코드는 해당 api 요청에 필요한 url 주소에 문제가 없었고, 
요청을 통한 응답 데이터를 가지고 ReservationPage(Main 컴포넌트가 하위로 있는 페이지 단위 컴포넌트)
에서 정의한 state 변수 selectedMachines에 담는 과정을 거쳤지만, 페이지를 이동하는 코드는 없었습니다.
혹시, 다른 컴포넌트의 페이지 이동(저는 페이지 이동 시, useNavigate를 사용하여 이동했습니다.)에서 문제가 발생
한 것일까 해서, 각 컴포넌트 별로 useNavigate를 비활성화 시킨 후 토글 버튼을 클릭해도 같은 현상이 벌어졌습니다 ㅠㅠ
우선 저도 계속 문제 해결을 위해 시도해 보겠습니다 감사합니다!!

[codingapple]

아니면 버튼 상위컴포넌트들 중에 onClick이나 링크달려있는게 있을수도요

[글쓴이]

글