Interface로 props 이동하기 오류 탈출

야호

• 목적 : '회원탈퇴'버튼을 클릭하면 정보 팝업창이 뜨고 팝업창에 있는 '취소'버튼을 클릭하면 팝업창이 닫히는 기능을 구현하고 싶었음.

• 상황 : '회원탈퇴'버튼은 Mypage.tsx파일에 있고, '취소'버튼은 Withdrawal.tsx 파일에 있어서 prop를 이동해야 하는 상황

신나는 코딩 시작 (•̀ᴗ•́) ̑̑و

//Mypage.tsx
export interface PropsType {
  popup: boolean;
}

const MypageTab = () => {
  const [popup, setPopup] = useState<PropsType['popup']>(false);

  return (
    <ContentsList>
    	<p onClick={() => setPopup(true)}>회원탈퇴</p>
	</ContentsList>
	<ContentsResult>
        {popup === true && <Withdrawal togglePop={togglePop} />}
    </ContentsResult>
  );
};

//Withdrawal.tsx
import { PropsType } from './MypageTab';
const Withdrawal = ({popup,}: {popup: PropsType['popup'];}): JSX.Element | any => {
  const onPopupToggle = (popup: any) => {
    popup(!popup);
    console.log(popup);
  };
  if (popup) {
    return (
        <Popup>
            <Btn fontColor="#666" backgroundColor="#fff" padding="11px 26px">
              취소
            </Btn>
        </Popup>
    );
  }
};

오류감옥에 갇힘..

검색.. 검색... 이유... 보내는법.. interface.. props.. react ..

몇일을 고민하다가 해결법을 찾음 야호

//Mypage.tsx
const MypageTab = () => {
  const [popup, setPopup] = useState<boolean>(false);
  const togglePop = () => {
    setPopup(!popup);
  };

  return (
    <ContentsList>
    	<p onClick={() => setPopup(true)}>회원탈퇴</p>
	</ContentsList>
	<ContentsResult>
        {popup === true && <Withdrawal togglePop={togglePop} />}
    </ContentsResult>
  );
};

//Withdrawal.tsx
interface Prop {
  togglePop: () => void;
}
const Withdrawal = ({ togglePop }: Prop): JSX.Element | any => {
  return (
      <Popup>
          <Btn
            fontColor="#666"
            backgroundColor="#fff"
            padding="11px 26px"
            onClick={togglePop}
          >
            취소
          </Btn>
      </Popup>
  );
};

성공!