김민태의 데브캠프 2기 - Step을 활용한 페이지 나누기

 

 

예를 들어 쇼핑몰에서 하나의 제품을 구매한다고 해보자.

 

그렇다면 페이지는 주문 페이지 -> 주문 확인 페이지 -> 주문 완료 페이지로 이동해야 한다.

이처럼 순서를 주기 위해서 각 페이지마다 페이지의 스텝을 준다(결국 컴포넌트를 따로 보여주기).

 

  const [step, setStep] = useState(0);

  return (
    <div style={{padding: '4rem'}}>
      {step === 0 && <OrderPage setStep={setStep}/>}
      {step === 1 && <SummaryPage setStep={setStep}/>}
      {step === 2 && <CompletePage setStep={setStep}/>}
    </div>
  );

 

Route에서 props를 "내려"주고, 

 

const OrderPage = ({ setStep}) => {

     <button onClick = {() => setStep()}>
        주문
     </button>          
  }

 

위의 코드처럼 받아, 버튼을 클릭하면 다음 Step으로 이동하게 된다.