props 추천 사용방법

props 사용 방법 1, 2 중에서 1을 사용하는 것이 좋음

props 사용 방법1

function RechargeCashModal(props) {
	const { open, close, } = props;
}

• 예시 props 여러개 보내기

  import React, { useState, useRef, useEffect } from 'react';
  import Deposit from './Deposit';
  import CashModalComplete from './CashModalComplete';
  import Toast from '../../hooks/Toast'
  // import CashModalWaiting from './CashModalWaiting';
  import CloseIcon from '@mui/icons-material/Close';
  
  function RechargeCashModal(props) {
      const { open, close, } = props;
  
      // Deposit Modal 보여주기
      const [nextPage, setNextPage] = useState(false);
      
      const nextBtn = () => {
          if(true){
              setNextPage(true);
              // console.log('111');
          }
      }
  
      return (
          <>
              {nextPage ? (
                  <CashModalComplete
                      close={close}
                  />
              ) : (
                  <Deposit
                      nextBtn={nextBtn}
                      close={close}
                  />
              )}
          </>
      );
  }
  
  export default RechargeCashModal;

props 사용 방법2

function RechargeCashModal({open, close}) {
	
}

• 예시props 여러개 보내기

  import React, { useState, useRef, useEffect } from 'react';
  import Deposit from './Deposit';
  import CashModalComplete from './CashModalComplete';
  import Toast from '../../hooks/Toast'
  // import CashModalWaiting from './CashModalWaiting';
  import CloseIcon from '@mui/icons-material/Close';
  
  function RechargeCashModal({open, close}) {
      // Deposit Modal 보여주기
      const [nextPage, setNextPage] = useState(false);
      
      const nextBtn = () => {
          if(true){
              setNextPage(true);
              // console.log('111');
          }
      }
  
      return (
          <>
              {nextPage ? (
                  <CashModalComplete
                      close={close}
                  />
              ) : (
                  <Deposit
                      nextBtn={nextBtn}
                      close={close}
                  />
              )}
          </>
      );
  }
  
  export default RechargeCashModal;